快捷導航

Jenkins通過Pipeline流水線方式編譯前端項目的操作方法

更新時間：2025年06月24日 08:53:15 作者：神志不清

本文介紹基于Jenkins?LTS鏡像搭建前端CI/CD環(huán)境,通過Dockerfile安裝Node.js/Yarn/zip,結(jié)合插件和聲明式Pipeline實現(xiàn)SIT/PROD一鍵部署,包含部署腳本準備及擴展功能建議,感興趣的朋友一起看看吧

本文記錄了本人在前端項目持續(xù)集成與自動化部署方面的實踐經(jīng)驗，使用 Jenkins 官方 jenkins:lts 鏡像為基礎(chǔ)，構(gòu)建支持 Node.js 構(gòu)建和壓縮能力的運行環(huán)境，并通過聲明式 Pipeline 實現(xiàn)一套多環(huán)境（SIT/PROD）可選的一鍵部署流程。模板可直接參考最下方。

一、Jenkins 鏡像構(gòu)建

為滿足構(gòu)建前端項目的需求，需在 Jenkins 鏡像中安裝 Node.js、Yarn 以及 zip 命令，構(gòu)建用 Dockerfile 如下：

FROM jenkins/jenkins:lts
USER 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
# 設(shè)置國內(nèi) Yarn 源，加速依賴安裝
RUN yarn config set registry https://registry.npmmirror.com
USER jenkins

二、Jenkins 插件安裝推薦

安裝 Jenkins 后，建議安裝以下插件以支持流水線、Node 構(gòu)建和遠程部署功能：

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

三、Jenkins 啟動配置（docker-compose）

使用 docker-compose 啟動 Jenkins，并配置數(shù)據(jù)持久化與宿主機 Docker 訪問能力：

services:
  jenkins:
    image: d0fdd1f559e3  # 自定義鏡像 ID
    container_name: jenkins
    restart: on-failure:3
    user: root
    ports:
      - "18080:8080"
      - "50000:50000"
    environment:
      TZ: Asia/Shanghai
      LANG: zh_CN.UTF-8
      LANGUAGE: zh_CN:zh
      LC_ALL: zh_CN.UTF-8
    volumes:
      - ./data:/var/jenkins_home
      - /usr/bin/docker:/usr/bin/docker
      - /var/run/docker.sock:/var/run/docker.sock
      - /etc/localtime:/etc/localtime:ro

四、前端自動部署 Pipeline

本流水線支持選擇部署環(huán)境（SIT 或 PROD），會自動選擇對應(yīng)分支、構(gòu)建命令與目標服務(wù)器，核心流程包括：

拉取指定分支代碼
安裝依賴
構(gòu)建打包
壓縮構(gòu)建產(chǎn)物
上傳服務(wù)器并執(zhí)行部署腳本

?? 核心代碼片段如下：

parameters {
    choice(name: 'ENVIRONMENT', choices: ['sit', 'prod'], description: '請選擇部署環(huán)境')
}
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'
}

?? 構(gòu)建流程關(guān)鍵步驟：

自動切換分支與目標服務(wù)器：
env.SELECTED_BRANCH = (params.ENVIRONMENT == 'sit') ? SIT_BRANCH : PROD_BRANCH
env.TARGET_SERVER = (params.ENVIRONMENT == 'sit') ? SIT_SERVER : PROD_SERVER
構(gòu)建命令根據(jù)環(huán)境切換：
def buildCmd = (params.ENVIRONMENT == 'sit') ? 'yarn run build:sit' : 'yarn run build:pro'
sh "${buildCmd}"
構(gòu)建結(jié)果壓縮：
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（需提前準備）

建議在目標服務(wù)器 /home/web 目錄中準備 deploy.sh，執(zhí)行以下內(nèi)容（可按需定制）：這里是簡單示例，可以自己修改腳本，添加備份等步驟

#!/bin/bash
unzip -o dist.zip -d ./dist
nginx -s reload   # 若使用 nginx 提供服務(wù)

六、Pipeline流水線匯總參考

pipeline {
    agent any
    parameters {
        choice(name: 'ENVIRONMENT', choices: ['sit', 'prod'], description: '請選擇部署環(huán)境')
    }
    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_BRANCH
                    env.TARGET_SERVER = (params.ENVIRONMENT == 'sit') ? SIT_SERVER : PROD_SERVER
                    echo "當前部署環(huán)境：${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('構(gòu)建前端') {
            steps {
                script {
                    def buildCmd = (params.ENVIRONMENT == 'sit') ? 'yarn run build:sit' : 'yarn run build:pro'
                    echo "執(zhí)行構(gòu)建命令：${buildCmd}"
                    sh "${buildCmd}"
                }
            }
        }
        stage('壓縮 dist 目錄') {
            steps {
                echo "壓縮 dist 目錄為 ${env.ZIP_FILE}"
                sh "cd dist && zip -r ../dist.zip ."
            }
        }
stage('部署到前端服務(wù)器') {
    steps {
        echo "\033[32m****** 上傳并執(zhí)行部署 ******\033[0m"
        sshPublisher(
            publishers: [
                sshPublisherDesc(
                    configName: "${env.TARGET_SERVER}",  
                    transfers: [
                        // 上傳構(gòu)建產(chǎn)物 dist.zip
                        sshTransfer(
                            sourceFiles: "${ZIP_FILE}",  
                            removePrefix: '',
                            remoteDirectory: "${DEPLOY_PATH}",  // 相對 Jenkins SSH Remote Directory
                            cleanRemote: false,
                            execCommand: """
                                cd /home/${DEPLOY_PATH}
                                bash ${DEPLOY_SCRIPT}
                            """
                        )
                    ],
                    verbose: true
                )
            ]
        )
    }
}
        stage('完成') {
            steps {
                echo "? ${params.ENVIRONMENT} 環(huán)境部署完成"
            }
        }
    }
    post {
        success {
            echo "?? 發(fā)布成功：${params.ENVIRONMENT} 環(huán)境"
        }
        failure {
            echo "? 發(fā)布失敗，請檢查日志"
        }
    }
}

后續(xù)可進一步集成：