Jenkins + Docker 搭建前端 CI：前端一键打包部署

前言

• 当我们在多人协作时，手动部署往往会带来不少问题，而 Jenkins 正好可以解决：
  • 环境不统一，容易出现「在我电脑上是好的」
  • 多人协作时部署混乱，甚至因为时间线不一致导致代码缺失
  • 部署动作和开发电脑强绑定，换台机器就得重新配环境
  • 部署效率低，文件一大，上传就特别耗时

准备环境

• 一台安装好 Docker 服务的服务器（也可以用本地的 Windows 子系统或沙盒环境体验），这里以 CentOS 服务器、Docker 26.x 为例演示。
• 整体思路：Jenkins 跑在 Docker 容器里，在容器内完成「拉代码 → 装依赖 → 打包 → 把 dist 复制到与宿主机共享的目录」，宿主机再用 Nginx 等静态服务器对外提供站点。

安装 Jenkins 镜像

docker pull jenkins/jenkins:lts-jdk17

创建 Jenkins 容器

• 这里使用 docker-compose 来创建 Jenkins 容器，也可以使用 docker run 来创建。
• 创建 docker-compose-jenkins.yml 文件。
• 注意：
  • 如果是服务器环境，这里的 8080 端口需要确认你的阿里云安全组是否已开放，否则 http://ip:8080/ 会访问不了。
  • 给映射目录设置写入权限：chown -R 1000:1000 /data/jenkins_home /docker/www（Jenkins 官方镜像以 uid=1000 运行，否则容器内会写不进这些目录）。

# 创建 Jenkins 容器
# 启动命令：docker-compose -f <docker-compose-jenkins.yml 路径> up -d
# 例如：docker-compose -f /docker/config/docker-compose-jenkins.yml up -d

services:
jenkins:
image: jenkins/jenkins:lts–jdk17
container_name: jenkins
restart: always
ports:
– "8080:8080"
– "50000:50000"
volumes:
– /data/jenkins_home:/var/jenkins_home
– /var/run/docker.sock:/var/run/docker.sock
– /docker/www:/app/www

• 端口说明：8080 是 Web 访问端口，50000 是 JNLP 从节点通信端口（本文用不到，先一起映射着）。
• docker.sock 挂载让容器内能调用宿主机 Docker；本文构建走的是 npm run build，暂时用不到，保留它方便后续扩展。

访问 Jenkins

• 访问地址：http://ip:8080/，首次访问需要输入初始密码，获取方式如下：

# 获取 Jenkins 初始密码
docker exec jenkins cat /var/jenkins_home/secrets/initialAdminPassword
# 或者
cat /data/jenkins_home/secrets/initialAdminPassword

• 输入初始密码后，会跳转到 Jenkins 的欢迎页面。

• 安装推荐的插件

• 使用 admin 账户继续

• 保存并完成
• 开始使用 Jenkins

• 在「系统管理 → 插件管理」里搜索安装 NodeJS 插件，装完重启下 Jenkins 容器（docker restart jenkins）
• 用户名和密码就是之前的 admin/上面你的初始密码

• 配置全局工具（路由：/manage/configureTools/），新增一个 NodeJS 安装，别名填 Node24
• 注意：这里的别名 Node24 后面需要在 Jenkinsfile 文件里用到。

新建任务

• 新建一个「流水线」（Pipeline）任务

• 在流水线定义里选择 Pipeline script from SCM，SCM 选 Git，填上仓库地址与分支；这样构建时 Jenkins 会自动读取项目根目录的 Jenkinsfile

项目里面增加 Jenkinsfile

• 这个文件是 Jenkins 任务的配置文件，用于定义任务的执行流程。
• 这个文件需要放到项目的根目录下。
• 这里的 Node24 是之前配置的全局工具别名，配合流水线里的 nodejs('Node24') { … } 步骤，让后续命令在指定 Node 版本下执行。
• 小提示：post 里的 cleanWs() 依赖 Workspace Cleanup 插件，如果构建报 cleanWs 找不到，去插件管理装上即可。

pipeline {
agent any

options {
// 显示各阶段耗时与命令时间戳
timestamps()
// 同一时间只允许一个构建在跑，避免并发写共享目录
disableConcurrentBuilds()
// 整个流水线超时保护
timeout(time: 30, unit: 'MINUTES')
}

environment {
// 部署目标目录（容器内路径），对应宿主机 /docker/www/demo/dist，按需修改
DEPLOY_DIR = '/app/www/demo/dist'
// npm 缓存独立到 workspace，按 Job 隔离
NPM_CACHE = "${WORKSPACE}/npm-cache-${JOB_NAME}"
}

stages {
stage('安装依赖 & 打包') {
steps {
nodejs('Node24') {
sh '''
set -e
npm config set cache "${NPM_CACHE}"
# 使用锁文件进行干净安装，构建结果可复现且更快
npm ci
npm run build
'''
}
}
}

stage('复制 dist 到共享挂载目录') {
steps {
sh '''
set -e
mkdir -p "${DEPLOY_DIR}"
rm -rf "${DEPLOY_DIR}"/*
cp -r dist/* "${DEPLOY_DIR}"/
'''
}
}
}

post {
always {
// 无论成败都清理工作区，避免残留占用磁盘
cleanWs()
}
success {
echo "✅ 打包完成，已同步到共享目录：${env.DEPLOY_DIR}"
}
failure {
echo "❌ 流水线失败，请查看上方日志定位错误"
}
}
}

• 点击立即构建，等待构建完成

对外提供服务

• 上面的流水线只是把构建产物 dist 复制到了宿主机挂载目录 /docker/www/demo/dist，要让用户能访问，还需要一个静态服务器来托管它。
• 以 Nginx 为例，把站点根目录指向该路径即可；Nginx 的安装与配置不在本文范围，这里不展开。

总结

• 以上就是用 Jenkins + Docker 搭建前端 CI、实现一键打包部署的完整流程
• 核心思路：Jenkins 在容器里完成「安装依赖 → 打包 → 复制产物到共享目录」这条流水线，把部署动作和开发电脑彻底解绑
• 以后你只需要 git push，剩下的交给 Jenkins 就行，赶紧试试吧！🚀

扩展

• 可以装一下 Stage View 插件，来可视化流水线的执行流程等等。