Jenkins pipeline流水线方式部署前端包

以freestyle方式部署前后端可以参考：

jenkins+mqtt实现本地构建和远程自动发版_jenkins远程调用和本地调用-CSDN博客

jenkins部署nodejs前端项目_jenkins nodejs-CSDN博客

以流水线方式部署后端参考

Jenkins pipeline流水线方式部署后端jar-CSDN博客

一个简单的前端打包部署的例子

pipeline {
    agent any
    environment {
        // ========== 代码仓库配置 ==========
        GIT_REPO = 'http://gitlab.xxx.com/[部门/项目组]/[前端项目名]'  // 替换为你的Git仓库占位符
        GIT_BRANCH = 'master'                                      // 可根据需求改为dev/test等分支
        GIT_CRED_ID = 'gitlab-credentials-id'                      // Jenkins中配置的Git凭证ID占位符
        
        // ========== 前端打包配置（通用） ==========
        BUILD_DIR = '.'                                            // 前端项目根目录（打包命令执行路径）
        DIST_TAR_NAME = 'dist.tar.gz'                              // 打包后的压缩包名称
        NODEJS_NAME = 'nodejs'                                     // Jenkins全局配置的Node.js名称（需与实际配置一致）
        
        // ========== SSH部署配置 ==========
        SSH_SERVER_ID = 'ssh-server-credentials-id'                // Jenkins中配置的SSH服务器凭证ID占位符
        REMOTE_BASE_DIR = '/data/frontend'                         // 远程服务器前端文件存储根目录（占位符）
        REMOTE_TAR_PATH = "${REMOTE_BASE_DIR}/dist.tar.gz"         // 远程压缩包存储路径
        REMOTE_DEPLOY_DIR = '/data/frontend/nginx/html'            // Nginx前端部署根目录（占位符）
    }
    stages {
        stage('拉取代码') {
            steps {
                echo '开始拉取前端Git代码...'
                git url: "${GIT_REPO}", branch: "${GIT_BRANCH}", credentialsId: "${GIT_CRED_ID}"
            }
        }

        stage('前端环境校验') {
            steps {
                echo '注入Node.js环境并校验版本...'
                // 注入Node.js环境到PATH，解决node/npm命令找不到的问题
                nodejs(nodeJSInstallationName: "${NODEJS_NAME}") {
                    sh """
                        set -e
                        node -v
                        npm -v
                    """
                }
            }
        }

        stage('安装依赖并打包构建') {
            steps {
                echo '开始安装前端依赖并执行打包...'
                nodejs(nodeJSInstallationName: "${NODEJS_NAME}") {
                    sh """
                        set -e  # 执行出错时立即退出
                        cd ${BUILD_DIR}
                        # 安装依赖
                        npm install
                        # 清空旧dist目录（目录不存在时忽略错误）
                        rm -rf ./dist/* || true
                        # 执行dev环境打包（可改为build:test/build:prod）
                        npm run build:dev
                        # 清空旧压缩包
                        rm -rf ${DIST_TAR_NAME} || true
                        # 打包dist目录为tar.gz（保留目录结构）
                        tar czvf ${DIST_TAR_NAME} -C ./dist .
                    """
                }
            }
        }

        stage('验证打包产物') {
            steps {
                echo "检查压缩包是否存在：${BUILD_DIR}/${DIST_TAR_NAME}"
                sh "ls -l ${BUILD_DIR}/${DIST_TAR_NAME} || (echo '前端打包产物不存在，构建失败' && exit 1)"
            }
        }

        stage('SSH部署到远程服务器') {
            steps {
                echo '开始通过SSH部署前端包到远程服务器...'
                sshPublisher(publishers: [
                    sshPublisherDesc(
                        configName: "${SSH_SERVER_ID}",
                        transfers: [
                            sshTransfer(
                                cleanRemote: false,
                                excludes: '',
                                flatten: true,  // 扁平化传输，压缩包直接放到远程指定目录
                                makeEmptyDirs: false,
                                noDefaultExcludes: false,
                                patternSeparator: '[, ]+',
                                remoteDirectory: "${REMOTE_BASE_DIR}",  // 远程文件传输目录
                                remoteDirectorySDF: false,
                                removePrefix: "",
                                sourceFiles: "${BUILD_DIR}/${DIST_TAR_NAME}"  // 本地压缩包路径
                            )
                        ],
                        // 远程执行部署命令（清空目标目录 + 解压包）
                        execCommand: """
                            set -e
                            # 清空前端部署目录（目录不存在时忽略错误）
                            rm -rf ${REMOTE_DEPLOY_DIR}/* || true
                            # 解压压缩包到部署目录
                            tar zxvf ${REMOTE_TAR_PATH} -C ${REMOTE_DEPLOY_DIR}
                            # 验证解压结果
                            echo '部署后目录文件列表：'
                            ls -l ${REMOTE_DEPLOY_DIR}
                        """,
                        execTimeout: 120000,  // 命令执行超时时间（2分钟）
                        usePromotionTimestamp: false,
                        useWorkspaceInPromotion: false,
                        verbose: true  // 开启详细日志，便于调试
                    )
                ])
            }
        }
    }
    post {
        success {
            echo '✅ 前端项目构建、打包及部署成功！'
        }
        failure {
            echo '❌ 前端项目构建、打包或部署失败！'
        }
    }
}