图解 Jenkins Pipeline 的前端自动化部署，用上后真香！

你好，我是悟空。

[toc]

一、前言

Jenkins是一个开源的自动化服务器，它可以帮助自动化各种任务，包括构建、测试和部署软件。

上次我们讲解了如何通过 Jenkins 的自由风格的软件项目来配置前端的自动化部署，如下图所示，如何选择自由风格的软件项目。优点就是简单！

这次我们将讲解如何通过流水线（Pipeline）方式来部署前端项目。优点就是更加灵活！如下图所示，就是选择 Pipeline 方式。

在Jenkins中，有两种主要类型的任务：Pipeline任务和自由风格项目（Freestyle project）。

1. Pipeline任务：
   • Pipeline任务是Jenkins 2.0引入的一个新特性，它使用Jenkinsfile来定义整个构建流程。
   • Jenkinsfile是一个文本文件，使用Groovy语言的DSL（领域特定语言），可以定义构建的各个阶段和步骤。
   • Pipeline任务支持复杂的构建流程，包括多个阶段和步骤，以及并行执行等高级功能。
   • Pipeline任务可以很容易地与源代码管理系统集成，支持持续集成（CI）和持续交付（CD）。
2. 自由风格项目：
   • 自由风格项目是Jenkins早期版本中的主要任务类型，允许用户通过Jenkins的Web界面配置构建步骤。
   • 这种类型的项目没有固定的构建流程定义方式，用户可以手动添加构建步骤、配置插件和参数等。
   • 自由风格项目适合快速设置简单的构建任务，但对于复杂的构建流程，可能不如Pipeline任务灵活和强大。

两者的主要区别包括：

• 定义方式：Pipeline任务通过Jenkinsfile定义，而自由风格项目通过Jenkins的Web界面配置。
• 灵活性和扩展性：Pipeline任务更加灵活，支持复杂的构建流程和高级功能，如并行执行和模板化。
• 集成度：Pipeline任务更容易与源代码管理系统集成，实现自动化的CI/CD流程。
• 学习和使用难度：Pipeline任务可能需要用户学习Jenkinsfile的语法和DSL，而自由风格项目则更直观，易于上手。

提示：Pipeline 任务代表了Jenkins的未来方向，提供了更高级的自动化构建能力，而自由风格项目则适合快速设置简单的构建任务。随着Jenkins的发展，越来越多的用户和组织倾向于使用Pipeline任务来实现更高效的自动化流程。

二、Jenkins 前端部署思路

2.1 整体架构图

2.2 部署步骤

三、Pipeline 核心脚本

3.1 获取 Git 代码分支

3.1.1 Git 分支插件

用了一个插件 gitParameter，可以获取 git 仓库的分支，部署的时候，可以选择分支。如下图所示，Git 仓库有 develop 和 master 分支，默认选中 develop 分支。

parameters {  
      gitParameter(name: 'GIT_BRANCH', 
          type: 'PT_BRANCH',
          branchFilter: 'origin/(.*)',
          defaultValue: 'master',
          sortMode: 'DESCENDING_SMART',
          description: '请选择部署分支')
  }

3.1.2 Git 环境变量

// 定义 GitLab 仓库的 URL 和 分支
environment {  
        GIT_URL = 'https://passjava/xxx.git'
        CREDENTIALS_ID = '123465-a867-491f-8b85'
} 

3.1.3 获取 Git 分支代码

stages {  
    stage('获取最新代码') {  
        steps {
            git credentialsId: "${CREDENTIALS_ID}", branch: "${params.GIT_BRANCH}", url: "${GIT_URL}"
            script {  
                // 使用 params 对象获取参数值  
                def branchName = params.GIT_BRANCH  
                echo "Building branch: ${branchName}"  

                echo "Building ssh url: ${SSH_URL}"  

                // 使用 git 插件检出仓库的特定分支  
                checkout([  
                    $class: 'GitSCM',  
                    branches: [[name: "${branchName}"]],  
                    doGenerateSubmoduleConfigurations: false,  
                    extensions: [],  
                    submoduleCfg: [],  
                    userRemoteConfigs: [[  
                        credentialsId: "${CREDENTIALS_ID}", // 在 Jenkins 凭据中定义的 GitLab 凭据 ID  
                        url: "${GIT_URL}"  
                    ]]  
                ])  
            }
        }  
    }
}

