Jenkins通过Pipeline流水线方式编译前端项目的操作方法

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
# 设置国内 Yarn 源，加速依赖安装
RUN yarn config set registry https://registry.npmmirror.com
USER jenkins

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

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}
            """
        )
    ]
)

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

pipeline {
    agent any
    parameters {
        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_BRANCH
                    env.TARGET_SERVER = (params.ENVIRONMENT == 'sit') ? SIT_SERVER : PROD_SERVER
                    echo "当前部署环境：${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.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} 环境部署完成"
            }
        }
    }
    post {
        success {
            echo "🎉 发布成功：${params.ENVIRONMENT} 环境"
        }
        failure {
            echo "❌ 发布失败，请检查日志"
        }
    }
}