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 插件，来可视化流水线的执行流程等等。