这个步骤中有一一行关键的代码，可以通过 Git 插件获取选择的 Git 分支。

git credentialsId: "${CREDENTIALS_ID}", branch: "${params.GIT_BRANCH}", url: "${GIT_URL}"

配置好后，运行第一次是不会加载这个插件的，运行第二次后会提示 SCM 没有配置，运行第三次就会显示 gitlab 上的分支。

3.2 拷贝依赖包

因为 node_modules 不会上传到 git 仓库，所以我们需要提前准备好。

而我们项目我是先在有网的 Linux 服务器上用 npm install 命令下载的依赖包，然后手动压缩拷贝到 jenkins 服务器的 passjava 目录。

当执行部署的时候，会从 passjava 目录将 node_modules 压缩包拷贝并解压到 jenkins 的当前工作目录。

stage('拷贝依赖') {  
    steps {
        script {  
            echo "--------------- 步骤：开始拷贝依赖 --------------- "
            sh 'cp -f /home/passjava/node_modules.tar.gz node_modules.tar.gz'
            sh 'tar -xf node_modules.tar.gz'
            echo "--------------- 步骤：拷贝依赖完成 --------------- "
        }
    }  
}

3.3 编译代码

编译前端代码可以用 npm run build xx 命令，然后将编译后的 dist 目录压缩。

 stage('编译代码') {  
    steps {  

        script {  
            echo "--------------- 步骤：开始编译代码 --------------- "
            echo "--------------- 开始编译前端项目 ---------------"
            sh "npm run build passjava-base"
            sh "npm run build passjava-channel"
            echo "完成编译前端项目"
            echo "开始压缩前端文件 dist"
            sh "tar -czf dist.tar.gz dist"
            echo "--------------- 步骤：编译代码完成 --------------- "
        }
    }  
} 

3.4 备份代码

将 web 服务器上多个前端项目移动到备份目录 web-bak 。

stage('备份代码') {  
    steps {  
        script {  
            echo "--------------- 步骤：开始备份代码 --------------- "
            def timestamp = new Date().format("yyyyMMddHHmmss")
            echo "本机当前时间为: ${timestamp}"
            sshPublisher(
                failOnError: true,
                publishers: [
                sshPublisherDesc(
                    configName: "${SSH_URL}",
                    verbose: true,
                    transfers: [
                        sshTransfer(
                            execCommand: "mkdir -p /nfs-data/passjava/web-bak && cd /nfs-data/passjava/web-bak && mkdir -p ${timestamp} && cd /nfs-data/passjava/passjava-web-micro && mv -f project-contract ../web-bak/${timestamp}/project-contract && mv -f passjavabase ../web-bak/${timestamp}/passjavabase && mv -f passjava-channel ../web-bak/${timestamp}/passjava-channel",
                            execTimeout: 120000
                        )
                    ]
                )
            ])
            echo "--------------- 步骤：备份代码完成 --------------- "
        }
    }  
}

3.5 上传代码

将编译后的代码包上传到 web 服务器。

stage('上传代码') {  
    steps {  
        script {  
            echo "--------------- 步骤：开始上传代码 --------------- "
            echo "开始上传 dist 压缩包"
            sshPublisher(
                failOnError: true,
                publishers: [
                    sshPublisherDesc(
                        configName: "${SSH_URL}",
                        verbose: true,
                        transfers: [
                            sshTransfer(
                                execCommand: '', 
                                execTimeout: 120000, 
                                flatten: false, 
                                makeEmptyDirs: false, 
                                noDefaultExcludes: false, 
                                patternSeparator: '[, ]+', 
                                remoteDirectory: 'passjava-web-micro/', 
                                remoteDirectorySDF: false, 
                                removePrefix: '', 
                                sourceFiles: 'dist.tar.gz'
                            )
                        ]
                    )
                ]
            )
            echo "完成上传 JAR 包"
            echo "--------------- 步骤：上传代码完成 --------------- "
        }
    }  
}

