有效管理 GitHub Actions 工件以部署发布

你的团队是否在手动打包代码上投入了大量的精力？如果是的话，现在是时候开始使用 GitHub Actions Artifacts 了，这样你的团队就可以自动化这个过程了。同时，你可以减少发布的差异性，并节省时间来处理其他关键任务。

GitHub Actions Artifacts 能够有效地将数据从一个活动作业传输到另一个，消除了部署过程中重复且耗时的任务。在本教程中，你将学习如何使用和管理 artifacts 来将 React 应用程序部署到 Netlify。

继续阅读，开始创建一致的部署！

先决条件

本教程将进行一次动手演示。如果你想跟着做，请确保你有一个简单的 React 应用程序和一个 GitHub 仓库。本教程使用的是一个React 计数器应用程序仓库。

构建 CI/CD 工作流

当 GitHub Actions 工作流中的作业结束时，它们处理和生成的数据也会结束。名为 artifacts 的数据可以在作业完成后保留在存储库页面上，并且可以使用 upload-artifact 动作进行上传。

但在为你的应用程序建立部署发布的 GitHub Actions artifacts 之前，你需要首先建立一个CI/CD工作流：

相关文章:如何创建 Jenkins CI CD 管道

1. 在应用程序的根目录下创建一个.github文件夹，并创建一个名为workflows的子文件夹。

2. 接下来，在workflows文件夹中创建工作流文件（一个 .yml 文件）。您可以随意命名文件。但是对于本教程，文件名为ci.yml。

您的工作流资源结构应如下所示。

3. 将以下代码添加到ci.yml文件中并保存更改。下面的代码创建了一个名为 CI 的工作流，并为应用程序创建了一个构建作业。

name: CI

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]
# 工作流将在主分支上的推送或拉取事件上触发

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
# 要运行的操作系统
    strategy:
      matrix:
        node-version: [12.x, 14.x, 16.x]
    steps:
    - uses: actions/checkout@v3
# 从存储库获取代码
    - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v3
       with:
           node-version: ${{ matrix.node-version }}
    - name: Install dependencies
      run: npm ci

    - name: Build app
      run: npm run build

    - name: Run tests
      run: npm run test

4. 现在，添加并提交更改，并将它们推送到您的远程 GitHub 存储库。

如果推送成功，您将看到一个带有琥珀色圆圈的提交，如下所示，表示工作流正在运行。

5. 点击“Actions”选项卡以查看工作流。

6. 点击左侧任何构建作业并展开“构建应用程序”作业。您将看到生成的构建作业数据（静态文件）。这些是您需要用于部署的文件。

当运行作业的服务器被处理掉（或作业结束时），这些生成的文件将丢失。由于您需要这些文件进行部署，在接下来的部分中，您将实施一步来获取这些文件并将它们作为一个工件上传。

7. 最后，在构建作业的步骤块下运行测试后，添加以下代码。

以下代码将使用actions/upload-artifact@v3操作从构建目录上传名为production的工件。

生成的文件在运行作业的服务器被处理或作业结束时会丢失。由于您将需要这些文件进行部署，以下代码实现了将它们取出并上传为工件的步骤。

# 上传工件
- name: Upload production-ready build files
  uses: actions/upload-artifact@v3
  with:
    name: production
    path: ./build

配置自定义工件保留期

默认情况下，工件将被存储90天后被删除。但根据存储库的类型，您可以更改此保留期。

以下是可为自定义工件保留期设置的值：

• 私有存储库 – 任何值在1和400天之间。
• 公共存储库 – 仅在1和90天之间的任何值。

要设置自定义工件保留期，请在工作流YAML文件中包含retention-days: 2在您的# 上传工件步骤中。

# 上传工件
- name: Upload production-ready build files
  uses: actions/upload-artifact@v3
  with:
    name: production
    path: ./build
    # 自定义工件保留期
		retention-days: 2

或者，通过GitHub使用以下配置工件保留期：

• 导航到存储库中的设置选项卡。
• 点击操作（左侧面板）展开下拉菜单，然后选择常规。
• 在下面显示的工件和日志保留部分中输入您希望将工件保留多少天的数字，然后单击保存。

从Git存储库导入项目到Netlify

通过上传工件的步骤，工作流中的另一个作业现在可以访问构建工件，从而减少了工作流完成时间。您将向工作流添加一个部署任务，在该作业的一个步骤中下载已上传的项。

但在更新工作流之前，您将为应用程序部署设置Netlify：

1. 打开您喜欢的Web浏览器，转到Netlify并使用您的GitHub帐户登录。

2. 登录后，在“网站”部分点击“添加新站点”，然后选择“导入现有项目”以开始导入您的项目。

3. 由于您将使用GitHub上为本教程创建的存储库，因此单击GitHub。弹出窗口将出现，在其中您将授权Netlify访问您的GitHub身份。

