使用bat脚本更新Vue2前端代码到服务器

0. 背景

正常的 DevOps 中，我们都有成熟的自动构建工具，比如 Jenkins、GitLab CI/CD 、GitHub Actions …… 但一些简陋的项目没有这个待遇，那我们就需要手写 bat 脚本了，本文介绍一种 Vue2 下的简单情况，即先运行 npm run build 打包好 dist 目录，然后执行脚本，上传至开发服务器，并使用 nginx 重新加载前端。

本文假定：

nginx所在服务器为： 192.168.8.88
前端文件代理目录为： /static/html/

1. 本机生成 ssh key

由于使用ssh key的方式不用每次执行脚本都输入服务器密码，故先进行此操作。

首先我们生成公钥秘钥：

ssh-keygen -t ed25519 -C "email@example.com"

然后我们移动到 ~/.ssh 目录下执行：

ssh-copy-id -i id_ed25519.pub root@192.168.8.88

在使用 ssh-copy-id 命令时，我们本地公钥会被添加到远程服务器的 ~/.ssh/authorized_keys 文件中。然后，当使用 SSH 连接到该服务器时，服务器会在客户端接受连接请求后，发送它自己的公钥。SSH会将服务器的公钥存在 ~/.ssh/known_hosts

2. 编写 bat 脚本

首先，我们在 Vue2 项目下，与dist输出目录同级创建批处理文件 deploy_dist_to_server.bat ，并写入：

ssh root@192.168.8.88 "rm -rf /static/html/*"
scp -r dist/* root@192.168.8.88:/static/html
ssh root@192.168.8.88 "nginx -s reload"

 

保存好后，我们使用快捷键 Ctrl+~ 打开命令行，执行脚本 deploy_dist_to_server.bat ，稍等片刻，开发服务器的nginx就更新完毕了。

3. 注意点

3.1. dist 目录下不应存在非前端更新文件

dist 输出目录下不应存在其它无用的文件，比如 zip 包，因为脚本会默认复制该目录下所有内容，而且默认情况下webpack 不会删除 dist 下所有文件。

3.2. nginx 更新后，谷歌浏览器会存在缓存问题

nginx执行完 nginx -s reload 如果没有在浏览器中观察到改变，大概率是浏览器本身的缓存导致。请强制刷新浏览器或者打开无痕模式即可。

结语

如果您所在的团队对开发服务器有严格的管理（如Kerberos认证），请您联系运维的同事后进行脚本的调整。

不推荐大家用此方式更新现网环境，上线前应该有测试或预上线环境。

原文：https://juejin.cn/post/7383894631312867378