Azure Static Web Apps에 배포

참고: GitHub 호스트 실행기는 현재 GitHub Enterprise Server에서 지원되지 않습니다. GitHub public roadmap에 예정된 향후 지원에 대해 자세히 알아볼 수 있습니다.

소개

이 가이드에서는 GitHub Actions을(를) 사용하여 웹앱을 빌드하고 Azure Static Web Apps에 배포하는 방법을 설명합니다.

Note

GitHub Actions 워크플로가 OIDC(OpenID Connect)를 지원하는 클라우드 공급자의 리소스에 액세스해야 하는 경우 클라우드 공급자에게 직접 인증하도록 워크플로를 구성할 수 있습니다. 이렇게 하면 이러한 자격 증명을 수명이 긴 비밀로 저장하지 않을 수 있고 다른 보안 이점을 제공할 수 있습니다. 자세한 내용은 "OpenID Connect를 사용한 보안 강화 정보"을 참조하세요. 및 "Azure에서 OpenID Connect 구성"을(를) 참조하세요.

필수 조건

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

배포 원본에 대한 ‘기타’ 옵션을 사용하여 Azure Static Web App을 만듭니다. 자세한 내용은 Azure 설명서의 "빠른 시작: Azure Portal에서 첫 번째 정적 사이트 빌드"를 참조하세요.
정적 웹앱 배포 토큰 값으로 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 빌드 구성"을 참조하세요.

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"

# 이 워크플로는 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 항목을 참조하세요.
웹앱을 배포하는 데 사용되는 작업은 공식 Azure Azure/static-web-apps-deploy 작업입니다.
Azure에 배포하는 GitHub Actions 워크플로에 대한 자세한 예시는 actions-workflow-samples 리포지토리를 참조하세요.

이 문서의 내용

소개

필수 조건

워크플로 만들기

추가 리소스