自动化部署工具--使用 Jenkins 打造高效发布流程

洛卡卡了
614 阅读14分钟

引言

在之前文章中，我介绍了如何使用 syncd 自动化部署工具进行项目的集群化部署。然而相对来说，像 syncd、Kubernetes（K8s）、Swarm 这些自动化部署工具通常用于更严谨的环境，例如生产环境或预发布环境，确保代码在上线时具备高可靠性。毕竟我们上生产环境的流程都比较严谨 每一步都需要审核发布。而在日常开发调试过程中，无论是前端测试 还是前后端接口调试，我们通常在测试环境进行调试的。如果每次代码提交都需要走一次发布流程，无疑会增加开发的时间成本。

我之前待过的一家公司 无论测试环境还是生产环境都统一走自动化部署工具来操作。也不能说这种流程不对，只能说前后端测试接口的时候一旦有问题 要么重新更改发布一次 导致自动化部署工具发布记录超级多。 要么直接登录测试服务器修改代码 效率低而且代码修改的很混乱。。。。

使用 Jenkins 优化测试环境的开发效率

为了解决简化这一问题，我们可以在测试环境中引入 Jenkins，实现每次提交代码后自动触发部署，大幅提高开发效率。以下是 Jenkins 的主要应用场景：

  1. 自动化更新测试环境：通过配置 Jenkins，将代码库中的提交与测试环境的更新流程绑定，每次提交代码后自动触发构建和部署，避免手动发布操作。
  2. 缩短调试时间：代码提交后，Jenkins 自动完成打包和部署，开发者可以直接在测试环境中验证修改效果，减少等待时间。
  3. 降低运维成本：Jenkins 自动完成测试环境的构建、部署和回滚，减少了人工操作的出错率，并简化了流程。
  4. 多环境灵活配置：可以通过 Jenkins 配置不同分支对应的环境（如开发环境、测试环境、预发布环境），实现分支级别的环境隔离。

通过将 Jenkins 集成到测试环境的开发流程中，我们能够更高效地完成日常开发任务，同时显著减少手动部署的时间成本，为开发调试提供了极大的便利。

今天的文章，我将结合 Git 和 Jenkins，来实现web应用的一键构建与部署。借助 Git 和 Jenkins 的强大功能，我们可以实现从代码提交到应用发布的自动化流程，大大简化传统的手动构建和发布步骤。通过集成 Git 和 Jenkins，我们能够实现持续集成（CI）和持续部署（CD），确保每次提交的代码都经过自动化的构建、测试和部署流程，从而加速开发周期，减少人为错误。

本文将介绍如何将 Git 仓库与 Jenkins 集成，配置 Jenkins Pipeline 实现自动化构建，并通过 Jenkins 完成 web 应用的打包、部署等一系列发布操作。我们将一步步展示如何通过一键构建，自动化完成整个 web 应用的发布流程。

安装 Jenkins

在开始配置 Jenkins 之前，首先需要安装 Jenkins。安装 Jenkins 有两种常见的方式：通过安装包或使用 Docker 容器。本篇文章我主要以CentOS 为例安装jenkins。

我本地docker已经安装过了，懒得重新跑一遍了哈

1. 通过安装包安装 Jenkins（以 CentOS 为例）

在 CentOS 上安装 Jenkins，首先需要配置 Jenkins 官方的 Yum 仓库并安装 Jenkins。具体步骤如下：

  1. 添加 Jenkins 仓库和安装 GPG 密钥：

    sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat/jenkins.repo
sudo rpm --import https://pkg.jenkins.io/redhat/jenkins.io.key

  2. 安装 Jenkins：

    sudo yum install jenkins

    如果yum安装jenkins的时候 有下面这种报错

    image.png 我们可以加个这种参数:

    sudo yum install jenkins  --nogpgcheck

  3. 启动 Jenkins 服务：

    sudo systemctl start jenkins

  4. 设置 Jenkins 开机自启动：

    sudo systemctl enable jenkins

  5. 打开防火墙端口（如果启用了防火墙，需开放 8080 端口）：

    sudo firewall-cmd --permanent --add-port=8080/tcp
