使用 GitHub Actions 工作流程在 Azure 儲存體中部署您的靜態網站

使用工作流程將靜態網站部署至 Azure 儲存體帳戶，進而開始使用 GitHub Actions。 設定 GitHub Actions 工作流程之後，您將能夠在對網站的程式碼進行變更時，從 GitHub 自動將您的網站部署至 Azure。

注意

如果您使用 Azure Static Web Apps，則不需要手動設定 GitHub Actions 的工作流程。 Azure Static Web Apps 會為您自動建立 GitHub Actions 的工作流程。

必要條件

Azure 訂用帳戶和 GitHub 帳戶。

• 具有有效訂用帳戶的 Azure 帳戶。 免費建立帳戶。
• 具有靜態網站程式碼的 GitHub 存放庫。 如果您沒有 GitHub 帳戶，請免費註冊。
• Azure 儲存體中裝載的運作中靜態網站。 瞭解如何在 Azure 儲存體中裝載靜態網站。 若要遵循此範例，您也應該部署 Azure CDN。

注意

經常會使用內容傳遞網路 (CDN)，以降低對全球使用者的延遲，並將交易數目減少至您的儲存體帳戶。 若將靜態內容部署到雲端式儲存體服務，則可以減少可能十分昂貴的計算執行個體需求。 如需詳細資訊，請參閱靜態內容裝載模式。

產生部署認證

服務主體

使用 Azure CLI 中的 az ad sp create-for-rbac 命令來建立服務主體。 請使用 Azure 入口網站中的 Azure Cloud Shell，或選取 [試試看] 按鈕來執行此命令。

az ad sp create-for-rbac --name "myML" --role contributor \
                            --scopes /subscriptions/<subscription-id>/resourceGroups/<group-name> \
                            --json-auth

參數 --json-auth 可在 Azure CLI 版本 >= 2.51.0 中使用。 此版本之前的版本會搭配取代警告使用 --sdk-auth。

在上述範例中，將預留位置換成為您的訂用帳戶識別碼、資源群組名稱和應用程式名稱。 輸出是一個 JSON 物件，內有角色指派認證可讓您存取 App Service 應用程式，如下所示。 複製此 JSON 物件以供後續使用。

  {
    "clientId": "<GUID>",
    "clientSecret": "<GUID>",
    "subscriptionId": "<GUID>",
    "tenantId": "<GUID>",
    (...)
  }

OpenID Connect

OpenID Connect 是使用短期權杖的驗證方法。 使用 GitHub Actions 設定 OpenID Connect 是更複雜的程序，可提供強化的安全性。

1. 若您沒有現有的應用程式，請註冊可存取資源的新 Microsoft Entra 應用程式與服務主體。

   az ad app create --display-name myApp
   

   此命令會使用作為您 client-id 的 appId 來輸出 JSON。 objectId 是 APPLICATION-OBJECT-ID，而且會用來搭配圖形 API 呼叫建立同盟認證。 儲存值以稍後作為 AZURE_CLIENT_ID GitHub 秘密。

2. 建立服務主體。 將 $appID 取代為您 JSON 輸出中的 appId。 此命令會產生具有不同 objectId 的 JSON 輸出，並將用於下一個步驟中。 新的 objectId 是 assignee-object-id。

   此命令會產生具有不同 objectId 的 JSON 輸出，並將在下一個步驟中使用。 新的 objectId 是 assignee-object-id。

   複製 appOwnerTenantId 以供稍後作為 AZURE_TENANT_ID 的 GitHub 秘密使用。

    az ad sp create --id $appId
   

3. 依訂用帳戶和物件建立新的角色指派。 依預設，角色指派將會繫結至您的預設訂用帳戶。 以訂用帳戶識別碼取代 $subscriptionId，以資源群組名稱取代 $resourceGroupName，並以產生的 assignee-object-id 取代 $assigneeObjectId (新建立的服務主體物件識別碼)。

   az role assignment create --role contributor --subscription $subscriptionId --assignee-object-id  $assigneeObjectId --assignee-principal-type ServicePrincipal --scope /subscriptions/$subscriptionId/resourceGroups/$resourceGroupName
   

