有效管理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. 點擊左側的任何構建任務並展開“Build app”任務。您將看到生成的構建任務數據（靜態文件）。這些是您需要部署的文件。

這些生成的文件在運行任務的服務器被處理（或任務結束）時會丟失。由於您需要這些文件進行部署，因此您將在下一節中實施一個步驟來將這些文件拿取並上傳為一個工件。

最後，在建置工作的步驟區塊下執行測試後，請添加以下代碼。

以下代碼將使用 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. 打開您喜歡的網頁瀏覽器，訪問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 secrets 頁面上點擊“新存儲庫秘密”以開始添加秘密。

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来自动化您下一个项目的工作流呢？