Azure Static Web App에 배포하기

Azure Static Web App에 배포하기

지속적 배포(CD) 워크플로의 일부로 웹 앱을 Azure Static Web App에 배포하는 방법을 알아봐요. main 브랜치로의 푸시나 main을 대상으로 하는 풀 리퀘스트 이벤트에 따라 빌드·배포하고, 풀 리퀘스트가 닫히면 사전 프로덕션 배포를 정리하는 워크플로를 살펴봐요.

출처: 문서

본문

사전 요구 사항

GitHub Actions 워크플로를 만들기 전에 먼저 다음 설정 단계를 완료해야 해요.

  1. 배포 소스로 'Other' 옵션을 사용해 Azure Static Web App을 만들어요. 자세한 내용은 Azure 문서의 Quickstart: Azure 포털에서 첫 정적 사이트 만들기를 참고하세요.

  2. 정적 웹 앱 배포 토큰 값을 사용해 AZURE_STATIC_WEB_APPS_API_TOKEN이라는 시크릿을 만들어요. 배포 토큰을 찾는 방법에 대한 자세한 내용은 Azure 문서의 Azure Static Web Apps에서 배포 토큰 재설정하기를 참고하세요.

워크플로 만들기

사전 요구 사항을 완료했다면 워크플로를 만들 수 있어요.

다음 예제 워크플로는 main 브랜치로 푸시가 있을 때 또는 main을 대상으로 하는 풀 리퀘스트가 열리거나, 동기화되거나, 다시 열릴 때 Azure 정적 웹 앱을 빌드하고 배포하는 방법을 보여줘요. 이 워크플로는 main을 대상으로 하는 풀 리퀘스트가 닫힐 때 해당 사전 프로덕션 배포도 정리해요.

워크플로 env 키 아래에서 다음 값을 변경해요:

  • APP_LOCATION을 클라이언트 코드 위치로
  • API_LOCATION을 API 소스 코드 위치로. API_LOCATION이 관련이 없다면 변수와 사용되는 줄을 삭제할 수 있어요.
  • OUTPUT_LOCATION을 클라이언트 코드 빌드 출력 위치로

이 값들에 대한 자세한 내용은 Azure 문서의 Azure Static Web Apps용 빌드 구성을 참고하세요.

# This workflow uses actions that are not certified by GitHub.
# They are provided by a third-party and are governed by
# separate terms of service, privacy policy, and support
# documentation.

# GitHub recommends pinning actions to a commit SHA.
# To get a newer version, you will need to update the SHA.
# You can also reference a tag or branch, but the action may change without warning.

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@v6
        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"

더 알아보기 (Learn more)