Jenkins打包Vue并自动部署到远程服务器-工具盒子

所需工具：Jenkins、svn、rsync、nodejs、ansible（可选）

背景需求：当前存在多个项目，使用的是同一套Vue代码，每个项目的配置文件不同，所以前端在打包时需要手动替换配置文件，这样就产生了额外的工作量，为了解决此问题，所以决定通过Jenkins来打包并自动替换配置文件

当前系统环境：Centos7

1、安装Jenkins

参考：https://blog.whsir.com/post-2505.html

2、安装nodejs

参考：https://blog.whsir.com/post-4807.html

3、安装Subversion插件

因为我这里是通过svn来管理代码，所以我这需要安装svn插件，如果你是用git，自行安装git插件，原理上都一样的。

登陆Jenkins，Manage Jenkins→Manage Plugins→Available查找Subversion，勾选进行安装

4、创建新的项目

在Jenkins左边点击，创建新的项目，自定义名称，然后选择自由风格

5、配置Subversion

本地已存在svn代码库，并且Vue代码已经上传到对应的svn目录中

Repository URL：对应Vue代码位置

Credentials：添加svn用户（该用户拥有读权限即可）

注意：如果是nginx代理的Jenkins，添加用户可能会出现不成功

6、配置打包shell

在Build中选择Execute shell，输入打包命令
npm install npm run build

|-----|---------------------------| | 1 2 | npm install npm run build |

保存后，可以先进行一次构建

7、修改配置文件

不同的项目使用不同的配置文件，我这里的做法是将不同项目的配置文件上传到Centos7（即当前部署Jenkins的机器）指定的目录中，然后在Execute shell添加一行cp命令，在每次打包前都替换配置，即每个项目都单独对应一个Jenkins构建
\cp /root/prod.env.js /root/.jenkins/workspace/whsir_demo/config/

|---|--------------------------------------------------------------------| | 1 | \cp /root/prod.env.js /root/.jenkins/workspace/whsir_demo/config/ |

8、自动发布

网上很多都是以ssh来做自动发布的，我个人很喜欢rsync神器（不接受反驳），所以我这里以rsync来同步到远程服务器。

我这打包后生成的dist是在/root/.jenkins/workspace/whsir_demo/中，我们只需要将/root/.jenkins/workspace/whsir_demo/dist/目录同步到远程服务器即可。

rsync配置参考：https://blog.whsir.com/post-1501.html

最后将写好的rsync脚本添加到Execute shell中，即可实现Vue自动打包部署到远程服务器
rsync -azvP --delete --exclude=.svn --password-file=/root/mima /root/.jenkins/workspace/whsir_demo/dist whsir@10.10.10.10::demo

|---|---------------------------------------------------------------------------------------------------------------------------------| | 1 | rsync -azvP --delete --exclude=.svn --password-file=/root/mima /root/.jenkins/workspace/whsir_demo/dist whsir@10.10.10.10::demo |