jenkins vue 打包特别慢_Jenkins打包Vue并自动部署到远程服务器

所需工具：Jenkins、svn、rsync、nodejs、ansible(可选)

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

当前系统环境：Centos7

1、安装Jenkins

2、安装nodejs

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

npminstall

npmrunbuild

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

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脚本添加到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/distwhsir@10.10.10.10::demo

9、结语

Jenkins通过Execute shell来执行shell脚本非常好用，如果远程服务器需要重启等操作可以借助ansible，并将ansible加入到Execute shell中。

~微信打赏~

赏

分享到：