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 这一块的话，相信大家都已经具备了不错的软件开发能力了。到了这个阶段，相信大家和我一样都是通过官方文档来学习，但官方文档有时候更像是一种手册，一本字典，我们往往需要先拥有操作的思路，然后根据思路查阅官方文档。所以我依然坚持撰写教程，也许教程中的内容会有错误，也许到了下一个版本所需要的操作会大相径庭，但我坚信我提供了一种思路，而拥有这样子操作的思路的话，相信你能更快的解决你所遇到的问题。祝你好运，来访者。