使用 Jenkins 持续集成 Vue项目

使用 Jenkins 配合 Github 持续集成 Vue项目，在使用之前需要在 Jenkins 中安装Node.js 的插件，并且在全局工具配置中配置Node.js的环境，具体步骤如下

配置Node.js

1、配置Node.js环境

# 在usr中新建node目录
mkdir /usr/local/node
# 定位到node目录
cd /usr/local/node
# 下载node.js
wget https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz
# 解压node
tar -xvf node-v10.16.0-linux-x64.tar.xz
# 建立连接
sudo ln -s /usr/local/node/node-v10.16.0-linux-x64/bin/node /usr/bin/node
sudo ln -s /usr/local/node/node-v10.16.0-linux-x64/bin/npm /usr/bin/npm
# 验证安装
node -v
# 配置镜像加速
npm config set registry https://registry.npm.taobao.org

2、在插件管理中搜索 Node.js 并安装

3、全局配置Node

打开 系统设置 -> 全局工具配置 找到 Node，取消自动安装的勾选，输入我们安装的路径 /usr/local/node/node-v10.16.0-linux-x64

创建任务

返回控制台，创建一个自由风格的项目

1、配置代码源

在源码管理中的 Repository URL 中输入我们的git仓库地址，并且添加凭证

2、配置构建触发器

这里选择 GitHub hook trigger for GITScm polling，在代码提交后就自动构建，在使用之前需要安装 Github 的插件，由于Jenkins在初始的时候已经默认安装了Git Plugin和相关依赖，因此不需要重复安装（码云与GitLab需要安装插件）

3、配置Github服务器

打开系统设置页面 -> Github 服务器

在这里需要添加访问凭证 Secret text

获取 Github 的访问凭证，打开 Github 首页，在 settings -> Developer settings -> Personal access tokens -> Generate new token

将生成的 access tokens 配置到 上一步的 Github 服务器中

4、配置Github Hook

打开 Github 中的项目， 在项目的 Settings 中选择 Webhooks -> Add webhook

5、配置构建环境

勾选 Use secret text(s) or file(s) 与 Add timestamps to the Console Output

6、编写构建的shell脚本

经过上面的步骤后，一旦我们有代码提交，就会自动触发任务，我们现在要做的是编写shell脚本进行自动构建，步骤如下

1. 下载依赖
2. 打包
3. 覆盖原来的dist文件夹

echo '开始构建项目'
DIR=/www/server/eladmin
npm install
npm run build
rm -rf $DIR || echo '文件夹不存在'
# 判断路径是否存在，如果不存在则创建路径
if [ ! -d $DIR ];then
   mkdir -p $DIR
fi
# 定位到项目路径
cd $DIR
mv -f /root/.jenkins/workspace/cloudy-web/dist .
echo '项目构建完成'

配置完成后，项目就会自动部署，只需要点击构建按钮或者提交代码后，jenkins就会自动拉去最新代码，构建项目。