Note
GitHub Enterprise Server 目前不支持 GitHub 托管的运行器。 可以在 GitHub public roadmap 上查看有关未来支持计划的更多信息。
简介
本指南说明如何使用 GitHub Actions 构建 Web 应用并将其部署到 Azure Static Web Apps。
Note
如果 GitHub Actions 工作流需要访问支持 OpenID Connect (OIDC) 的云提供商提供的资源,则可以将工作流配置为直接向云提供商进行身份验证。 这样就可以停止将这些凭据存储为长期存在的机密,并提供其他安全优势。 有关详细信息,请参阅“关于使用 OpenID Connect 进行安全强化”。 和“在 Azure 中配置 OpenID Connect”。
先决条件
在创建 GitHub Actions 工作流程之前,首先需要完成以下设置步骤:
-
对部署源使用“Other(其他)”选项创建 Azure Static Web App。 有关详细信息,请参阅 Azure 文档中的“快速入门:在 Azure 门户中构建第一个静态站点”。
-
使用静态 Web 应用部署令牌的值创建名为
AZURE_STATIC_WEB_APPS_API_TOKEN
的机密。 有关如何查找部署令牌的详细信息,请参阅 Azure 文档中的“在 Azure 静态 Web 应用中重置部署令牌”。
创建工作流程
完成先决条件后,可以继续创建工作流程。
以下示例工作流演示了在推送到 main
分支时,或者在打开、同步或重新打开面向 main
的拉取请求时,如何生成和部署 Azure 静态 Web 应用。 当面向 main
的拉取请求关闭时,工作流还会破坏相应的预生产部署。
在工作流 env
键下,更改以下值:
- 将
APP_LOCATION
更改为客户端代码的位置 - 将
API_LOCATION
更改为 API 源代码的位置。 如果API_LOCATION
不相关,则可以删除该变量以及使用它的行。 - 将
OUTPUT_LOCATION
更改为客户端代码构建输出的位置
有关这些值的详细信息,请参阅 Azure 文档中的“为 Azure Static Web Apps 生成配置”。
# 此工作流使用未经 GitHub 认证的操作。 # 它们由第三方提供,并受 # 单独的服务条款、隐私政策和支持 # 文档。 # GitHub 建议将操作固定到提交 SHA。 # 若要获取较新版本,需要更新 SHA。 # 还可以引用标记或分支,但该操作可能会更改而不发出警告。 name: Deploy web app to Azure Static Web Apps env: APP_LOCATION: "/" # location of your client code API_LOCATION: "api" # location of your api source code - optional OUTPUT_LOCATION: "build" # location of client code build output on: push: branches: - main pull_request: types: [opened, synchronize, reopened, closed] branches: - main permissions: issues: write contents: read pull-requests: write jobs: build_and_deploy: if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed') runs-on: ubuntu-latest name: Build and Deploy steps: - uses: actions/checkout@v4 with: submodules: true - name: Build And Deploy uses: Azure/static-web-apps-deploy@1a947af9992250f3bc2e68ad0754c0b0c11566c9 with: azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} repo_token: ${{ secrets.GITHUB_TOKEN }} action: "upload" app_location: ${{ env.APP_LOCATION }} api_location: ${{ env.API_LOCATION }} output_location: ${{ env.OUTPUT_LOCATION }} close_pull_request: if: github.event_name == 'pull_request' && github.event.action == 'closed' runs-on: ubuntu-latest name: Close Pull Request steps: - name: Close Pull Request uses: Azure/static-web-apps-deploy@1a947af9992250f3bc2e68ad0754c0b0c11566c9 with: azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} action: "close"
# 此工作流使用未经 GitHub 认证的操作。
# 它们由第三方提供,并受
# 单独的服务条款、隐私政策和支持
# 文档。
# GitHub 建议将操作固定到提交 SHA。
# 若要获取较新版本,需要更新 SHA。
# 还可以引用标记或分支,但该操作可能会更改而不发出警告。
name: Deploy web app to Azure Static Web Apps
env:
APP_LOCATION: "/" # location of your client code
API_LOCATION: "api" # location of your api source code - optional
OUTPUT_LOCATION: "build" # location of client code build output
on:
push:
branches:
- main
pull_request:
types: [opened, synchronize, reopened, closed]
branches:
- main
permissions:
issues: write
contents: read
pull-requests: write
jobs:
build_and_deploy:
if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
runs-on: ubuntu-latest
name: Build and Deploy
steps:
- uses: actions/checkout@v4
with:
submodules: true
- name: Build And Deploy
uses: Azure/static-web-apps-deploy@1a947af9992250f3bc2e68ad0754c0b0c11566c9
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
repo_token: ${{ secrets.GITHUB_TOKEN }}
action: "upload"
app_location: ${{ env.APP_LOCATION }}
api_location: ${{ env.API_LOCATION }}
output_location: ${{ env.OUTPUT_LOCATION }}
close_pull_request:
if: github.event_name == 'pull_request' && github.event.action == 'closed'
runs-on: ubuntu-latest
name: Close Pull Request
steps:
- name: Close Pull Request
uses: Azure/static-web-apps-deploy@1a947af9992250f3bc2e68ad0754c0b0c11566c9
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
action: "close"
其他资源
以下资源也可能有用:
- 对于原始工作流模板,请参阅 GitHub Actions
starter-workflows
存储库中的azure-staticwebapp.yml
。 - 用于部署 Web 应用的操作是官方 Azure
Azure/static-web-apps-deploy
操作。 - 有关部署到 Azure 的 GitHub 操作工作流的更多示例,请参阅 actions-workflow-samples 存储库。