sudo firewall-cmd --reload

  6. 访问 Jenkins Web 界面： 默认情况下，Jenkins 会运行在 http://localhost:8080。可以通过浏览器访问该地址。

  7. 解锁 Jenkins： 首次访问时，Jenkins 会要求输入一个解锁密钥。我们可以通过以下命令获取密钥：

    sudo cat /var/lib/jenkins/secrets/initialAdminPassword

    image.png

输入解锁密钥后，按照向导完成 Jenkins 初始化。

如果服务器上没有 Java，那么 Jenkins 无法启动，因为它依赖 Java 运行环境。我们可以安装 OpenJDK 17，这是 Jenkins 官方推荐的版本。以下是在 CentOS 上安装 OpenJDK 17 的步骤：

安装 OpenJDK 17

  1. 更新包列表：

    sudo yum update -y

  2. 安装 OpenJDK 17：

    sudo yum install java-17-openjdk -y

  3. 验证 Java 安装：

    java -version

    我们看到类似于 openjdk version "17.0.x" 的输出，表示 Java 安装成功。

image.png

设置 Java 环境变量（可选）

如果系统需要指定 Java 环境变量，可以设置 JAVA_HOME：

  1. 查找 Java 安装路径：

    sudo update-alternatives --config java

    输出将显示 Java 安装路径（例如 /usr/lib/jvm/java-17-openjdk）。

  2. 将 JAVA_HOME 添加到环境变量中：

    打开或编辑 /etc/profile 文件：

    sudo vi /etc/profile

    在文件末尾添加以下内容（路径根据实际 Java 安装路径调整）：

    export JAVA_HOME=/usr/lib/jvm/java-17-openjdk-17.0.13.0.11-3.0.2.1.al8.x86_64
export PATH=$JAVA_HOME/bin:$PATH

  3. 使更改生效：

    source /etc/profile

重新启动 Jenkins

Java 安装完成后，可以重新启动 Jenkins：

sudo systemctl start jenkins

现在，Jenkins 应该可以正常启动了。通过浏览器访问 http://<服务器IP>:8080 来确认 Jenkins 是否运行。

image.png

jenkins初始化

然后我们输入上面初始化获取的密码进行解锁安装，选择推荐插件，安装

image.png

推荐插件安装后 进入下一个创建用户 我们需要创建用户和密码

image.png

创建完账号密码后 我们就初始化完成了

image.png

jenkins插件安装

我们初始化完成后需要安装一些插件来配合我们进行部署

这里在“全局配置工具”中安装插件。

image.png

如果觉得英文版看着不习惯我们可以安装一下汉化插件 Locale

image.png

点击安装后我们可以看到正在等待安装

image.png

安装完我们重启jenkins后可以看到已经变成中文版本了

image.png

然后我们需要安装其他插件 比如 Publish Over SSH 、 Qy Wechat Notification 、 Build Timestamp、 NodeJS

 Publish Over SSH Plugin

通过 SSH 协议将构建结果上传到远程服务器，适用于将文件传输到生产环境或其他服务器。

Qy Wechat Notification Plugin

支持通过企业微信发送构建通知，帮助团队实时了解构建状态。

 Build Timestamp Plugin

设置构建超时限制，当构建任务超时未完成时，自动终止构建，避免无限期挂起。

NodeJS Plugin

为 Jenkins 提供 Node.js 环境支持，适用于前端项目的构建任务，例如执行 npm 脚本、安装依赖、运行测试和打包前端代码。这个插件可以确保在构建 Web 应用时，Jenkins 能直接调用 Node.js 及相关工具链。

jenkins全局工具配置

然后我们需要配置一下git和jdk还有nodejs

image.png

image.png

我们查看服务器git安装位置：

image.png

image.png

我们再查看服务器java-jdk安装位置：

image.png

image.png

我们查看nodejs安装位置

