前端开发：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 环境

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

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

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

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

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

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

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

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

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

三、创建前端 CI/CD 任务

1. 新建自由风格项目

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

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

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

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

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

4. 配置构建环境

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

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

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

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

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

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

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

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

1. 点击「增加构建后操作步骤」→「Send files or execute commands over SSH」：
   • SSH Server：选择之前配置的「Nginx 服务器」
   • 「Source files」：填写打包后的目录（如 dist/**）
   • 「Remove prefix」：填写 dist（去掉外层目录，只推送里面的文件）
   • 「Remote directory」：填写 Nginx 的前端部署目录（如 /usr/local/nginx/html/frontend）
2. 保存所有配置。

「Exec command」（可选，部署后重启 Nginx）：

# 重启 Nginx（根据实际路径调整）
/usr/local/nginx/sbin/nginx -s reload
# 或刷新权限
chmod -R 755 /usr/local/nginx/html/frontend 

四、测试 CI/CD 流程

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

五、常见问题解决

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

---

总结

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

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