3.6 更新代码

将 dist 压缩包解压，然后将多个前端工程拷贝到 web 目录。如 passjavabase, passjava-channel, project-contract 目录拷贝到 passjava-web-micro 目录。

stage('更新代码') {  
    steps {  
        script {  
            echo "--------------- 步骤：开始更新代码 --------------- "
            sshPublisher(
                failOnError: true,
                publishers: [
                sshPublisherDesc(
                    configName: "${SSH_URL}",
                    verbose: true,
                    transfers: [
                        sshTransfer(
                            execCommand: "cd /nfs-data/passjava/passjava-web-micro && tar -xzf dist.tar.gz && cp -r ./dist/passjavabase passjavabase && cp -r ./dist/passjava-channel passjava-channel && cp -r ./dist/project-contract project-contract",
                            execTimeout: 120000
                        )
                    ]
                )
            ])
            echo "--------------- 步骤：更新代码完成 --------------- "
        }
    }  
}

3.7 清理代码

清理 web 服务器上备份的代码。

以下命令是查找并删除指定路径下超过7天未修改的目录。

find /nfs-data/passjava/web-bak/ -mindepth 1 -maxdepth 1 -type d -mtime +7 -print -exec rm -rf {} +

这条命令会找到 /nfs-data/passjava/web-bak/ 目录下所有超过7天未修改的子目录，并将其打印出来，然后删除这些目录。

1. 查找超过7天未修改的目录：
   • -mindepth 1：确保查找从指定目录的子目录开始，不包括指定的根目录。
   • -maxdepth 1：限制查找仅在指定目录的第一层子目录中进行。
   • -type d：只考虑目录，不包括文件。“-type -f” 只考虑文件，不包括目录。
   • -mtime +7：筛选出修改时间超过7天的目录。-mmin 可以指定小时。
   • -print：打印出这些目录的路径。
2. 删除找到的目录：
   • -exec rm -rf {} +：对找到的每个目录执行 rm -rf 命令，递归且强制删除该目录及其内容。

该步骤的完整代码如下：

stage('清理代码') {  
    steps {  
        script {  
            echo "--------------- 步骤：开始清理备份代码 --------------- "
            echo "开始清理过期 7 天的备份代码"
            sshPublisher(
                failOnError: true,
                publishers: [
                sshPublisherDesc(
                    configName: "${SSH_URL}",
                    verbose: true,
                    transfers: [
                        sshTransfer(
                            execCommand: "find /nfs-data/passjava/web-bak/ -mindepth 1 -maxdepth 1 -type d -mtime +7 -print -exec rm -rf {} +",
                            execTimeout: 120000
                        )
                    ]
                )
            ])
            echo "完成上传 JAR 包"
            echo "--------------- 步骤：清理备份代码完成 --------------- "
        }
    }  
}

3.8 邮件通知

详见笔者之前写的一篇：持续集成：Jenkins Pipeline 邮件通知

四、总结

通过使用 Jenkins Pipeline 进行前端自动化部署，团队可以更加高效地管理和部署前端应用程序，减少人为错误和手动操作带来的风险，提升整体的开发和部署效率。

本文通过图解+代码的方式讲解了前端自动化部署的步骤，文中的脚本针对前端的三个模块进行打包，比较耗时，所以后续可以优化的地方是支持选择部署前端的不同模块。

Jenkins 文章汇总如下：

• 1、持续集成：丝滑的 Docker 打包部署，一套带走
• 2、持续集成：喝杯咖啡，一键部署后端完成！（建议收藏）
• 3、持续集成：喝杯咖啡，一键部署前端项目
• 4、持续集成：用代码实现流水线部署后端项目，像诗一般优雅
• 5、持续集成：如果你还不理解 RBAC，看看 Jenkins 如何做到的
• 6、持续集成：离线部署 Jenkins 填坑指南
• 7、持续集成：Jenkins Pipeline 邮件通知
• 8、持续集成：如何找到“BB”之人？（Break Build)