Deploying to Azure Static Web App

You can deploy your web app to Azure Static Web App as part of your continuous deployment (CD) workflows.

本文内容

注意

GitHub Enterprise Server 目前不支持 GitHub 托管的运行器。 可以在 GitHub public roadmap 上查看有关未来支持计划的更多信息。

Introduction

This guide explains how to use GitHub Actions to build and deploy a web app to Azure Static Web Apps.

注意

如果 GitHub Actions 工作流需要访问支持 OpenID Connect (OIDC) 的云提供商提供的资源，则可以将工作流配置为直接向云提供商进行身份验证。 这样就可以停止将这些凭据存储为长期存在的机密，并提供其他安全优势。 有关详细信息，请参阅“关于使用 OpenID Connect 进行安全强化”。 and Configuring OpenID Connect in Azure.

Prerequisites

Before creating your GitHub Actions workflow, you will first need to complete the following setup steps:

  1. Create an Azure Static Web App using the 'Other' option for deployment source. For more information, see Quickstart: Building your first static site in the Azure portal in the Azure documentation.

  2. Create a secret called AZURE_STATIC_WEB_APPS_API_TOKEN with the value of your static web app deployment token. For more information about how to find your deployment token, see Reset deployment tokens in Azure Static Web Apps in the Azure documentation.

Creating the workflow

Once you've completed the prerequisites, you can proceed with creating the workflow.

The following example workflow demonstrates how to build and deploy an Azure static web app when there is a push to the main branch or when a pull request targeting main is opened, synchronized, or reopened. The workflow also tears down the corresponding pre-production deployment when a pull request targeting main is closed.

Under the workflow env key, change the following values:

  • APP_LOCATION to the location of your client code
  • API_LOCATION to the location of your API source code. If API_LOCATION is not relevant, you can delete the variable and the lines where it is used.
  • OUTPUT_LOCATION to the location of your client code build output

For more information about these values, see Build configuration for Azure Static Web Apps in the Azure documentation.

YAML
# 此工作流使用未经 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"

Additional resources

The following resources may also be useful: