【基于 GitLab Webhook 的 Jenkins 自动触发构建实现手册：涵盖概念原理、环境配置、故障处理及 Tag/Commit 维度参数化构建实践】

提示：本文原创作品，良心制作，干货为主，简洁清晰，一看就会

Jenkins + GitLab Webhook自动触发构建

• 前言
• 一、GitLab Webhook 是什么
• 二、为什么要做 Webhook 自动触发构建
• 三、Webhook 自动触发构建原理
• 四、Jenkins + GitLab Webhook 实战
  • 4.1 jenkins 下载插件
  • 4.2 jenkins 上配置webhook
  • 4.3 gitlab上配置webhook
  • 4.4 gitlab-webhook配置后报错
  • 4.5 模拟开发人员推送代码
  • 4.6 基于git参数化自动构建项目
    • 4.6.1 下载插件
    • 4.6.2 基于tag构建
    • 4.6.3 基于tag构建测试
    • 4.6.4 基于commit构建
    • 4.6.5 基于commit构建测试

前言

对Jenkins基础知识不了解的小伙伴可以看这篇文章https://blog.ZEEKLOG.net/m0_63756214/article/details/155387987?spm=1001.2014.3001.5501

对gitlab基础知识不了解的小伙伴可以看这篇文章https://blog.ZEEKLOG.net/m0_63756214/article/details/155339506?spm=1001.2014.3001.5501

一、GitLab Webhook 是什么

GitLab Webhook 是 GitLab 提供的自动化触发工具：当代码仓库发生特定事件（比如提交代码、合并分支、创建标签等）时，GitLab 会自动向你预先配置的一个外部 HTTP 接口发送请求，携带事件相关的详细数据，从而触发外部系统的后续操作

二、为什么要做 Webhook 自动触发构建

手动构建项目操作容易出现漏执行、执行步骤错误等问题，自动化流程能保证构建部署的一致性和准确性；实现持续集成/持续部署（CI/CD）：这是 CI/CD 流程的核心环节之一，能让代码从提交到测试、构建、部署的全流程自动化，符合现代开发的最佳实践

三、Webhook 自动触发构建原理

配置阶段：在 GitLab 仓库的 Webhook 设置中，填写接收请求的外部服务地址（比如 Jenkins、自建的后端接口），并指定触发的事件类型。
事件触发：当仓库发生指定事件（比如你推送代码到分支），GitLab 会立即组装事件数据，以 HTTP POST 请求的形式发送到配置的外部地址
外部处理：外部服务 Jenkins 接收到请求后，解析其中的数据，执行预设的构建脚本（比如拉取代码、编译项目、打包镜像等），完成自动构建

注：gitlab和Jenkins应该处于同一网段或者可以通信

四、Jenkins + GitLab Webhook 实战

4.1 jenkins 下载插件

想实现Jenkins自动触发构建的功能，必须先下载webhook相关插件

点击“Manage Jenkins”

下拉找到“Plugins”

下载完插件后最好重启一下Jenkins！

4.2 jenkins 上配置webhook

现有项目的配置都已完成，我选一个现成的项目test-ruoyi-vue，以此为例继续配置 webhook
想看我这个项目怎么来的可以参考这篇文章https://blog.ZEEKLOG.net/m0_63756214/article/details/155728675?spm=1001.2014.3001.5501

4.3 gitlab上配置webhook

在gitlab上选择相应的项目，进行webhook的配置

配置好后，webhook会显示200

4.4 gitlab-webhook配置后报错

如果webhook报红，这是因为gitlab 10.6 版本以后为了安全，不允许向本地网络发送webhook请求，设置如下：
登录管理员账号

按上述配置完毕后可以测试一下webhook

显示200

4.5 模拟开发人员推送代码

现在我们要做的就是模拟开发人员推送代码，看Jenkins是否能自动构建项目

这是目前的前端的页面

#模拟开发人员修改代码[root@developer ~]# ls[root@developer ~]# git clone http://192.168.136.10/root/test-ruoyi-vue.git #拉取gitlab上的代码[root@developer ~]# ls test-ruoyi-vue [root@developer ~]# cd test-ruoyi-vue/[root@developer test-ruoyi-vue]# vim ruoyi-ui/src/views/index.vue #修改前端页面

[root@developer test-ruoyi-vue]# git add * #推送到暂存区[root@developer test-ruoyi-vue]# git commit -m "添加webhook的版本v1.1" #推送到工作目录[root@developer test-ruoyi-vue]# git push origin #推送到远程仓库

由下图可以看到，不是我手动点的构建，是GitLab的Administrator构建的
注：推送代码后若 Jenkins 未自动构建，可先稍等片刻，可能是网络延迟导致 Jenkins 延迟触发构建

重新访问网页，可以看到前端页面已经修改成功

4.6 基于git参数化自动构建项目

4.6.1 下载插件

想要基于git参数化自动构建，必须先下载git相关插件

4.6.2 基于tag构建

先去gitlab中修改webhook配置

去Jenkins中配置

4.6.3 基于tag构建测试

现在模拟开发人员打标签然后推送代码，观察Jenkins能否自动构建

[root@developer test-ruoyi-vue]# vim ruoyi-ui/src/views/index.vue #修改前端页面

[root@developer test-ruoyi-vue]# git add *[root@developer test-ruoyi-vue]# git commit -m "打标签，这个版本是V1.1"[root@developer test-ruoyi-vue]# git tag -a "V1.1" -m "打标签，这个版本是V1.1" #打标签[root@developer test-ruoyi-vue]# git push origin V1.1

查看Jenkins，发现Jenkins自动构建成功

访问网页，可以看到网页修改成功

4.6.4 基于commit构建

4.6.5 基于commit构建测试

[root@developer test-ruoyi-vue]# vim ruoyi-ui/src/views/index.vue [root@developer test-ruoyi-vue]# git add *[root@developer test-ruoyi-vue]# git commit -m "基于commit修订号测试jenkins自动构建"[root@developer test-ruoyi-vue]# git push origin

查看Jenkins发现自动构建成功

访问网页

注：
文中若有疏漏，欢迎大家指正赐教。
本文为100%原创，转载请务必标注原创作者，尊重劳动成果。
求赞、求关注、求评论！你的支持是我更新的最大动力，评论区等你～