本文記錄了本人在前端項目持續集成與自動化部署方面的實踐經驗，使用 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 "? 發布失敗，請檢查日志"}}
}
后續可進一步集成：
-
自動通知（釘釘、企業微信）
-
構建緩存機制
-
部署灰度策略等
)
)
