Jenkins自动化部署Vue应用

Jenkins安装及配置请参考：Jenkins自动化部署springboot+vue应用
vue应用自动化部署原理为：

1. jenkins job获取vue应用源代码(git/svn)
2. jenkins job执行npm install和npm build 命令打包
3. 将生成好的dist目录下文件打压缩包tar.gz
4. 通过SSH将项目打包好的压缩文件发送到应用服务器

Jenkins公共配置

1.安装插件

• NodeJS Plugin
• Publish Over SSH
• Gitee Plugin
• Generic Webhook Trigger Plugin

这两个分别用来为vue打包，和将打包好的文件发送的远程应用服务器,安装好这两个插件，要进行配置，参考如下：

• nodejs，配置两个版本的nodejs备用

  
  nodejs
• Publish Over SSH
  Publish Over SSH
  这里配置应用服务器的SSH账号，注意 。

• Gitee Plugin 和Generic Webhook Trigger Plugin
  这两个插件为了实现在代码提交或评论等情况下实现自动任务构建。两者区别：gitee适用于码云仓库，Generic Webhook Trigger Plugin适用于非码云的git仓库；
  如果代码仓库是gitee,配置Generic Webhook Trigger Plugin则代码提交时候出显示WebHook请求错误，但点击重拾又会成功，目前还不知道具体原因。

  
  gitee Webhook

Job配置

1. 创建一个自由风格的任务

2. 填写代码仓库

   
   gitee
   

   填入地址选择好凭证即可。

3. 构建触发器
   当代码仓库为gitee时候选择如下，记得生成Gitee WebHook 密码（可自动生成）

   
   Gitee webhook
   

   当代码仓库为非gitee时选择如下

   
   Generic Webhook Trigger Plugin

4. 构建环境,选择nodejs版本

   
   Nodejs

5. 构建，选择执行shell填写脚本

   
   构建
   

   脚本如下,注意可以使用环境变量JENKINS_HOME 、JOB_NAME:

#进入项目目录，使用环境变量
cd $JENKINS_HOME/workspace/$JOB_NAME
#npm源设置为淘宝源
npm config set registry https://registry.npm.taobao.org 
#检测npm是否切换成功
npm config get registry 
#安装依赖
npm install
#打包
npm run build 
#删除上次打包生成的压缩文件
rm -rf dist.tar.gz 
#打包
tar -zcvf dist.tar.gz dist/ 

6. 构建后操作
   构建成功后将打包好文件发送到应用服务器，并解压，删除旧文件，实现更新

   
   构建后操作

执行Job

1. 点击执行立即构建，查看控制台可观察构建过程

   
   执行job

2. 实现gitee仓库提交后自动构建
   在gitee里进行设置,按照如下图设置填写url及webhook密码，选择事件即可。
   在本地Pull一次代码，可以看到jenkins已经实现触发自动构建，也可以从gitee处看到请求历史。

   
   gitee

3. 查看应用服务器是否完成代码更新，可以看到应用服务器代码文件已经更新

   
   centos server