Jenkins配置前端项目自动部署

type

status

date

slug

summary

Jenkins + Gitee 配置前端项目自动部署实战指南

在现代前端开发流程中，实现持续集成与自动部署已成为提升效率的关键一环。本文将介绍如何使用 Jenkins 搭配 Gitee，实现一个前端项目从提交代码到自动部署上线的完整流程。

一、项目结构与目标

我们以一个 Vue / React 项目为例，部署目标是：

开发者将代码 push 到 Gitee 仓库

Jenkins 自动拉取代码并构建

构建产物自动部署到服务器（如 Nginx 的 /var/www/html）

二、环境准备

✅ 前置条件

一台已安装 Jenkins 的服务器（推荐 Ubuntu 20+）

Gitee 账号与项目仓库

前端构建环境（如 Node.js）

SSH 权限访问部署服务器（可选）

✅ 安装插件

在 Jenkins 管理后台 -> 插件管理，安装：

Git Plugin

Gitee Plugin（第三方）

NodeJS Plugin（构建前端）

三、配置流程详解

1. 在 Gitee 上创建 Webhook

进入你的 Gitee 仓库：

选择「管理」>「WebHooks」

新建 WebHook

请求地址：http://你的Jenkins地址/gitee-webhook/post
触发事件：Push事件

2. Jenkins 创建新任务

新建任务（选择自由风格项目）

在「源码管理」配置 Gitee 仓库

构建触发器选择 GitHub hook trigger for GITScm polling

3. 配置构建环境

在构建环境中勾选：

Provide Node & npm bin/folder to PATH

配置 node 版本（需在 Jenkins 全局工具配置添加）

4. 编写构建脚本

或者部署到本地路径（Nginx 托管）:

5. 保存并构建

首次手动点击「构建」测试，如果构建成功，说明自动部署基本完成。

之后，每当你 push 代码到 Gitee，Jenkins 会自动拉取并构建部署。

四、优化建议

✅ 构建前清理缓存

✅ 添加构建状态通知

可以通过插件集成飞书、钉钉等通知构建结果。

✅ 多环境部署支持

通过配置 环境变量 控制部署路径（如 dev / prod）

五、常见问题

问题	原因	解决方式
无法触发构建	Gitee WebHook 配置错误	确保 Jenkins 地址可公网访问
构建失败	Node 版本不匹配	在 Jenkins 全局配置 Node 工具
scp 权限问题	SSH 密钥未配置	配置 Jenkins 的构建节点 SSH key