Jenkins - 打造强大的前端自动化工作流

╰+攻爆jí腚メ 2023-09-23 17:07 127阅读 0赞

### 什么是 Jenkins？ ###

Jenkins 是一款业界流行的开源持续集成工具，广泛用于项目开发，具有自动化构建、测试和部署等功能。我们可以利用 Jenkins 来对项目的持续性集成进行管控处理。

--------------------

### Jenkins 任务的创建 ###

这里就简单不再累赘说明 Jenkins 的安装启动和账号的配置等初始化动作了。

1. 新建任务

根据实际用途选择类型，这里选择第一个“构建一个自由风格的软件项目”；输入名称点击确定按钮创建空的一个构建任务。

![format_png][]

创建完成后接着配置项目构建任务的配置。

--------------------

### 触发 git hook 的回调功能 ###

git hook 就是我们向github/码云等远程仓库push我们的代码时，jenkins能知道我们提交了代码，这是自动构建自动部署的前提，钩子的实现原理是在远端仓库上配置一个Jenkins服务器的接口地址，当本地向远端仓库发起push时，远端仓库会向配置的Jenkins服务器的接口地址发起一个带参数的请求，jenkins 收到后开始工作。

1. 配置 git 账号和仓库等配置

打开刚创建的任务，选择配置，添加远程仓库地址，配置登录名及密码及分支。

![format_png 1][]

2. 添加触发器

若在任务配置中没找到如下图的模块，则需要先安装 Generic Webhook Trigger Plugin 插件（系统管理-插件管理-搜索Generic Webhook Trigger Plugin）如果可选插件列表为空，点击高级标签页，替换升级站点的URL为：`http://mirror.xmission.com/jenkins/updates/update-center.json` 并且点击提交和立即获取。

![format_png 2][]

3. git 仓库配置钩子

需要在上面第二步中提示的 Url 和 Gitee WebHook 密码 同时配置到仓库当中。

![format_png 3][]

--------------------

### 实现项目的自动化构建与部署 ###

1. 配置构建的环境

配置构建的环境需要先配置 Jenkins 所含有的 node 环境；需要进入（系统管理-全局工具设置- NodeJS 安装）进行所需的 node 版本。

![format_png 4][]

打开刚刚的 Jenkins 任务，点击配置里面的构建环境，勾选图中红色方框的这个选项，并指定一个 node 版本。

![format_png 5][]

2. 配置构建、部署脚本

点击构建，选择 “执行 shell” 选项，把要执行的 shell 脚本命令输进去，多个命令使用 && 分开；  
这里仅简略写一些演示脚本，具体构建、部署脚本依照实际情况编写。

例如：

*  安装项目依赖、运行 build 命令构建项目
 *  构建完成后拷贝相关资源到项目目录

![format_png 6][]

--------------------

### 实现构建和部署后的消息提醒 ###

这里我们使用 Extended E-mail Notification 该插件来扩展实现构建部署后的消息提醒。

1.  打开系统管理-系统配置-Extended E-mail Notification，不是系统管理-系统配置-邮件通知，注意这里是配置用来发邮件的邮箱！

![format_png 7][]

1.  打开创建的那个任务，增加构建后操作步骤选择 Editable Email Notification，Project Recipient List那里写你要发给谁邮件，可以多个，用分号隔开。

![format_png 8][]

1.  然后点击 Advanced Settings-Triggers-Add Trigger（即上图的右下角的“Advanced Settings...”按钮），选择always，意思是无论什么情况任务执行完就发邮件，也可以选择其他模式，如任务执行异常了才发邮件。  
    这里配置的接收邮件的地址是上图中所配置的接收邮件用户列表，这个可以根据实际进行调配。

![format_png 9][]

[format_png]: https://img-blog.csdnimg.cn/img_convert/a3e586022362b1cc22397b831f2c555e.webp?x-oss-process=image/format,png
[format_png 1]: https://img-blog.csdnimg.cn/img_convert/16f4ca6902bfa09b29568ecf9ccfe357.webp?x-oss-process=image/format,png
[format_png 2]: https://img-blog.csdnimg.cn/img_convert/6b003326bbe04eba50c1fd122b761da0.webp?x-oss-process=image/format,png
[format_png 3]: https://img-blog.csdnimg.cn/img_convert/06e50ae0e5d77bb1f348ef7468ee6d9a.webp?x-oss-process=image/format,png
[format_png 4]: https://img-blog.csdnimg.cn/img_convert/424ee6fc6ecac1ec411ce74fe7445107.webp?x-oss-process=image/format,png
[format_png 5]: https://img-blog.csdnimg.cn/img_convert/d15c56793c7cd772956c036b39084718.webp?x-oss-process=image/format,png
[format_png 6]: https://img-blog.csdnimg.cn/img_convert/050a19271dec01e5f5596a5ce77e7bbd.webp?x-oss-process=image/format,png
[format_png 7]: https://img-blog.csdnimg.cn/img_convert/f6e34216e23ff88e94e413379e8ee26b.webp?x-oss-process=image/format,png
[format_png 8]: https://img-blog.csdnimg.cn/img_convert/04679533c47d9175a1dde2c82ff8c79f.webp?x-oss-process=image/format,png
[format_png 9]: https://img-blog.csdnimg.cn/img_convert/6c0397676256130c299761e14e8e0b01.webp?x-oss-process=image/format,png