【自动化】前端开发，如何将 Jenkins 与 Gitee 结合实现自动化的持续集成（构建）和持续部署（发布）

一、环境准备

1. 基础环境要求

Jenkins 服务器已安装并运行（推荐 LTS 版本），且能访问外网（拉取 Gitee 代码、下载 npm 依赖）
Jenkins 服务器安装：
- Node.js（匹配你前端项目的版本，推荐 16+/18+）
- Git（用于拉取 Gitee 代码）
Gitee 账号 + 前端代码仓库（已初始化，包含 package.json）
目标部署服务器（如 Nginx 服务器，Jenkins 能通过 SSH 访问）

2. Jenkins 安装必备插件

首先在 Jenkins 「系统管理」→「插件管理」→「可选插件」中安装以下插件：

Gitee 插件（Gitee Plugin）：实现 Jenkins 与 Gitee 的联动（触发构建、拉取代码）
NodeJS 插件（NodeJS Plugin）：在 Jenkins 中管理 Node.js 版本
Publish Over SSH：通过 SSH 将构建后的前端包推送到部署服务器（核心部署插件）
Git 插件（Git Plugin）：基础 Git 拉取代码插件（一般默认已装）

安装完成后重启 Jenkins 生效。

二、Jenkins 基础配置

1. 配置 Node.js 环境

进入 Jenkins 「系统管理」→「全局工具配置」
找到「NodeJS」模块，点击「新增 NodeJS」：
- 取消勾选「自动安装」（如果 Jenkins 服务器已手动装 Node，推荐此方式）
- 填写「名称」（如 NodeJS 18），「NodeJS 安装目录」填写服务器上 Node 的路径（如 /usr/local/node）
- 保存配置。

2. 配置 Gitee 凭证（拉取代码用）

进入 Jenkins 「凭证」→「系统」→「全局凭证」→「添加凭证」：
- 类型选择「用户名和密码」
- 用户名：你的 Gitee 账号
- 密码：Gitee 个人访问令牌（推荐，比密码更安全）→ 生成方式：Gitee 「设置」→「私人令牌」→ 生成（勾选 projects 权限）
- 描述：填写备注（如 Gitee 凭证）
- 保存。

3. 配置 SSH 凭证（部署到目标服务器用）

如果部署到远程 Nginx 服务器，需配置 SSH 凭证：

同上路径添加凭证：
- 类型选择「SSH 用户名和私钥」
- 用户名：目标服务器的登录用户（如 root）
- 私钥：粘贴 Jenkins 服务器的私钥（或直接填写密码，选「密码」方式）
- 保存。

4. 配置 Publish Over SSH（可选，部署用）

进入 Jenkins 「系统管理」→「系统配置」→「Publish over SSH」：

点击「新增 SSH 服务器」：
- Name：自定义（如 Nginx 服务器）
- Hostname：目标服务器 IP
- Username：登录用户名
- 勾选「使用密码认证，或使用不同的密钥」（如果用密码），填写密码
- 点击「测试配置」，显示「Success」则配置成功
保存。

三、创建前端 CI/CD 任务

1. 新建自由风格项目

Jenkins 首页点击「新建任务」：
- 输入任务名称（如 frontend-cicd）
- 选择「自由风格软件项目」→「确定」。

2. 配置源码管理（拉取 Gitee 代码）

勾选「Git」：
- 仓库 URL：填写 Gitee 仓库的 HTTPS 地址（如 https://gitee.com/你的账号/你的仓库.git）
- 凭证：选择第一步配置的「Gitee 凭证」
- 分支：填写要构建的分支（如 */master 或 */dev）
保存临时配置（防止丢失）。

3. 配置构建触发器（Gitee 提交自动触发）

