本篇已 GitHub 上的项目为例,通过 hook 方式来监听分支代码合并并完成打包发布。
⚠️⚠️⚠️多图警告:非战斗人员请紧张的往下看⚠️⚠️⚠️
前言
上一篇前端er,Jenkins持续化集成环境搭建,我们已经搭建完了持续化集成的环境。
下面我们开始用这个环境,来为我们自己或者公司的前端项目效力吧!
目标
- 监听 GitHub 项目分支代码变化,自动执行打包
- 上传打包后的代码到指定服务器
- 在服务器上重启 Node 服务,完成发布(如果存在 Node 服务)
主要流程:
- 配置服务器环境1.jpg
- 配置 Jenkins 环境
- 测试项目准备
- 配置 GitHub Hook
- 新建任务
- 测试
软件
服务器环境软件
- 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
到远端仓库,查看我们的环境是否正常运行。
提交代码后,自动生成了一个打包任务,并自己运行了。✌️搞定!!!