阅读 367

前端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版本

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

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

nvm install v11.12.0
复制代码

安装 pm2

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

npm install pm2 -g
复制代码

Jenkins 配置 Node 环境

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

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

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

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

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"
复制代码

项目存在三个分支:masterdevprod

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

增加GitHub的授权

生成GitHub授权token

打开GitHub的设置,选择 Developer settings

Developer settings

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

Generate new token

选中 repoadmin:repo_hook 两项,填入一个名字,生成 token。

选择repo

复制刚生成的token,备用。

生成token

Jenkins 配置 GitHub 全局授权

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

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

系统设置

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

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

添加GitHub凭证

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

secret text

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

token添加

连接测试

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

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

高级

添加GitHub Hook URL

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

Settings

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

Add webhook

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

Payload URL

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

⚠️注意事项

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

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

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

开启内网穿透

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

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

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

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

配置ssh服务

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

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

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

配置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 ,选择服务器,填写我们的服务文件和需要执行的命令。

Node服务操作

测试

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

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

任务自动触发

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

关注下面的标签,发现更多相似文章
评论