image.png

image.png

Jenkins系统配置

我们还需要配置一下 Publish Over SSH 这个主要是用来验证我们的远程服务器 也就是我们测试用的云服务器。本案例我采用密码验证的方式来配置。

image.png

image.png

然后我们点击新增SSH Servers 进行我们的服务器配置：

image.png

配置完之后我们点击 高级按钮进行密码端口配置：

image.png

一般默认是22访问端口 我们配置完服务器登陆密码和端口后 右下角有个测试连接按钮 我们点击验证 出现 success 则表示我们配置成功：

image.png

配置git仓库凭据

为了jenkins可以有权限拉取git仓库信息 我们需要配置一下git仓库的凭据。我们在【系统管理】【凭据管理】这里设置

image.png

image.png

image.png

这里我们选择用Gitee 的 Personal Access Token 作为密码（而不是直接填写登录密码）

image.png

关于gitee令牌token 我们登陆我们的gitee个人设置里面有个私人令牌 我们添加一个新的：

image.png

然后写个描述作为该凭据标识。然后保存就可以了。

新建任务并配置构建

接下来我们新建一个构建任务 比如我们新建一个自由风格的任务

image.png

配置git源码管理

然后我们需要配置一下 项目的信息：

image.png

添加完之后 我们先不着急配置其他信息 我们先保存测试一下看看效果。我们进入刚才添加的任务里面 点击 立即构建 即可看到构建任务信息：

image.png

我们点击该构建 然后查看左侧的 控制台输出选项即可看到构建详细日志：

image.png

通过查看该构建日志 我们没有发现日志里面有 error这种信息 最后显示 Finished SUCCESS 则代表构建成功了。

配置 Gitee Webhook 触发构建

在使用 Jenkins 进行持续集成时，我们可以通过 Gitee Webhook 实现自动触发构建任务。这样当代码仓库发生变更（如代码提交、Pull Request 创建等）时，Webhook 能自动通知 Jenkins，完成构建任务。这种配置方式极大地提高了开发效率，避免了手动触发构建的繁琐操作。

这里我一般选择当推送代码的时候触发构建

image.png

