共用方式為


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

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

注意

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

必要條件

Azure 訂用帳戶和 GitHub 帳戶。

注意

經常會使用內容傳遞網路 (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>",
    (...)
  }

設定 GitHub 祕密

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

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

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

    Screenshot of adding a secret

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

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

  6. 選取 [新增祕密]。

新增您的工作流程

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

    GitHub Actions menu item

  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()
    

檢閱您的部署

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

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

    Log of GitHub Actions run

清除資源

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

下一步