前端开发：Jenkins 与 Gitee 集成实现持续集成与部署

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）即可复用。