# Azure Static Web App에 배포

지속적인 배포(CD) 워크플로의 일부로 웹앱을 Azure 정적 웹앱에 배포하는 방법을 알아봅니다.

## 필수 조건

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

1. 배포 원본에 대한 '기타' 옵션을 사용하여 Azure Static Web App을 만듭니다. 자세한 내용은 [Quickstart: Azure 설명서의 Azure Portal](https://docs.microsoft.com/azure/static-web-apps/get-started-portal)에서 첫 번째 정적 사이트 빌드를 참조하세요.

1. 정적 웹앱 배포 토큰 값으로 `AZURE_STATIC_WEB_APPS_API_TOKEN`이라는 비밀을 만듭니다. 배포 토큰을 찾는 방법을 알아보려면 Azure 설명서의 [Azure Static Web Apps에서 배포 토큰 재설정](https://docs.microsoft.com/azure/static-web-apps/deployment-token-management)을 참조하세요.

## 워크플로 만들기

필수 구성 요소를 완료한 후에는 워크플로 만들기를 진행할 수 있습니다.

다음 예제 워크플로에서는 `main` 분기에 푸시가 있거나 `main` 대상으로 하는 끌어오기 요청이 열리거나 동기화되거나 다시 열릴 때 Azure 정적 웹앱을 빌드하고 배포하는 방법을 보여 줍니다. 또한 워크플로는 `main`을 대상으로 하는 끌어오기 요청이 닫힐 때 해당하는 사전 프로덕션 배포를 해제합니다.

워크플로 `env` 키에서 다음 값을 바꿉니다.
* `APP_LOCATION`을 클라이언트 코드의 위치로 바꿉니다.
* `API_LOCATION`을 API 원본 코드의 위치로 바꿉니다. 
`API_LOCATION`이 관련이 없으면 변수와 변수가 사용되는 행을 삭제할 수 있습니다.
* `OUTPUT_LOCATION`을 클라이언트 코드 빌드 출력의 위치로 바꿉니다.

이러한 값에 대한 자세한 내용은 Azure 설명서의 [Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/build-configuration?tabs=github-actions)에 대한 빌드 구성을 참조하세요.

```yaml copy
# 이 워크플로는 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@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"
```

## 추가 참고 자료

* 원래의 워크플로 템플릿은 [`azure-staticwebapp.yml`](https://github.com/actions/starter-workflows/blob/main/deployments/azure-staticwebapp.yml)을 GitHub Actions `starter-workflows` 리포지토리에서 참조하세요.
* 웹앱을 배포하는 데 사용되는 작업은 공식 Azure [`Azure/static-web-apps-deploy`](https://github.com/Azure/static-web-apps-deploy) 작업입니다.
* Azure 배포하는 GitHub 작업 워크플로에 대한 자세한 예제는 [actions-workflow-samples](https://github.com/Azure/actions-workflow-samples) 리포지토리를 참조하세요.