本文记录了本人在前端项目持续集成与自动化部署方面的实践经验，使用 Jenkins 官方 jenkins:lts 镜像为基础，构建支持 Node.js 构建和压缩能力的运行环境，并通过声明式 Pipeline 实现一套多环境（SIT/PROD）可选的一键部署流程。模板可直接参考最下方

一、Jenkins 镜像构建

为满足构建前端项目的需求，需在 Jenkins 镜像中安装 Node.js、Yarn 以及 zip 命令，构建用 Dockerfile 如下：

FROM jenkins/jenkins:ltsUSER root# 安装 Node.js 和 Yarn
RUN curl -fsSL https://deb.nodesource.com/setup_22.x | bash - && \apt-get install -y nodejs zip && \npm install -g yarn# 设置国内 Yarn 源，加速依赖安装
RUN yarn config set registry https://registry.npmmirror.comUSER jenkins

二、Jenkins 插件安装推荐

安装 Jenkins 后，建议安装以下插件以支持流水线、Node 构建和远程部署功能：

Git Plugin
NodeJS Plugin
Yarn Plugin
Publish Over SSH
Build Name Setter
Pipeline
Blue Ocean

三、Jenkins 启动配置（docker-compose）

使用 docker-compose 启动 Jenkins，并配置数据持久化与宿主机 Docker 访问能力：

services:jenkins:image: d0fdd1f559e3  # 自定义镜像 IDcontainer_name: jenkinsrestart: on-failure:3user: rootports:- "18080:8080"- "50000:50000"environment:TZ: Asia/ShanghaiLANG: zh_CN.UTF-8LANGUAGE: zh_CN:zhLC_ALL: zh_CN.UTF-8volumes:- ./data:/var/jenkins_home- /usr/bin/docker:/usr/bin/docker- /var/run/docker.sock:/var/run/docker.sock- /etc/localtime:/etc/localtime:ro

四、前端自动部署 Pipeline

本流水线支持选择部署环境（SIT 或 PROD），会自动选择对应分支、构建命令与目标服务器，核心流程包括：

拉取指定分支代码
安装依赖
构建打包
压缩构建产物
上传服务器并执行部署脚本

🎯 核心代码片段如下：

parameters {choice(name: 'ENVIRONMENT', choices: ['sit', 'prod'], description: '请选择部署环境')
}environment {GIT_URL = 'http://192.168.1.100/xxx.git'GIT_CREDENTIAL_ID = '6c626e79-xxxx'SIT_BRANCH = 'sit'PROD_BRANCH = 'master'SIT_SERVER = '192.168.1.50'PROD_SERVER = '192.168.1.151'DEPLOY_PATH = '/home/web'DEPLOY_SCRIPT = 'deploy.sh'BUILD_DIR = 'dist'ZIP_FILE = 'dist.zip'
}

⚙️ 构建流程关键步骤：

自动切换分支与目标服务器：
env.SELECTED_BRANCH = (params.ENVIRONMENT == 'sit') ? SIT_BRANCH : PROD_BRANCH
env.TARGET_SERVER = (params.ENVIRONMENT == 'sit') ? SIT_SERVER : PROD_SERVER
构建命令根据环境切换：
def buildCmd = (params.ENVIRONMENT == 'sit') ? 'yarn run build:sit' : 'yarn run build:pro'
sh "${buildCmd}"
构建结果压缩：
cd dist && zip -r ../dist.zip .
上传并部署：
sshPublisher(configName: "${env.TARGET_SERVER}",transfers: [sshTransfer(sourceFiles: "${ZIP_FILE}",remoteDirectory: "${DEPLOY_PATH}",execCommand: """cd /home/${DEPLOY_PATH}bash ${DEPLOY_SCRIPT}""")]
)

五、部署脚本 deploy.sh（需提前准备）

建议在目标服务器 /home/web 目录中准备 deploy.sh，执行以下内容（可按需定制）：这里是简单示例，可以自己修改脚本，添加备份等步骤

#!/bin/bash
unzip -o dist.zip -d ./dist
nginx -s reload   # 若使用 nginx 提供服务

六、Pipeline流水线汇总参考

pipeline {agent anyparameters {choice(name: 'ENVIRONMENT', choices: ['sit', 'prod'], description: '请选择部署环境')}environment {GIT_URL = 'http://192.168.1.10/xxx.git'GIT_CREDENTIAL_ID = '6c626e79-856c-403e-a07b-96b8a40'SIT_BRANCH = 'develop'PROD_BRANCH = 'master'SIT_SERVER = '192.168.1.150'PROD_SERVER = '192.168.1.50'DEPLOY_PATH = 'home/web'DEPLOY_SCRIPT = 'deploy.sh'BUILD_DIR = 'dist'ZIP_FILE = 'dist.zip'  // 压缩文件的名称}stages {stage('拉取代码') {steps {script {env.SELECTED_BRANCH = (params.ENVIRONMENT == 'sit') ? SIT_BRANCH : PROD_BRANCHenv.TARGET_SERVER = (params.ENVIRONMENT == 'sit') ? SIT_SERVER : PROD_SERVERecho "当前部署环境：${params.ENVIRONMENT}, 使用分支：${env.SELECTED_BRANCH}, 目标主机：${env.TARGET_SERVER}"checkout([$class: 'GitSCM',branches: [[name: "*/${env.SELECTED_BRANCH}"]],userRemoteConfigs: [[url: "${env.GIT_URL}",credentialsId: "${env.GIT_CREDENTIAL_ID}"]]])}}}stage('安装依赖') {steps {sh 'yarn install'}}stage('构建前端') {steps {script {def buildCmd = (params.ENVIRONMENT == 'sit') ? 'yarn run build:sit' : 'yarn run build:pro'echo "执行构建命令：${buildCmd}"sh "${buildCmd}"}}}stage('压缩 dist 目录') {steps {echo "压缩 dist 目录为 ${env.ZIP_FILE}"sh "cd dist && zip -r ../dist.zip ."}}stage('部署到前端服务器') {steps {echo "\033[32m****** 上传并执行部署 ******\033[0m"sshPublisher(publishers: [sshPublisherDesc(configName: "${env.TARGET_SERVER}",  transfers: [// 上传构建产物 dist.zipsshTransfer(sourceFiles: "${ZIP_FILE}",  removePrefix: '',remoteDirectory: "${DEPLOY_PATH}",  // 相对 Jenkins SSH Remote DirectorycleanRemote: false,execCommand: """cd /home/${DEPLOY_PATH}bash ${DEPLOY_SCRIPT}""")],verbose: true)])}
}stage('完成') {steps {echo "✅ ${params.ENVIRONMENT} 环境部署完成"}}}post {success {echo "🎉 发布成功：${params.ENVIRONMENT} 环境"}failure {echo "❌ 发布失败，请检查日志"}}
}

后续可进一步集成：