前端部署项目

---

前端半部署

半部署就是原先服务器已经有 web 项目了，我们要更新一下最新的 html

---

思路

• 前端打包并压缩
• 把压缩包复制到服务器
• 在服务器中把压缩包放到 docker 容器
• 进入docker 容器中，解压，覆盖原来的 html
• 重启 nginx 服务

---

步骤

首先前端打个包，在 vue 项目下输入 npm run build （通常情况下是这个，具体什么指令要去 package.json 中去查看）

打完包后会在项目中生成一个 dist 打包后的文件，将这个文件 压缩成 zip

然后通过 scp 命令把 zip 包拷贝到服务器上，在 dist.zip 所在目录下用终端输入：

scp dist.zip root@192.168.200.184:/root 

scp 命令介绍： https://www.runoob.com/linux/linux-comm-scp.html

输入完密码后会显示上传进度

上传成功后并没有提示，代表成功了（Linux 特色），接着用 ssh 登录一下远程服务器，在终端输入：

ssh root@192.168.200.184

输入密码后，通过 ll （是 ls -l 的缩写）命令，查看当前服务器下的文件，ls 命令介绍，应该能在这里看到传过来的文件。

然后找到我们要修改的 docker 容器，这里用docker 的模糊查询命令

查询所有正在运行的容器：docker ps -a

# 搜索 名字带 ui 的 docker 容器
docker ps | grep ui

之后把 zip 包拷贝到容器里

# 拷贝操作
[root@DEV-SZC-APP01 ~]# docker cp dist.zip  jiaohang-ds-ui:/usr/share/nginx/
# 进入容器
[root@DEV-SZC-APP01 ~]# docker exec -it jiaohang-ds-ui sh
# 进入 nginx 目录下
cd /usr/share/nginx/

要把当前的 html 文件夹替换成新的，先解压 zip 包

unzip dist.zip 

替换完之后重启一下 nginx

nginx -s reload

之后就可以退出容器了

exit

修改容器中的 nginx 配置

容器中的nginx.config 在 /etc/nginx 下

参考

• 1、Docker 笔记
• 2、Linux 命令大全
• 3、Linux 手册

---

全部署（第一次部署）

思路

把项目打包成tar，然后传到服务器，

服务器上的 docker 加载镜像后，启动项目，配置参数，编辑 Nginx等

步骤

• 配置nginx.conf以及Dockerfile；
• 编译：docker build -t 项目名称:volvo-1.0 .
• 打包：docker save -o web.tar 项目名:版本号
• 上传服务器：scp 上传的文件 服务器地址 服务器路径
• 服务器 docker 加载 tar 包：docker load -i 项目.tar
• 启动项目：docker run -i -d --rm -p 8098:80