在设置分支过滤这里 一般我们根据自己的需求进行填写。如果只希望特定分支的提交触发构建任务，可以在 “允许触发构建的分支” 部分选择 “根据分支名过滤” 。在 包括 中填写 main 或 develop 等需要触发构建的分支名。如果希望忽略某些分支，可以在 排除 中填写如 feature/*。 比如我们对任务维度分的比较细的话 我这里就只选择根据分支名过滤 填写 dev分支触发。

image.png

然后我们生成Gitee WebHook 密码 结合上面的Gitee WebHook地址我们进入仓库设置里面配置一下Gitee WebHook ：

image.png

image.png

在设置 WebHook界面 我们可以根据我们项目的需求进行设置 比如我这边只设置当有推送代码事件的时候才触发WebHook。

image.png

然后我们来简单验证一下：

  1. 我们dev代码分支提交一个commit：

image.png

image.png

2 然后我们查看在jenkins对应任务的构建历史：

image.png

image.png

可以看到构建日志里面 已经按照我们构建的要求触发了构建任务。

配置Build Steps

1.配置 Execute NodeJS Script

我们提交到代码仓库的代码一般只包含源码，而不包含 node_modules。在构建过程中，必须重新安装这些依赖，确保构建环境中包含项目运行所需的全部依赖。所以我们要设置node版本

image.png

选择我们安装node版本

image.png

2.配置 shell命令

我们点击增加构建步骤 然后选择 执行Shell

image.png

在构建 Vue 项目之前，我们需要确保 Jenkins 的构建环境中已经安装以下工具：

  • Node.js 和 npm：用于支持 Vue 项目的依赖安装和构建。

可以通过以下命令检查 Node.js 和 npm 是否已正确安装：

node -v
npm -v

为了确认工具的安装路径以及环境变量配置是否正确，还可以输出环境变量信息，如下所示：

node -v
npm -v
echo $PATH

通过输出 $PATH，可以方便地确认 Node.js 和 npm 是否在系统路径中，确保 Jenkins 在执行构建任务时能够正确调用相关命令。

image.png

然后我们点击应用 重新构建一次可以看到控制台已经打印了版本信息：

image.png

在确认 Jenkins 构建环境中已安装 Node.js 和 npm 后，我们需要为项目安装依赖并进行打包构建。这是 Vue 项目构建的核心步骤，通过添加 Shell 脚本命令完成以下任务：

1. 安装项目依赖

安装依赖是构建项目的第一步，用于下载项目所需的所有依赖包。可以通过以下命令实现：

npm install

为了便于调试和确认构建流程，我们可以在脚本中加入提示信息，输出当前状态，如下所示：

echo "开始安装依赖..."
npm install
echo "依赖安装完成。"

2. 打包项目

依赖安装完成后，需要对项目进行打包构建，生成生产环境的静态文件（通常输出到 dist 目录）。使用以下命令完成打包：

npm run build

同样，为了更好地了解构建进度，我们可以在脚本中加入打包过程的提示信息：

echo "开始打包项目..."
npm run build
echo "项目打包完成，文件已生成到 'dist' 目录。"

完整 Shell 脚本示例

以下是一个完整的脚本示例，用于安装依赖并打包 Vue 项目，并在每一步输出详细的状态信息：

#!/bin/bash

# 输出 Node.js 和 npm 版本信息
echo "当前 Node.js 版本："
node -v
echo "当前 NPM 版本："
npm -v
echo "环境变量 PATH："
echo $PATH

# 安装依赖
echo "开始安装依赖..."
npm install
echo "依赖安装完成。"

# 打包项目
echo "开始打包项目..."
npm run build
echo "项目打包完成，文件已生成到 'dist' 目录。"

image.png

然后保存应用后我们重新点击立即构建可以看到已经安装依赖并且打包完成

image.png

我们进入jenkins所在的服务器可以看到已经大宝生成dist文件夹了

image.png

配置构建后操作

在项目的实际开发和部署中，前端代码打包完成后，通常需要将生成的静态资源文件（如 dist 文件夹）推送到 项目服务器的指定目录，供后续使用或发布。

1. 打包命令的调整

在构建脚本中添加 打包和压缩操作，将 dist 文件夹压缩为 dist.tar，便于传输到目标服务器。

示例脚本：

#!/bin/bash

# 输出环境信息
echo "当前 Node.js 版本：$(node -v)"
echo "当前 NPM 版本：$(npm -v)"

# 安装依赖
echo "开始安装依赖..."
npm install --no-audit --prefer-offline --verbose
echo "依赖安装完成。"

# 打包项目
echo "开始打包项目..."
npm run build
echo "项目打包完成。"

# 压缩 dist 文件夹
echo "压缩打包文件..."
rm -rf dist.tar # 压缩打包前删除已存在的dist压缩包
tar -zcvf dist.tar ./dist
echo "文件已压缩为 dist.tar。"

2. 配置构建后操作

然后我们需要点击增加构建步骤，选择 Send build artifacts over SSH ，这个操作可以让我们在构建过程中通过SSH连接到远程服务器执行命令或发送文件。让我们最终打包的文件推送到我们的项目部署目录。

image.png

  • 填写 SSH 配置信息：

    • Name：选择配置好的 SSH 服务器（例如我们之前配置的：test-dev-server）。
    • Source files：填写需要发送的文件名或路径（例如：dist.tar）。
    • Remove prefix：一般留空，表示不移除文件路径前缀。
    • Remote directory：填写目标服务器上的目录路径（例如：/home/wwwroot/）。

  • 填写解压和清理命令： 在 Exec command 中填写需要在目标服务器上执行的命令，例如：

    cd /home/wwwroot/vue-test # 进入我们的项目部署目录
rm -rf dist/              # 删除上一次构建旧的 dist 文件夹
tar zxvf dist.tar         # 解压打包的文件
rm dist.tar               # 删除压缩包

image.png

配置完后我们保存然后重新构建 接着等构建成功后 我们到我们填写的服务器目录地址查看发现已经存在dist文件夹了

image.png

其他

按照我们上面的流程，已经完成了基础的发布流程，包括 Git 提交触发构建、构建成功后打包，并将打包文件推送到项目服务器的指定目录，实现了前端资源的自动化部署。

在配置这些流程的过程中，我们可以发现，Jenkins 提供了灵活且强大的构建管理能力，可以根据实际需求定制不同的构建要求和后续操作。

构建后操作：通知企业微信

在构建完成后，通知团队成员构建结果（成功或失败）是非常重要的一环。通过 Jenkins 集成企业微信通知，可以实现自动化的构建状态通知，提升团队协作效率。

实现流程

  1. 安装企业微信通知插件

    • 我们继续点击构建后操作 找到企业微信通知

      image.png

  2. 配置企业微信机器人

    • 登录企业微信，进入 [应用管理] > [机器人] ，创建一个自定义机器人。

    • 获取机器人 Webhook 地址，例如：

      https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=YOUR-KEY

  3. 在 Jenkins 中配置 Webhook

    • 在项目的配置页面中，找到 Post-build Actions（构建后操作）。

    • 点击 Add post-build action，选择 Qy Wechat Notification（或企业微信通知）。

      image.png

    • 填写 Webhook 地址和需要发送的消息模板，例如：

      项目构建完成：
- 项目：${JOB_NAME}
- 状态：${BUILD_STATUS}
- 构建编号：#${BUILD_NUMBER}
- 构建时间：${BUILD_DURATION}
- 查看详情：[${BUILD_URL}](点击查看)

  4. 高级配置（可选）

    • 通知条件：根据构建结果设置通知条件，如：

      • 仅在构建失败时通知团队。
      • 构建成功和失败均通知，但内容不同。

    • 通知分组：可以配置不同机器人用于通知不同的团队或群聊。

完整通知示例

以下是企业微信通知的配置示例：

  • 通知内容（成功） ：

    🎉 构建成功：
- 项目：vue-test
- 状态：成功 ✅
- 构建编号：#123
- 构建时间：2 分钟
- 查看详情：[点击查看](http://jenkins.yourserver.com/job/vue-test/123/)

  • 通知内容（失败） ：

    ❌ 构建失败：
- 项目：vue-test
- 状态：失败
- 构建编号：#123
- 查看详情：[点击查看](http://jenkins.yourserver.com/job/vue-test/123/)

    这样我们测试环境每次构建成功或者失败都不需要每次登陆jenknis上面来查看构建日志 可以通过企业微信或者钉钉通知到群里 这样更加方便我们知道构建结果。

最后

在我们日常业务的开发流程中，自动化构建和发布已经成为提升开发效率和稳定性的关键环节。Jenkins 的引入，不仅帮助我们优化了测试环境的发布流程，还为开发团队带来了许多便捷的地方：

  • 效率提升：通过自动化脚本减少了手动操作，让开发人员专注于业务逻辑的实现。

  • 稳定性增强：减少了发布流程中的人为错误，提高了代码发布的可靠性。

  • 团队协作优化：结合通知功能（如企业微信通知），团队成员可以实时掌握构建状态，提升协作效率。

  • 灵活适配多种场景：从前端打包、后端构建到客户端发布，Jenkins 都能提供高效的自动化解决方案。

虽然本篇文章我主要以 使用 Jenkins 打包前端项目 为例，演示了自动化构建和部署的流程，但 Jenkins 的强大能力并不仅限于前端项目。它同样适用于其他场景，比如 后端服务部署 和 安卓客户端打包 等，让开发流程更加高效。

至于部署后的操作 比如配置nginx 或者其他的一些 这里就不再做过多的介绍了哈，有兴趣的可以根据Jenkins多扩展一些前置后置操作哈。

avatar
文章
阅读
粉丝