勾选「Gitee 触发构建」：
- 复制「Gitee WebHook 地址」（如 http://Jenkins服务器IP:8080/gitee-project-hook/）
- 勾选「Push 事件」「Merge Request 事件」（根据需求）
配置 Gitee WebHook：
- 打开 Gitee 仓库 →「管理」→「WebHooks」→「添加 WebHook」：
  - URL：粘贴上面复制的 Jenkins WebHook 地址
  - 触发事件：勾选「Push 推送」
  - 密钥：可选（如果 Jenkins 配置了密钥，需填写一致）
  - 点击「添加」，并测试（显示「成功」则生效）。

4. 配置构建环境

勾选「Provide Node & npm bin/ folder to PATH」：
- 选择之前配置的 Node.js 版本（如 NodeJS 18）
保存临时配置。

5. 配置构建步骤（前端打包）

点击「增加构建步骤」→「执行 shell」（Linux 服务器）：

填写前端打包脚本（以 Vue 项目为例）：

bash 复制代码

# 进入项目目录（Jenkins 工作空间）
cd ${WORKSPACE}
# 清除旧依赖
rm -rf node_modules
# 安装依赖（推荐用 npm 或 yarn，根据项目选择）
npm install --registry=https://registry.npmmirror.com  # 用淘宝源加速
# 打包（生产环境）
npm run build:prod
# 检查打包是否成功
if [ ! -d "dist" ]; then
  echo "打包失败，dist 目录不存在！"
  exit 1
fi

如果是 Windows 服务器，选择「执行 Windows 批处理命令」，脚本调整为：

cmd 复制代码

cd %WORKSPACE%
rd /s /q node_modules
npm install --registry=https://registry.npmmirror.com
npm run build:prod

6. 配置部署步骤（推送到 Nginx 服务器）

点击「增加构建后操作步骤」→「Send files or execute commands over SSH」：
- SSH Server：选择之前配置的「Nginx 服务器」
- 「Source files」：填写打包后的目录（如 dist/**）
- 「Remove prefix」：填写 dist（去掉外层目录，只推送里面的文件）
- 「Remote directory」：填写 Nginx 的前端部署目录（如 /usr/local/nginx/html/frontend）
- 「Exec command」（可选，部署后重启 Nginx）：
  bash 复制代码
```
# 重启 Nginx（根据实际路径调整）
/usr/local/nginx/sbin/nginx -s reload
# 或刷新权限
chmod -R 755 /usr/local/nginx/html/frontend
```
保存所有配置。

四、测试 CI/CD 流程

手动触发：Jenkins 任务页面点击「立即构建」，查看「控制台输出」，确认：
- 代码拉取成功
- 依赖安装成功
- 前端打包成功
- 文件推送到 Nginx 服务器成功
自动触发：修改本地前端代码，提交并推送到 Gitee 对应分支，观察 Jenkins 是否自动触发构建，最终验证 Nginx 服务器上的前端文件已更新。

五、常见问题解决

npm install 失败：检查 Jenkins 服务器的 Node 版本是否匹配项目，或切换淘宝源（如上脚本）。
WebHook 触发失败 ：
- 检查 Jenkins 服务器是否能被外网访问（Gitee 需能回调）
- 检查 Jenkins 地址是否正确，端口是否开放
- 检查 Gitee WebHook 的「最近推送记录」，查看错误原因
部署后页面404：检查 Nginx 配置是否正确（前端路由模式为 history 时，需配置 try_files）。
权限问题 ：Jenkins 运行用户（如 jenkins）需有访问 Nginx 部署目录的权限，或部署脚本中添加 chmod 命令。

总结

核心配置：Jenkins 需安装 Gitee、NodeJS、Publish Over SSH 插件，配置 Gitee 凭证（拉代码）和 SSH 凭证（部署）。
核心流程：Gitee 代码提交 → WebHook 触发 Jenkins 构建 → Jenkins 拉取代码 → 安装依赖 → 前端打包 → 推送打包文件到 Nginx 服务器 → 重启 Nginx。
关键注意点：确保 Node 版本匹配项目、Jenkins 能访问 Gitee/目标服务器、Nginx 部署目录权限正确。

这套流程适配绝大多数前端项目（Vue/React/Angular），只需调整打包脚本（如 npm run build）即可复用。