IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 系统运维 -> 部署前端项目到服务器过程详解 -> 正文阅读

[系统运维]部署前端项目到服务器过程详解

打包

以vue为例,本地先执行npm run build打包命令,之后将dist目录进行压缩,得到dist.zip文件
在这里插入图片描述

通过xshell连接远程服务器

可以参考我之前写的文章:通过Xshell连接有跳板机/堡垒机的服务器,按照文章步骤,连接远程服务器
在这里插入图片描述

部署

  1. 进入服务器,先切换root角色,这样才有操作服务器的权限
    执行whoami查看当前角色,如果角色不是root,则执行sudo su,切换成root角色,切换之后,再次执行whoami确认当前角色是否是root
    在这里插入图片描述
  2. 将电脑上打包好的dist.zip文件复制到远端服务器的临时文件夹上(如tmp)
    执行cd /tmp进入服务器根目录下的tmp文件夹
    在这里插入图片描述
    将本地电脑上打包好的dist.zip文件直接拖到Xshell窗口,即可将dist.zip文件复制到服务器tmp临时目录下
    在这里插入图片描述

在这里插入图片描述
执行ls,即可查看tmp文件夹下,多了dist.zip文件,说明文件复制成功
在这里插入图片描述
3. 假如我们的项目是部署在服务器的/workspace/www/projectName下,那么进入到这个目录。
执行ls可以看到,当前项目目录下,有这个项目的之前版本的dist压缩包、当前版本的dist压缩包以及当前版本的dist目录
在这里插入图片描述
4. 为了保证项目可以回滚到之前的版本,首先我们要备份当前运行版本的dist.zip,通常是按照dist+日期进行命名备份
当前项目目录下,执行mv dist.zip dist0615.zip对当前版本的dist.zip进行重命名备份
在这里插入图片描述
5. 之后在当前项目目录运行mv /tmp/dist.zip .将服务器/tmp目录的dist.zip压缩包移动到当前项目目录上
在这里插入图片描述
6. 在当前目录,执行unzip -o dist.zip -d dist,即解压dist.zip到当前目录的dist目录下,并覆盖之前的dist目录,解压成功之后,前端项目即部署成功
在这里插入图片描述

修改nginx配置(只有需要修改nginx配置的时候(如代理)才执行这步,否则不需要执行)

  1. 如项目中的nginx配置放在服务器/workspace/app/nginx/conf.d目录下,
    那么我们就执行cd /workspace/app/nginx/conf.d进入到这个目录
    执行ls可以看到这个目录有我们的nginx配置文件,如ope.conf
    在这里插入图片描述
  2. 为了防止新修改的nginx配置报错,我们需要对当前版本的nginx配置文件备份一下,再执行之后的操作。
    执行cp ope.conf ope0615.conf对当前版本的nginx配置文件备份一下
  3. 执行vim 文件名进入到nginx配置文件的编辑页,按i即可进入编辑状态,编辑完成之后,按esc退出编辑。如果需要保存修改,则先按shift :wq即可;如果不需要保存修改,则先按shift :q!即可;
    在这里插入图片描述
  4. 修改完nginx配置之后,需要重启nginx,假如我们的nginx程序放在服务器/workspace/app/nginx/sbin目录下,
    那么我们就执行cd /workspace/app/nginx/sbin进入到这个目录
    执行./nginx -s reload即可重启nginx,至此,前端项目部署完成
    在这里插入图片描述
  系统运维 最新文章
配置小型公司网络WLAN基本业务(AC通过三层
如何在交付运维过程中建立风险底线意识,提
快速传输大文件,怎么通过网络传大文件给对
从游戏服务端角度分析移动同步(状态同步)
MySQL使用MyCat实现分库分表
如何用DWDM射频光纤技术实现200公里外的站点
国内顺畅下载k8s.gcr.io的镜像
自动化测试appium
ctfshow ssrf
Linux操作系统学习之实用指令(Centos7/8均
上一篇文章      下一篇文章      查看所有文章
加:2022-06-20 23:09:26  更:2022-06-20 23:09:46 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/18 22:49:33-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码