CI/CD 流程初体验：Jenkins 与 GitLab 集成
从手动部署到自动化 CI/CD
手动部署的回顾
在前面的课程中，我们通过 Husky + pre-commit 钩子实现了一个简单的自动化部署方案：本地执行构建脚本，将 dist 目录中的静态资源通过 SCP 上传到远程 Nginx 容器对应的目录。
这种方式的核心流程：
本地构建 → dist 产物 → SCP 上传 → 远程 Nginx 服务目录
text
CI/CD 在做什么
持续集成（CI/CD）本质上是将上述手动脚本自动化，并在此基础上增加了更多能力：
| 阶段 | 手动方案 | CI/CD 方案 |
|---|---|---|
| 代码获取 | 本地已有 | 自动从 Git 仓库拉取 |
| 构建 | 本地执行 npm run build | CI 平台自动执行 |
| 产物管理 | 无 | 制品管理平台/存储 |
| 部署 | 手动 SCP 上传 | 自动 SSH/Docker 部署 |
| 触发方式 | 手动/git hook | Webhook 自动触发 |
完整的 CI/CD 流程可以精简为最小闭环：
源码管理(GitLab) → 持续集成(Jenkins) → 发布部署
text
部署方案选择
CI/CD 部署主要有两种方案：
方案一：SSH 直传静态资源
适用于前端静态项目。将 dist 目录通过 SSH 协议上传到远程 Web 服务器（如 Nginx）。
Jenkins 构建 → dist 目录 → SSH 上传 → Nginx 目录
text
方案二：Docker 镜像部署
适用于任何类型项目。通过 Docker 构建镜像，推送到镜像仓库，远程服务器拉取运行。
Jenkins 构建 → Docker build → 镜像仓库 → 远程 docker run
text
Jenkins 创建 CI/CD 任务
创建自由风格项目
- 进入 Jenkins Dashboard，点击 New Item
- 输入任务名称（如
frontend） - 选择 Freestyle Project（构建一个自由风格的软件项目）
任务配置五大模块
Jenkins 自由风格项目包含以下核心配置区域：
| 模块 | 作用 | 说明 |
|---|---|---|
| 源码管理 | 从 Git 平台拉取代码 | 配置仓库地址和凭证 |
| 构建触发器 | 自动触发条件 | Webhook、定时任务等 |
| 构建环境 | 提供运行环境 | Node.js、密钥配置等 |
| Build Steps | 构建步骤 | npm install、npm build 等 |
| 构建后操作 | 后续动作 | 上传制品、通知、清理 |
源码管理：GitLab SSH 凭证配置
生成 SSH 部署密钥
在 Jenkins 服务器上生成专用的部署密钥：
# 生成部署密钥
ssh-keygen -t rsa -b 4096 -C "your-email@example.com"
# 指定保存路径（示例）
# /root/.ssh/deploy_key
# 查看生成的密钥对
ls ~/.ssh/
# deploy_key (私钥)
# deploy_key.pub (公钥)
bash
部署密钥（Deploy Key）不需要设置密码短语（passphrase），因为 Jenkins 需要无交互式访问。
Jenkins 添加 SSH 凭证
- 在任务配置的 源码管理 中选择 Git
- 填入 GitLab 仓库的 SSH 地址（如
git@192.168.31.100:group/frontend-vue.git） - 点击 Credentials 旁边的 Add → Jenkins
- 选择 SSH Username with private key
- 将私钥内容粘贴到 Private Key → Enter directly 中
- 设置 ID（如
deploy_key），点击 Add
GitLab 配置部署密钥
全局部署密钥：
- 进入 GitLab 管理中心（Admin Area）
- 左侧菜单选择 部署密钥（Deploy Keys）
- 点击 新建部署密钥
- 标题填写（如
deploy_key），粘贴公钥内容 - 点击 Create
项目启用部署密钥：
- 进入目标项目 → Settings → Repository
- 展开 Deploy Keys
- 找到刚创建的公钥，点击 启用（Enable）
验证连通性
在 Jenkins 任务配置中填入仓库地址后：
- 正常连接：地址下方无红色错误提示
- 密钥错误：显示
Permission denied (publickey) - 端口不通：显示
Connection refused（检查 SSH 端口是否开放）
常见排查清单：
# 检查 GitLab SSH 端口是否可达
telnet 192.168.31.100 10083
# 检查防火墙规则
firewall-cmd --list-ports
# 在 Jenkins 容器内测试 SSH 连接
docker exec -it jenkins-blueocean ssh -T git@192.168.31.100 -p 10083
bash
构建触发器：Webhook 自动构建
安装 GitLab 插件
在 Jenkins 中安装 GitLab Plugin：
Manage Jenkins → Plugins → Available plugins → 搜索 "GitLab" → 安装
text
Jenkins 任务中启用触发器
- 在任务配置中找到 构建触发器
- 勾选 Build when a change is pushed to GitLab
- 记下生成的 Webhook URL，格式如：
http://your-jenkins:8080/project/frontend
text
- 点击 Advanced → Generate 生成 Secret Token
GitLab 配置 Webhook
- 进入 GitLab 项目 → Settings → Webhooks
- 填写配置：
| 字段 | 值 |
|---|---|
| URL | Jenkins 生成的 Webhook 地址 |
| Secret token | Jenkins 中生成的 Secret Token |
| Trigger | Push events（推送事件） |
| SSL verification | 取消勾选（如无 SSL） |
- 点击 Add webhook
常见问题：URL is blocked
如果出现 URL is blocked. Requests to the local network are not allowed 错误：
- 进入 GitLab 管理中心 → Settings → Network
- 找到 Outbound requests
- 勾选 Allow requests to the local network from web hooks and services
- 保存更改
测试 Webhook
- 在 GitLab 的 Webhook 管理页面点击 Test → Push events
- 查看返回状态码（200 表示成功）
- 在 Jenkins 左侧菜单查看是否收到构建请求
如果是空仓库，测试可能返回 500 错误。推送代码后再测试即可正常。
分支过滤配置
GitLab 默认分支可能是 main，而 Jenkins 默认跟踪 master。需要在任务配置中修改：
源码管理 → Branches to build → Branch Specifier: */main
text
完整集成流程图
┌─────────────┐ Webhook ┌──────────────┐
│ GitLab │ ───────────────→ │ Jenkins │
│ 代码仓库 │ Push/MR 事件 │ CI 服务器 │
└─────────────┘ └───────┬──────┘
│
┌─────▼─────┐
│ 拉取源码 │
│ npm install │
│ npm build │
└─────┬─────┘
│
┌───────────┴───────────┐
│ │
┌─────▼─────┐ ┌─────▼─────┐
│ 方案一 │ │ 方案二 │
│ SSH 上传 │ │ Docker │
│ dist 目录 │ │ 镜像部署 │
└─────┬─────┘ └─────┬─────┘
│ │
┌─────▼─────┐ ┌─────▼─────┐
│ Nginx │ │ 镜像仓库 │
│ Web 服务 │ │ Docker Hub │
└───────────┘ └───────────┘
text
下一步
完成 Jenkins 与 GitLab 的集成后，后续任务是在 Jenkins 中配置具体的构建和部署步骤：
- 配置 Node.js 构建环境
- 选择部署方案（SSH 或 Docker）
- 完善构建流程和错误处理
↑