소개
이 가이드에서는 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 빌드 구성"을 참조하세요.
# 이 워크플로는 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 리포지토리를 참조하세요.