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

avatar
作者
猴君
阅读量:0

0. 背景

正常的 DevOps 中,我们都有成熟的自动构建工具,比如 JenkinsGitLab CI/CDGitHub 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

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!