前端er，Jenkins持续化集成Webpack项目

本篇已 GitHub 上的项目为例，通过 hook 方式来监听分支代码合并并完成打包发布。

⚠️⚠️⚠️多图警告：非战斗人员请紧张的往下看⚠️⚠️⚠️

前言

上一篇前端er，Jenkins持续化集成环境搭建，我们已经搭建完了持续化集成的环境。

下面我们开始用这个环境，来为我们自己或者公司的前端项目效力吧！

目标

• 监听 GitHub 项目分支代码变化，自动执行打包
• 上传打包后的代码到指定服务器
• 在服务器上重启 Node 服务，完成发布（如果存在 Node 服务）

主要流程:

1. 配置服务器环境1.jpg
2. 配置 Jenkins 环境
3. 测试项目准备
4. 配置 GitHub Hook
5. 新建任务
6. 测试

软件

服务器环境软件

• nvm：Node版本管理软件，用来管理不同的 Node 版本。
• Node：v11.12.0 基础环境，不做介绍。
• pm2：Node 服务守护进程管理工具。

Jenkins 插件

• GitHub plugin：GitHub集成的必要插件
• NodeJS Plugin：Node 项目打包必要插件
• Publish Over SSH：通过SSH操作服务器的必要插件

项目服务器环境搭建

⚠️注意：如果是单纯的静态项目，不牵扯Node服务，可以略过本步骤。

安装Node环境

安装nvm

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
# 或者
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
复制代码

增加环境变量

vi ~/.zshrc
# 文件末尾添加
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
复制代码

安装 Node

# 查看当前存在的所有Node版本
nvm list-remote
复制代码

根据自己需要安装相应的Node版本。

测试用，我安装的是最新版本 v11.12.0。

nvm install v11.12.0
复制代码

安装 pm2

对于需要Node服务支持的可以选择安装，也可以安装同类型的软件。

npm install pm2 -g
复制代码

Jenkins 配置 Node 环境

此项需要依赖 NodeJS 插件，配置前请确定插件已经安装。

我们项目使用了Node环境，所以需要在 Jenkins 中配置我们打包需要的 Node 环境。

打开 系统管理 => 全局工具配置 选中 NodeJS 栏， 点击 NodeJs 安装 按钮。

命名，选自动安装，选择一个使用的Node版本。

测试项目准备

测试项目已 Webpack4 + Vue2 + Vue-Router + Vuex 为例，简单搭建用于测试。

测试项目不做过多介绍，感兴趣的可以参照JenkinsTest。

需要注意的地方为 package.json 中的相关的命令。

"dev": "cross-env ENV=dev webpack-dev-server --hot",
"build-dev": "cross-env ENV=dev webpack --config webpack.config.js",
"prod": "cross-env ENV=prod webpack-dev-server --hot",
"build-prod": "cross-env ENV=prod webpack --config webpack.config.js"
复制代码

项目存在三个分支：master 、 dev 、 prod。

以 prod 分支为我们的发布分支， dev 分支为开发分支做演示。

增加GitHub的授权

生成GitHub授权token

打开GitHub的设置，选择 Developer settings 。

选择 Personal access tokens 菜单，点击 Generate new token 生成一个新的 token。

选中 repo 和 admin:repo_hook 两项，填入一个名字，生成 token。

复制刚生成的token，备用。

Jenkins 配置 GitHub 全局授权

配置GitHub的授权前提是安装了 GitHub API Plugin 插件，没有安装的可以安装后再尝试。

打开Jenkins配置页面，选择 系统管理 => 系统设置。

找到 GitHub 条目，选择 添加GitHub服务器 。

命名，然后选择添加凭据。

类型选择 Secret text ，Secret 中填入上一步获得的 GitHub 授权token。

保存后，在凭据栏 选择刚才添加的 Secret text，然后点击 连接测试 ，测试是否能用。

为了能够正常使用hook，需要生成一个web_hook的链接。

