Jenkins通过Pipeline流水线方式编译前端项目

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

一、Jenkins 镜像构建

为满足构建前端项目的需求，需在 Jenkins 镜像中安装 Node.js、Yarn 以及 zip 命令，构建用 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

# 设置国内 Yarn 源，加速依赖安装
RUN yarn config set registry https://registry.npmmirror.com

USER 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  # 自定义镜像 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

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

1. 拉取指定分支代码

2. 安装依赖

3. 构建打包

4. 压缩构建产物

5. 上传服务器并执行部署脚本

🎯 核心代码片段如下：

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 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 "❌ 发布失败，请检查日志"
        }
    }
}

后续可进一步集成：

• 自动通知（钉钉、企业微信）

• 构建缓存机制

• 部署灰度策略等