Vue.js - 自动检测SVN更新并自动部署Vue项目教程（Shell脚本+定时任务）

作者：hangge | 2023-08-22 08:30

在日常 Vue 项目开发中，代码更新后难免要发布版本到服务器上提交测试。但是如果采用人工的方式，不仅费时费力，而且也不够及时。好在市面上有许多持续集成和部署工具（CI/CD）可以帮助我们自动构建、测试和部署我们的代码，比如：Jenkins、GitLab CI/CD、Buddy 等。

当然除了使用这些 CI/CD 工具，我们也可以直接使用“shell 脚本+系统定时任务”方式来实现这个功能。下面通过样例演示如何实现服务器自动检测 SVN 仓库是否有更新，并在发现代码更新时自动编译项目，并发布最新版本。

1，安装必要的软件

首先我们要在服务器（CentOS 系统为例）上执行如下命令，安装 SVN 客户端和 Node.js 运行环境。

yum install -y subversion
yum install -y nodejs
yum install -y npm

如果服务器是内网机无法使用 yum 命令安装，可以参考我之前的文章进行离线安装：

2，检出目录

在服务器上使用 svn checkout 命令将 Vue 项目检出（注意这里的项目的 SVN 地址根据情况自行修改）

svn checkout http://xxx

3，编写监测脚本

创建一个 shell 脚本（这里我叫 check_svn_update.sh），脚本内容如下。该脚本用于定期检测 SVN 仓库是否有更新，并在发现有更新后自动编译项目，并将编译后的文件移动到指定位置发布（例如将其移动到 Nginx 的静态文件目录下）。

#/bin/bash
#export PATH=$PATH:/usr/local/nodejs/bin

#获取当前时间
current_time=$(date +"%Y-%m-%d %T")

#进入检出的项目目录
REPO_DIR="/home/svn/hangge"
cd $REPO_DIR

#执行更新命令（将命令的输出储存到output变量中）
#使用 --non-interactive 参数将禁止与用户进行交互
#使用 --trust-server-cert 参数将信任服务器的证书。
output=$(svn update --non-interactive --trust-server-cert --username "hangge" --password "123" 2>&1)
echo $output

#检查是否有更新（如果更新命令输出结果包含 "Updated" 字符串，说明有更新到文件）
if [[ $output == *"Updated"* ]]; then
  echo "$current_time：版本有更新，开始编译发布..."
  #编译项目
  npm install
  npm run build
  echo "$current_time：编译完成。"
  #发布新版本
  rm -rf /home/nginx/html/hangge
  mv -f -T dist /home/nginx/html/hangge
  echo "$current_time：发布完成。"
else
  echo "$current_time：当前版本已是最新。"
fi

4，创建定时任务

（1）为了能够定期执行 shell 脚本检测 SVN 仓库是否有更新，我们可以设置一个定时任务（cron job）。首先，我们使用以下命令编辑 crontab：

crontab -e

（2）接着在文件中添加如下内容，设置一个定时任务来执行监测脚本。这里我设置的是监测脚本每 5 分钟执行一次。同时我们还将脚本里面的打印信息输出到 log 文件中，方便后续的问题排查。

*/5 * * * * /bin/bash /home/svn/check_svn_update.sh >> /home/svn/check_svn_update.log 2>&1

（3）保存并退出编辑器。cron 会自动加载新的定时任务。

5，测试

我们随便对 Vue 项目文件做一些修改并提交，过一会可以发现服务器已经自动构建并部署好了最新的版本。查看日志文件可以看到如下信息：

其他