前端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 到远端仓库，查看咱们的环境是否正常运行。

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