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

目录

• 一、Jenkins 镜像构建
• 二、Jenkins 插件安装推荐
• 三、Jenkins 启动配置（docker-compose）
• 四、前端自动部署 Pipeline
• 🎯 核心代码片段如下：
• ⚙️ 构建流程关键步骤：
• 五、部署脚本 deploy.sh（需提前准备）
• 六、Pipeline流水线汇总参考

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

为满足构建前端项目的需求，需在 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 后，建议安装以下插件以支持流水线、Node 构建和远程部署功能：

• Git Plugin

• NodeJS Plugin

• Yarn Plugin

• Publish Over SSH

• Build Name Setter

• Pipeline

• Blue Ocean

使用 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

本流水线支持选择部署环境（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}
            """
        )
    ]
)

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

#!/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 "33[32m****** 上传并执行部署 ******33[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 "❌ 发布失败，请检查日志"
        }
    }
}

后续可进一步集成：

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

• 构建缓存机制

• 部署灰度策略等

到此这篇关于Jenkins通过Pipeline流水线方式编译前端项目的文章就介绍到这了,更多相关Jenkins Pipeline流水线内容请搜索风君子博客以前的文章或继续浏览下面的相关文章希望大家以后多多支持风君子博客！

您可能感兴趣的文章:

• Jenkins Pipeline中Docker镜像构建与推送的常见问题及解决方案
• jenkins如何通过pipeline部署springboot项目
• Jenkins迁移之pipeline共享库的实践示例
• jenkins插件Pipeline脚本jenkinsfile操作指南
• 构建及部署jenkins pipeline实现持续集成持续交付脚本
• jenkins 构建项目之 pipeline基础教程
• Jenkins Pipeline 部署 SpringBoot 应用的教程详解
• 使用Jenkins Pipeline自动化构建发布Java项目的方法