4. 執行下列命令，為您的 Microsoft Entra 應用程式建立新的同盟身分識別認證。

   • 針對您的 Microsoft Entra 應用程式，以 objectId (建立應用程式時產生) 取代 APPLICATION-OBJECT-ID。
   • 將 CREDENTIAL-NAME 的值設定為稍後參考。
   • 設定 subject。 依據您的工作流程，GitHub 會定義此項目的值：
     • 您 GitHub Actions 環境中的工作：repo:< Organization/Repository >:environment:< Name >
     • 針對未繫結至環境的作業，請根據用來觸發工作流程的參考路徑，包含分支/標記的參考路徑：repo:< Organization/Repository >:ref:< ref path>。 例如，repo:n-username/ node_express:ref:refs/heads/my-branch 或 repo:n-username/ node_express:ref:refs/tags/my-tag。
     • 針對由提取要求事件所觸發的工作流程：repo:< Organization/Repository >:pull_request。

   az ad app federated-credential create --id <APPLICATION-OBJECT-ID> --parameters credential.json
   ("credential.json" contains the following content)
   {
       "name": "<CREDENTIAL-NAME>",
       "issuer": "https://token.actions.githubusercontent.com",
       "subject": "repo:octo-org/octo-repo:environment:Production",
       "description": "Testing",
       "audiences": [
           "api://AzureADTokenExchange"
       ]
   }
   

設定 GitHub 祕密

服務主體

1. 在 GitHub (英文) 中，前往您的存放庫。

2. 移至導覽功能表中的 [設定]。

3. 選取 [安全性] > [祕密和變數] > [動作]。

   

4. 選取 [新增存放庫祕密]。

5. 將得自 Azure CLI 命令的整個 JSON 輸出貼到祕密的 [值] 欄位中。 將祕密命名為 AZURE_CREDENTIALS。

6. 選取 [新增祕密]。

OpenID Connect

您必須將應用程式的用戶端識別碼、租用戶識別碼和訂用帳戶識別碼提供給登入動作。 這些值可以直接在工作流程中提供，也可以儲存在 GitHub 的秘密中，並在您的工作流程中參考。 將值儲存為 GitHub 秘密是較安全的選擇。

1. 在 GitHub (英文) 中，前往您的存放庫。

2. 選取 [安全性] > [祕密和變數] > [動作]。

   

3. 選取 [新增存放庫祕密]。

4. 建立 AZURE_CLIENT_ID、AZURE_TENANT_ID 和 AZURE_SUBSCRIPTION_ID 的秘密。 使用 Microsoft Entra 應用程式中的這些值來取得 GitHub 祕密：

   GitHub 祕密	Microsoft Entra 應用程式
   AZURE_CLIENT_ID	應用程式 (用戶端) 識別碼
   AZURE_TENANT_ID	目錄 (租用戶) 識別碼
   AZURE_SUBSCRIPTION_ID	訂用帳戶識別碼

5. 選取 [新增秘密] 以儲存每個秘密。

新增您的工作流程

服務主體

1. 移至 GitHub 存放庫的 [動作]。

   

2. 選取 [自行設定工作流程]。

3. 刪除工作流程檔案 on: 區段之後的所有內容。 例如，剩餘的工作流程看起來可能像這樣。

   name: CI
   
   on:
       push:
           branches: [ main ]
   

4. 重新命名工作流程 Blob storage website CI，並新增簽出和登入動作。 這些動作會簽出您的站台碼，並使用您稍早建立的 AZURE_CREDENTIALS GitHub 祕密向 Azure 進行驗證。

   name: Blob storage website CI
   
   on:
       push:
           branches: [ main ]
   
   jobs:
     build:
       runs-on: ubuntu-latest
       steps:
       - uses: actions/checkout@v3
       - uses: azure/login@v1
         with:
             creds: ${{ secrets.AZURE_CREDENTIALS }}
   

5. 使用 Azure CLI 動作，將您的程式碼上傳至 Blob 儲存體，並清除 CDN 端點。 針對 az storage blob upload-batch，使用您的儲存體帳戶名稱取代預留位置。 指令碼會上傳至 $web 容器。 針對 az cdn endpoint purge，將預留位置取代為您的 CDN 設定檔名稱、CDN 端點名稱和資源群組。 若要加快 CDN 清除，您可以將 --no-wait 選項新增至 az cdn endpoint purge。 若要加強安全性，您也可以使用儲存體帳戶金鑰來新增 --account-key 選項。

       - name: Upload to blob storage
         uses: azure/CLI@v1
         with:
           inlineScript: |
               az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME>  --auth-mode key -d '$web' -s .
       - name: Purge CDN endpoint
         uses: azure/CLI@v1
         with:
           inlineScript: |
              az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"
   