点击 高级 勾选 为 Github 指定另外一个 Hook URL 然后会生成一个url，复制这个url备用。

打开我们的测试项目JenkinsTest，选择 Settings 。

选择 Webhooks 标签，点击 Add webhook 按钮新增一个url。

在 Payload URL 项中填入我们刚才复制的url，点击添加，就会生成上边图片中的链接。

如果链接可用，链接的前缀会是一个绿色的✔️。

⚠️注意事项

由于虚拟机是内网，无法在 GitHub 上正确添加hook配置，所以需要开启内网穿透。

客官可以根据自己的经验来设置内网穿透，保证在外网能够访问服务器即可。

下边是我提供的简单的内网穿透，本方法在本机可用，但是在虚拟机无法使用。

开启内网穿透

安装 localtunnel ，用来做内网穿透。

# 安装依赖库
npm install -g localtunnel
# 开启穿透
lt --subdomain jenkins --port 8080
复制代码

为了麻烦，我使用的是我自己的服务器搭建的 Jenkins ，所以可以直接配置一个线上地址就行了，如果有自己的服务器也可以这么用。

测试通过后，就可以开心 ?的使用了呢~~~

配置ssh服务

此设置需要依赖 Publish over SSH 插件，请确保设置前安装了插件。

为了方便线上代码打包后的分发、发布流程，需要我们配置相应的服务器。

打开 系统管理 => 系统设置 ，选择 Publish over SSH 项，填写相应的名字，服务器地址，用户名，跳转目录等。

保存使用。

新建Jenkins任务

到目前为止，我们的环境已经配置完成，下面就可以开始创建任务，开启自动化流程了。

点击 新建任务 来创建一个任务。输入项目名称，然后选择 构建一个自由风格的软件项目 ，确定。

基础配置

勾选 GitHub 项目 ，填入我们的测试项目的地址：https://github.com/BingKui/JenkinsTest。

为了不产生资源浪费，我们勾选丢弃到旧的构建，具体数值可根据自己的需求填写。

源码管理

源码管理选择 Git ，填入我们的项目，选择我们上边添加的全局凭证 GitHub Token ，设置分支为 prod ，代码浏览器为 githubweb ，填入地址。

构建触发器

顺应自动化，我们的触发器选择为 GitHub hook trigger for GITScm polling 。

构建环境

我们使 Webpack 项目，所有选择构建环境为 Provide Node & npm bin/ folder to PATH ，选择我们前边添加的 Node 环境。

构建

下面就是我们的构建主要流程了，点击 增加构建步骤 ，选择 执行 shell ，然后编写我们的脚本。

#!/bin/bash
# 输出当前环境
echo '开始项目构建命令'
echo $PATH
node -v
npm -v
echo '当前分支'
git branch
# 切换拉取代码
echo '拉取代码'
git pull origin prod
# 安装依赖库
echo '安装依赖库'
npm install
# 执行打包
echo '开始打包'
npm run build-prod
# 打包构建后的文件
tar -cvf demo.tar ./dist
复制代码

这一步完成，我们的代码就已经构建打包完毕，接下来就是把代码上传到我们需要的服务器了。

继续，然后选择我们上边添加的服务器，填入执行的命令。

到目前为止，作为静态项目，我们的发布已经完成。如果是有 Node 服务的项目，还需要我们执行另外的操作。

⚠️注意：以下步骤为存在 Node 服务的项目的额外步骤。

点击 增加构建步骤 ，选择 Send files or execute commands over SSH ，选择服务器，填写我们的服务文件和需要执行的命令。

测试

我们的可持续集成环境已经完成，现在对我们的环境测试一下是否能够正常完成。

修改测试项目 prod 分支的文件，提交代码到仓库，push 到远端仓库，查看我们的环境是否正常运行。

提交代码后，自动生成了一个打包任务，并自己运行了。✌️搞定！！！