4. 授权后，搜索并选择要从中导入项目的存储库。

5. 在新页面上，为站点配置基本构建设置，例如您要从中部署的分支和构建命令。但由于您将使用GitHub操作进行部署，请将构建命令和发布目录字段留空。

单击配置构建设置后，单击部署站点，您会看到站点正在部署的过程。一旦部署完成，将为站点生成一个实时链接。

如果您将构建命令字段留空，则转到链接将显示404页面，因为应用程序未构建。

6. 接下来，单击站点设置以查看站点信息（第六步）。

7. 最后，在站点详细信息页面上，在“站点信息”部分下方记下站点ID以备将来使用。

创建个人访问令牌

现在您已经获得了您的站点ID，您需要获取一个访问令牌。个人访问令牌将授予您对Netlify帐户的访问权限，以便GitHub操作在Netlify上执行部署。

1. 单击您的个人资料图标（右上角），然后选择“用户设置”以访问您的个人资料设置。

2. 在新页面上，单击“应用程序”（左侧面板）→“新建访问令牌”（在个人访问令牌部分下方），以初始化创建新的访问令牌。

3. 在新页面上，为令牌输入一个描述性名称，然后单击“生成令牌”。

4. 现在，将令牌复制到安全的地方。

通过创建密钥来保护站点ID和访问令牌

现在您已经从Netlify获取了站点ID和访问令牌，您可以将它们添加到您的存储库中，以便在操作工作流程中使用。但首先，您需要通过创建密钥来保护您的站点ID和访问令牌。

相关:启动 GitHub Actions 环境变量和机密

1. 在浏览器中导航到您的 GitHub 存储库。

2. 接下来，点击设置选项卡 → 机密（左侧面板） → Actions（在机密下方）以访问存储库上可用的操作列表。

3. 在 Actions 机密页面上点击新存储库机密，以启动添加机密的过程。

4. 现在，为新机密提供一个描述性名称。但本教程使用 NETLIFY_AUTH_TOKEN 作为机密名称。

将访问令牌添加为值，然后点击添加机密以创建新机密。

5. 最后，重复第四步，但这次为站点 ID 添加一个机密。

添加后，您将在存储库机密部分看到机密，如下所示。

下载和部署到 Netlify 的工件

现在，您的 Netlify 站点和机密已设置，您将在工作流中包含一个步骤，以使用您的机密部署到 Netlify。

1. 通过添加包含部署作业的下面的代码来更新您的工作流。

以下代码包含下载上传的工件的步骤，以及将其部署到 Netlify 的另一步骤。

您可以在 ATA 的 GitHub 存储库中找到 ci.yml 文件的完整代码。

deploy:
  name: Deploy #职位名称
  needs: build # 构建工作必须成功运行才能运行部署工作
  runs-on: ubuntu-latest

  steps:
  - name: Download artifact
    uses: actions/download-artifact@v3
# 下载上传的文件
    with:
      name: production
      path: ./build

  - name: Deploy to Netlify
    uses: netlify/actions/cli@master
# 部署到 Netlify 的步骤
    env:
      NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
      NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
# 用于身份验证的密钥
    with:
      args: deploy --dir=build --prod

2. 接下来，添加并推送更改到远程存储库。

您应该在存储库的工作流程页面上看到最新的提交运行，如下所示。

一旦提交，点击最新运行以查看更多详细信息。

如果作业成功运行，您将在页面底部看到作业和生成的构件旁边的绿色勾选标记。

3. 现在，点击部署工作（左侧面板），并展开部署到 Netlify 的任务。您将看到该步骤的输出，其中包含网站的 URL。

点击网站 URL 以验证站点是否正常工作且可访问。

该 URL 将自动在您的网络浏览器的新标签页中打开，如下所示。此输出表示您的站点正常运行。

删除未使用的构件以节省空间

每次发布后，您在上传和下载新版本时都会使用更多磁盘空间。如何节省空间？删除未使用的构件是最可行的解决方案。您必须限制每个服务器上存储的发布构件数量，以防止积累数千个发布和磁盘变满。

除了使用保留期设置在一段时间后删除工件之外，您还可以在 GitHub 的工作流程页面上删除工件：

在您的工作流程页面上，单击工件旁边的删除图标来删除它。

现在，点击提示（最顶部）上的确定以确认删除工件。

请注意下方页面上不再显示工件，确认它已成功删除。

结论

您已经看到了如何使用工件使得在一个工作流程中提供信息给另一个工作流程变得更加简单。到这一步，您现在应该对 GitHub Actions 的工件有了更好的理解，以及它们如何用于部署发布。

有了这些新的知识，为什么不利用 GitHub Actions 来实现下一个项目的工作流自动化呢？