图解 Jenkins Pipeline 的前端自动化部署，用上后真香！
共 3957字，需浏览 8分钟
·
2024-06-29 08:00
你好，我是悟空。
本文目录如下：
一、Jenkins 前端部署思路
1.1 整体架构图
1.2 部署步骤
二、Pipeline和自由风格对比
三、Pipeline 核心脚本
3.1 获取 Git 代码分支
3.2 拷贝依赖包
3.3 编译代码
3.4 备份代码
3.5 上传代码
3.6 更新代码
3.7 清理代码
3.8 邮件通知
四、总结
二、Jenkins 前端部署思路
1.1 整体架构图
1.2 部署步骤
二、Pipeline和自由风格对比
Jenkins是一个开源的自动化服务器，它可以帮助自动化各种任务，包括构建、测试和部署软件。
上次我们讲解了如何通过 Jenkins 的自由风格的软件项目来配置前端的自动化部署，如下图所示，如何选择自由风格的软件项目。优点就是简单！
这次我们将讲解如何通过流水线（Pipeline）方式来部署前端项目。优点就是更加灵活！如下图所示，就是选择 Pipeline 方式。
在Jenkins中，有两种主要类型的任务：Pipeline任务和自由风格项目（Freestyle project）。
Pipeline任务：
Pipeline任务是Jenkins 2.0引入的一个新特性，它使用Jenkinsfile来定义整个构建流程。
Jenkinsfile是一个文本文件，使用Groovy语言的DSL（领域特定语言），可以定义构建的各个阶段和步骤。
Pipeline任务支持复杂的构建流程，包括多个阶段和步骤，以及并行执行等高级功能。
Pipeline任务可以很容易地与源代码管理系统集成，支持持续集成（CI）和持续交付（CD）。
自由风格项目：
自由风格项目是Jenkins早期版本中的主要任务类型，允许用户通过Jenkins的Web界面配置构建步骤。
这种类型的项目没有固定的构建流程定义方式，用户可以手动添加构建步骤、配置插件和参数等。
自由风格项目适合快速设置简单的构建任务，但对于复杂的构建流程，可能不如Pipeline任务灵活和强大。
两者的主要区别包括：
定义方式：Pipeline任务通过Jenkinsfile定义，而自由风格项目通过Jenkins的Web界面配置。
灵活性和扩展性：Pipeline任务更加灵活，支持复杂的构建流程和高级功能，如并行执行和模板化。
集成度：Pipeline任务更容易与源代码管理系统集成，实现自动化的CI/CD流程。
学习和使用难度：Pipeline任务可能需要用户学习Jenkinsfile的语法和DSL，而自由风格项目则更直观，易于上手。
三、Pipeline 核心脚本
“
提示：Pipeline 任务代表了Jenkins的未来方向，提供了更高级的自动化构建能力，而自由风格项目则适合快速设置简单的构建任务。随着Jenkins的发展，越来越多的用户和组织倾向于使用Pipeline任务来实现更高效的自动化流程。
3.1 获取 Git 代码分支
3.1.1 Git 分支插件
用了一个插件 gitParameter，可以获取 git 仓库的分支，部署的时候，可以选择分支。如下图所示，Git 仓库有 develop 和 master 分支，默认选中 develop 分支。
3.1.2 Git 环境变量
3.1.3 获取 Git 分支代码
这个步骤中有一一行关键的代码，可以通过 Git 插件获取选择的 Git 分支。
3.2 拷贝依赖包
因为 node_modules 不会上传到 git 仓库，所以我们需要提前准备好。
而我们项目我是先在有网的 Linux 服务器上用 npm install 命令下载的依赖包，然后手动压缩拷贝到 jenkins 服务器的 passjava 目录。
当执行部署的时候，会从 passjava 目录将 node_modules 压缩包拷贝并解压到 jenkins 的当前工作目录。
3.3 编译代码
编译前端代码可以用 npm run build xx 命令，然后将编译后的 dist 目录压缩。
3.4 备份代码
将 web 服务器上多个前端项目移动到备份目录 web-bak 。
3.5 上传代码
将编译后的代码包上传到 web 服务器。
3.6 更新代码
将 dist 压缩包解压，然后将多个前端工程拷贝到 web 目录。如 passjavabase, passjava-channel, project-contract 目录拷贝到 passjava-web-micro 目录。
3.7 清理代码
清理 web 服务器上备份的代码。
以下命令是查找并删除指定路径下超过7天未修改的目录。
这条命令会找到 /nfs-data/passjava/web-bak/ 目录下所有超过7天未修改的子目录，并将其打印出来，然后删除这些目录。
查找超过7天未修改的目录：
-mindepth 1：确保查找从指定目录的子目录开始，不包括指定的根目录。
-maxdepth 1：限制查找仅在指定目录的第一层子目录中进行。
-type d：只考虑目录，不包括文件。“-type -f” 只考虑文件，不包括目录。
-mtime +7：筛选出修改时间超过7天的目录。
-print：打印出这些目录的路径。
删除找到的目录：
-exec rm -rf {} +：对找到的每个目录执行rm -rf命令，递归且强制删除该目录及其内容。
该步骤的完整代码如下：
3.8 邮件通知
详见笔者之前写的一篇：持续集成：Jenkins Pipeline 邮件通知
四、总结
通过使用 Jenkins Pipeline 进行前端自动化部署，团队可以更加高效地管理和部署前端应用程序，减少人为错误和手动操作带来的风险，提升整体的开发和部署效率。
本文通过图解+代码的方式讲解了前端自动化部署的步骤，文中的脚本针对前端的三个模块进行打包，比较耗时，所以后续可以优化的地方是支持选择部署前端的不同模块。
Jenkins 文章汇总如下：
1、持续集成：丝滑的 Docker 打包部署，一套带走
2、持续集成：喝杯咖啡，一键部署后端完成！（建议收藏）
3、持续集成：喝杯咖啡，一键部署前端项目
4、持续集成：用代码实现流水线部署后端项目，像诗一般优雅
5、持续集成：如果你还不理解 RBAC，看看 Jenkins 如何做到的
6、持续集成：离线部署 Jenkins 填坑指南
7、持续集成：Jenkins Pipeline 邮件通知
8、持续集成：如何找到“BB”之人？（Break Build)