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

發行項
03/08/2025

使用工作流程將靜態網站部署至 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)，以降低對全球使用者的延遲，並將交易數目減少至您的儲存體帳戶。若將靜態內容部署到雲端式儲存體服務，則可以減少可能十分昂貴的計算執行個體需求。如需詳細資訊，請參閱靜態內容裝載模式。

若要搭配 OIDC 使用 Azure 登入動作，您必須在 Microsoft Entra 應用程式或使用者指派的受控識別上設定同盟身分識別認證。

選項 1：Microsoft Entra 應用程式

透過 Azure 入口網站、Azure CLI 或 Azure PowerShell，建立具有服務主體的 Microsoft Entra 應用程式。
複製用戶端標識碼、訂用帳戶標識碼和目錄（租用戶）標識碼的值，以便稍後在 GitHub Actions 工作流程中使用。
Azure 入口網站、Azure CLI 或 Azure PowerShell，將適當的角色指派給您的服務主體。
在 Microsoft Entra 應用程式上設定同盟身分識別認證，以信任 GitHub Actions 簽發給 GitHub 存放庫的令牌。

選項 2：使用者指派的受控識別

建立使用者指派的受控識別。
複製用戶端標識碼、訂用帳戶標識碼和目錄（租用戶）標識碼的值，以便稍後在 GitHub Actions 工作流程中使用。
將適當的角色指派給使用者指派的受控識別。
在使用者指派的受控識別上設定同盟身分識別認證，以信任 GitHub Actions 簽發給 GitHub 存放庫的令牌。

設定 GitHub 祕密

OpenID Connect
服務主體

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

在 GitHub (英文) 中，前往您的存放庫。
選取 [安全性] > [祕密和變數] > [動作]。
選取 [新增存放庫祕密]。

注意

若要增強公用存放庫中的工作流程安全性，請使用環境秘密，而不是存放庫秘密。如果環境需要核准，除非其中一個必要的檢閱者核准環境秘密，否則作業無法存取環境秘密。
建立 AZURE_CLIENT_ID、AZURE_TENANT_ID 和 AZURE_SUBSCRIPTION_ID 的秘密。從您的 Microsoft Entra 應用程式或 GitHub 秘密的使用者指派受控識別複製這些值：

GitHub 祕密 Microsoft Entra 應用程式或使用者指派的受控識別

AZURE_CLIENT_ID Client ID

AZURE_SUBSCRIPTION_ID 訂用帳戶識別碼

AZURE_TENANT_ID 目錄 (租用戶) ID

注意

基於安全性考慮，我們建議使用 GitHub 秘密，而不是將值直接傳遞至工作流程。

GitHub 祕密	Microsoft Entra 應用程式或使用者指派的受控識別
AZURE_CLIENT_ID	Client ID
AZURE_SUBSCRIPTION_ID	訂用帳戶識別碼
AZURE_TENANT_ID	目錄 (租用戶) ID

在 GitHub (英文) 中，前往您的存放庫。
移至導覽功能表中的 [設定]。
選取 [安全性] > [祕密和變數] > [動作]。
選取 [新增存放庫祕密]。
將得自 Azure CLI 命令的整個 JSON 輸出貼到祕密的 [值] 欄位中。將祕密命名為 AZURE_CREDENTIALS。
選取 [新增祕密]。

新增您的工作流程

OpenID Connect
服務主體

移至 GitHub 存放庫的 [動作]。
選取 [自行設定工作流程]。
刪除工作流程檔案 on: 區段之後的所有內容。例如，剩餘的工作流程看起來可能像這樣。
```
name: CI with OpenID Connect

on:
    push:
        branches: [ main ]
```

新增權限區段。

name: CI with OpenID Connect

on:
    push:
        branches: [ main ]

permissions:
      id-token: write
      contents: read

加入簽出和登入動作。這些動作會簽出您的站台碼，並使用您稍早建立的 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@v2
      with:
      client-id: ${{ secrets.AZURE_CLIENT_ID }}
      tenant-id: ${{ secrets.AZURE_TENANT_ID }}
      subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}

使用 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"
```

藉由新增動作至 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@v2
      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()

移至 GitHub 存放庫的 [動作]。
選取 [自行設定工作流程]。
刪除工作流程檔案 on: 區段之後的所有內容。例如，剩餘的工作流程看起來可能像這樣。
```
name: CI

on:
    push:
        branches: [ main ]
```

重新命名工作流程 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@v2
      with:
          creds: ${{ secrets.AZURE_CREDENTIALS }}

使用 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"
```

藉由新增動作至 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@v2
      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()

檢閱您的部署

移至 GitHub 存放庫的 [動作]。
開啟第一個結果，以查看工作流程的執行詳細記錄。

清除資源

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

下一步

瞭解 Azure Static Web Apps

共用方式為