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 호스트 실행기는 현재 GitHub Enterprise Server에서 지원되지 않습니다. 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 워크플로가 OIDC(OpenID Connect)를 지원하는 클라우드 공급자의 리소스에 액세스해야 하는 경우 클라우드 공급자에게 직접 인증하도록 워크플로를 구성할 수 있습니다. 이렇게 하면 이러한 자격 증명을 수명이 긴 비밀로 저장하지 않을 수 있고 다른 보안 이점을 제공할 수 있습니다. 자세한 내용은 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에서 인증되지 않은 작업을 사용합니다.
# 작업은 타사에서 제공하며
# 별도의 서비스 약관, 개인정보처리방침, 지원 설명서에서 규정됩니다.
# 참조하세요.

# 커밋 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: