Jenkins CI/CD 前端 nginx+nodejs+Gitea Webhook 自动化教程[2025/5/13]
Part 1 简单的理论基础
CI [Continuous Integration] 持续集成: 团队维护的代码在一个位置(如 Github)不断地自行测试、构建等,以确保代码质量。
CD [Continuous Delivery] 持续交付: 在 CI 的基础上,将构建完成的产物自行部署。
Jenkins: 实现 CI/CD 的工具,本质是一个服务端。
Part 2 安装 Jenkins
转折点1: 官方文档问题
通过 Bing 搜索引擎搜到的 [Jenkins 官方文档地址](https://www.jenkins.io/zh/doc/pipeline/tour/getting-started/)
最新版本的 [Jenkins 官方文档地址](https://www.jenkins.io/zh/doc/pipeline/tour/getting-started/)
请使用最新版本的官方文档地址
Jenkins 默认用户已经具备了 Docker 基础,所以这里选择 Docker 安装
转折点2: 性能问题
Docker 本身需要的性能开销就比较大
Jenkins 作为一个需要具备构建能力的工具,在构建时同样对内存具备非常大的开销
推荐服务器配置: 4GB+ of RAM
本人比较喜欢 docker compose 创建容器
version: "3.8"
services:
jenkins:
image: jenkins/jenkins
user: "root"
restart: always
ports:
- "8080:8080"
- "50000:50000"
volumes:
- jenkins-home:/var/jenkins_home
- /var/run/docker.sock:/var/run/docker.sock
volumes:
jenkins-home:
jenkins-home 仓库配置 jenkins 基本内容,这里的内容基本上可以在 Jenkins 自带的网页端修改,这里选择通过网页端修改
启动容器,直接访问 8080 端口 按照提示初始化 Jenkins
转折点3: 网络问题
初始化时可能会遇到无法安装插件的问题
这里通过设置代理解决
选择跳过插件安装后 在右上角设置 Manage Jenkins - Plugins - Advanced settings - Update Site 设置代理
请自行寻找代理 代理地址更新速度快 当前时间可用 https://mirrors.huaweicloud.com/jenkins/updates/update-center.json

转折点4: 修改代理源+更新导致 Jenkins 无法进入
建议: 优先更新 Jenkins 再修改代理 完成下载后迅速切换回原来的代理
或者不更新 Jenkins
Part 3 设置 Workspace
先通过 New Item 创建 FreeStyle 项目

进入项目选择 Configure 现在我们的目标是让项目的 Workspace 空间中获取到项目的源代码
我们这里使用 Gitea 其他 Git 同理
在 Configure 选择 Source Code Management 这里选择 Git
转折点5: 未安装基础插件
如果这里你无法选择 Git 请前往插件管理安装 Git
Manage Jenkins - Plugins - Available Plugins - 搜索 Git plugin 并 Install
Git 仓库的配置很简单 这里不多阐述
现在在你的 Jenkins 项目中选择 Build Now 观察 Builds 是否成功 Workspace 中是否成功获取到代码
Part 3 构建
这里以 nodejs 构建前端项目为例
优先安装 nodejs 插件 这会极大幅度帮助我们开发 插件名称 NodeJS Plugin
前往 Manage Jenkins - Tools - NodeJS installations 添加一个 Node 环境
在 Jenkins 项目中 Configure - Environment - Provide Node & npm bin/ folder to PATH
来到 Configure - Build Steps 添加一个步骤 在这里执行构建前的准备工作
我给出一个简单的示例

通过 Execute Shell 执行命令
pnpm install --no-frozen-lockfile 安装项目依赖 其中 --no-frozen-lockfile 是 npm 在 Jenkins 安装时需要加上的参数
运行 package scripts - build-jenkins 这里其实就是 vite build 只不过通过 nodejs 限制了构建最大内存占用
进行一次 Build Now 观察是否打包成功,例如这里是否出现 dist 目录
Part 4 部署
安装插件 Publish Over SSH
前往 Manage Jenkins - System - Public over SSH 配置你的远程服务器
这个服务器用于存放打包完成的代码 也就是项目最终运行的服务器 (也可以是 Jenkins 服务器自身 不推荐仅作为学习)
回到 Jenkins 项目 Configure - Build Steps 添加 Send files or execute commands over SSH
将打包好的文件上传
转折点6: Publish Over SSH 路径设置
在 Manage Jenkins - System - Public over SSH - Remote Directory 推荐设置成 /
这代表允许访问远程服务器的所有目录
在项目 Configure - Build Steps - Send files or execute commands over SSH - Remote directory 这里写具体的路径

Source files 通过路径通配符选择 Workspace 下 dist 目录下的所有内容
上传到远程服务器 /home/cicd 目录下
转折点7: 权限问题
这里 remote directory 不要选择 root 目录
该目录需要特殊权限
Publish Over SSH 插件还可以在远程服务器运行指令
这里我在上传文件前进行一个 Step 来删除原有的文件

最后在你的服务器运行 Nodejs 将运行目录设置到该目录下即部署成功
运行 Build Now 来查看是否成功吧
Part 5 触发
我们希望在 Git 进行 Push 或 Merge 到主分支时 Jenkins 能够自动拉取 Git 代码并进行构建部署
这里选择的插件是 Generic Webhook Trigger Plugin
来到项目 Configure - Triggers - Generic Webhook Trigger
设置一个 token 来创建一个形如 http://JENKINS_URL/generic-webhook-trigger/invoke?token=TOKEN 的触发路径
在你的 Git 仓库设置 Web Hook
这是一种监听 Git 行为 然后自动发送请求的工具
以 Gitea 为例

在 Gitea 选择测试钩子 查看 Jenkins 是否构建触发吧
Part 6 结语
软件开发的学习到达 CI/CD 这一块的话,相信大家都已经具备了不错的软件开发能力了。到了这个阶段,相信大家和我一样都是通过官方文档来学习,但官方文档有时候更像是一种手册,一本字典,我们往往需要先拥有操作的思路,然后根据思路查阅官方文档。所以我依然坚持撰写教程,也许教程中的内容会有错误,也许到了下一个版本所需要的操作会大相径庭,但我坚信我提供了一种思路,而拥有这样子操作的思路的话,相信你能更快的解决你所遇到的问题。祝你好运,来访者。
更多推荐


所有评论(0)