通过

你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

在 Azure 存储中使用 GitHub Actions 工作流以部署静态网站

  • 项目

使用工作流将静态站点部署到 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，带有弃用警告。

在上面的示例中，请将占位符替换为你的订阅 ID、资源组名称和应用名称。 输出是一个 JSON 对象，包含的角色分配凭据可提供对应用服务应用的访问权限，如下所示。 复制此 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 存储库，以清理部署的资源。

后续步骤

了解 Azure Static Web Apps