필수 조건
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 빌드 구성을 참조하세요.
# 이 워크플로는 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@v5
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@v5
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 리포지토리를 참조하세요.