返回

用 Jenkins 的前端自动化部署（第 3 部分）：通过 Jenkins 自动构建

前端

在当今快节奏的开发环境中，自动化部署管道对于确保快速、可靠的软件交付至关重要。在这个系列的第三部分中，我们将探讨如何使用 Jenkins 为您的前端应用程序设置一个全面的自动化部署管道，重点关注通过 Jenkins 自动构建。

设置 GitHub 触发器

为了触发 Jenkins 自动构建，我们需要设置一个 GitHub 触发器。这将允许 Jenkins 在每次提交代码到指定的存储库时侦听和响应。

  1. 创建 GitHub webhook： 转到 GitHub 存储库的“设置”>“Webhooks”>“添加 webhook”。
  2. 配置 webhook URL： 输入 Jenkins 服务器的 webhook URL，后面加上 /github-webhook/。
  3. 选择触发事件： 选择“推送到分支”事件。
  4. 添加 Content-Type 标头： 在“自定义标头”下，添加 Content-Type: application/json 标头。
  5. 保存更改： 单击“添加 webhook”保存配置。

配置 Jenkins

接下来，我们需要配置 Jenkins 以处理来自 GitHub webhook 的构建请求。

  1. 创建新的 Jenkins 作业： 转到 Jenkins 仪表板，单击“新建作业”。
  2. 选择项目类型： 选择“Freestyle 项目”。
  3. 命名您的作业： 输入一个性名称，例如“前端构建”。
  4. 配置源代码管理： 选择“Git”作为源代码管理工具。
  5. 输入存储库 URL： 输入 GitHub 存储库的 URL。
  6. 添加触发器： 在“构建触发器”部分，选择“GitHub hook trigger for GITScm polling”。

自动构建配置

现在，让我们配置 Jenkins 自动构建：

  1. 添加构建步骤： 在“构建”部分，单击“添加构建步骤”。
  2. 选择构建步骤： 选择“执行 shell”步骤。
  3. 输入构建命令： 输入以下命令，替换<project_root>为您的项目根目录：
cd <project_root>
npm install
npm run build
  1. 保存更改： 单击“保存”保存配置。

测试自动化构建

要测试自动化构建，请在 GitHub 存储库中推送一些更改。Jenkins 应自动检测更改并触发构建。您可以通过在 Jenkins 构建历史记录中检查构建状态来验证构建是否成功。

结论

通过结合 GitHub 触发器和 Jenkins 自动构建，我们已经建立了一个强大的自动化部署管道，可以显着简化前端应用程序的部署过程。这种自动化不仅提高了部署速度，而且还减少了错误并改善了整体软件质量。通过利用 Jenkins 的强大功能，您可以构建和部署前端应用程序，以满足当今敏捷开发环境的需求。