使用 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、配置构建触发器

file

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

3、配置Github服务器

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

file

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

file

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

file

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

file

4、配置Github Hook

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

file

5、配置构建环境

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

file

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就会自动拉去最新代码,构建项目。

最后修改:2019 年 10 月 16 日 05 : 05 PM