6. 藉由新增動作至 Azure 的登出，來完成您的工作流程。 以下是完成後的工作流程。 檔案會出現在存放庫的 .github/workflows 資料夾中。

   name: Blob storage website CI
   
   on:
       push:
           branches: [ main ]
   
   jobs:
     build:
       runs-on: ubuntu-latest
       steps:
       - uses: actions/checkout@v3
       - uses: azure/login@v1
         with:
             creds: ${{ secrets.AZURE_CREDENTIALS }}
   
       - name: Upload to blob storage
         uses: azure/CLI@v1
         with:
           inlineScript: |
               az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME> --auth-mode key -d '$web' -s .
       - name: Purge CDN endpoint
         uses: azure/CLI@v1
         with:
           inlineScript: |
              az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"
   
     # Azure logout
       - name: logout
         run: |
               az logout
         if: always()
   

OpenID Connect

1. 移至 GitHub 存放庫的 [動作]。

   

2. 選取 [自行設定工作流程]。

3. 刪除工作流程檔案 on: 區段之後的所有內容。 例如，剩餘的工作流程看起來可能像這樣。

   name: CI with OpenID Connect
   
   on:
       push:
           branches: [ main ]
   

4. 新增權限區段。

   name: CI with OpenID Connect
   
   on:
       push:
           branches: [ main ]
   
   permissions:
         id-token: write
         contents: read
   

5. 加入簽出和登入動作。 這些動作會簽出您的站台碼，並使用您稍早建立的 GitHub 祕密向 Azure 進行驗證。

   name: CI with OpenID Connect
   
   on:
       push:
           branches: [ main ]
   
   permissions:
         id-token: write
         contents: read
   
   jobs:
     build:
       runs-on: ubuntu-latest
       steps:
       - uses: actions/checkout@v3
       - uses: azure/login@v1
         with:
         client-id: ${{ secrets.AZURE_CLIENT_ID }}
         tenant-id: ${{ secrets.AZURE_TENANT_ID }}
         subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
   

6. 使用 Azure CLI 動作，將您的程式碼上傳至 Blob 儲存體，並清除 CDN 端點。 針對 az storage blob upload-batch，使用您的儲存體帳戶名稱取代預留位置。 指令碼會上傳至 $web 容器。 針對 az cdn endpoint purge，將預留位置取代為您的 CDN 設定檔名稱、CDN 端點名稱和資源群組。 若要加快 CDN 清除，您可以將 --no-wait 選項新增至 az cdn endpoint purge。 若要加強安全性，您也可以使用儲存體帳戶金鑰來新增 --account-key 選項。

       - name: Upload to blob storage
         uses: azure/CLI@v1
         with:
           inlineScript: |
               az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME>  --auth-mode key -d '$web' -s .
       - name: Purge CDN endpoint
         uses: azure/CLI@v1
         with:
           inlineScript: |
              az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"
   

7. 藉由新增動作至 Azure 的登出，來完成您的工作流程。 以下是完成後的工作流程。 檔案會出現在存放庫的 .github/workflows 資料夾中。

   name: CI with OpenID Connect
   
   on:
       push:
           branches: [ main ]
   
   permissions:
         id-token: write
         contents: read
   
   jobs:
     build:
       runs-on: ubuntu-latest
       steps:
       - uses: actions/checkout@v3
       - uses: azure/login@v1
         with:
         client-id: ${{ secrets.AZURE_CLIENT_ID }}
         tenant-id: ${{ secrets.AZURE_TENANT_ID }}
         subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
   
       - name: Upload to blob storage
         uses: azure/CLI@v1
         with:
           inlineScript: |
               az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME> --auth-mode key -d '$web' -s .
       - name: Purge CDN endpoint
         uses: azure/CLI@v1
         with:
           inlineScript: |
              az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"
   
     # Azure logout
       - name: logout
         run: |
               az logout
         if: always()
   

檢閱您的部署

1. 移至 GitHub 存放庫的 [動作]。

2. 開啟第一個結果，以查看工作流程的執行詳細記錄。

   

清除資源

當您不再需要靜態網站和 GitHub 存放庫時，請刪除資源群組和 GitHub 存放庫，以清除您所部署的資源。

下一步

瞭解 Azure Static Web Apps