GitHub Actions 워크플로를 사용하여 Azure Storage에 정적 웹 사이트 배포

2025-02-25

워크플로를 사용하여 정적 사이트를 Azure Storage 계정에 배포하여 GitHub Actions를 시작합니다. GitHub Actions 워크플로를 설정한 후에는 사이트 코드를 변경할 때 GitHub에서 Azure로 사이트를 자동으로 배포할 수 있습니다.

참고 항목

Azure Static Web Apps를 사용하는 경우 GitHub Actions 워크플로를 수동으로 설정할 필요가 없습니다. Azure Static Web Apps는 자동으로 GitHub Actions 워크플로를 만듭니다.

필수 조건

Azure 구독 및 GitHub 계정

활성 구독이 있는 Azure 계정. 체험 계정을 만듭니다.
정적 웹 사이트 코드가 포함된 GitHub 리포지토리. GitHub 계정이 없는 경우 무료로 등록하세요.
Azure Storage에서 호스팅되는 정적 웹 사이트. 자세한 내용은 Azure Storage에서 정적 웹 사이트 호스트를 참조하세요. 이 예를 수행하려면 Azure CDN도 배포해야 합니다.

참고 항목

CDN(콘텐츠 전송 네트워크)을 사용하여 전 세계 사용자의 지연 시간을 줄이고 스토리지 계정에 대한 트랜잭션 수를 줄이는 것이 일반적입니다. 클라우드 기반 스토리지 서비스에 정적 콘텐츠를 배포하면 잠재적으로 비용이 많이 드는 컴퓨팅 인스턴스의 필요성이 줄어들 수 있습니다. 자세한 내용은 정적 콘텐츠 호스팅 패턴을 참조하세요.

OIDC에서 Azure 로그인 작업을 사용하려면 Microsoft Entra 애플리케이션 또는 사용자 할당 관리 ID에서 페더레이션 ID 자격 증명을 구성해야 합니다.

옵션 1: Microsoft Entra 애플리케이션

Azure Portal, Azure CLI 또는 Azure PowerShell에서 서비스 주체를 사용하여 Microsoft Entra 애플리케이션을 만듭니다.
클라이언트 ID, 구독 ID 및 디렉터리(테넌트) ID의 값을 복사하여 나중에 GitHub Actions 워크플로에서 사용합니다.
Azure Portal, Azure CLI 또는 Azure PowerShell을 통해 서비스 주체에 적절한 역할을 할당합니다.
GitHub Actions에서 발급한 토큰을 GitHub 리포지토리에 신뢰하도록 Microsoft Entra 애플리케이션 에서 페더레이션 ID 자격 증명을 구성합니다.

옵션 2: 사용자 할당 관리 ID

사용자 할당 관리 ID 만들기의 지침에 따라 만듭니다.
클라이언트 ID, 구독 ID 및 디렉터리(테넌트) ID의 값을 복사하여 나중에 GitHub Actions 워크플로에서 사용합니다.
사용자 할당 관리 ID에 적절한 역할을 할당합니다.
GitHub Actions에서 발급한 토큰을 GitHub 리포지토리에 신뢰하도록 사용자 할당 관리 ID에서 페더레이션 ID 자격 증명을 구성합니다.

GitHub 비밀 구성

OpenID Connect
서비스 주체

로그인 작업에 애플리케이션의 클라이언트 ID, 디렉터리(테넌트) ID 및 구독 ID 를 제공해야 합니다. 이러한 값은 워크플로에서 직접 제공하거나 GitHub 비밀에 저장하고 워크플로에서 참조할 수 있습니다. 값을 GitHub 비밀로 저장하는 것이 더 안전한 옵션입니다.

GitHub에서 리포지토리로 이동합니다.
보안 > 비밀 및 변수 > 작업을 선택합니다.
새 리포지토리 비밀을 선택합니다.

참고 항목

공용 리포지토리에서 워크플로 보안을 강화하려면 리포지토리 비밀 대신 환경 비밀을 사용합니다. 환경에 승인이 필요한 경우 필수 검토자 중 한 명이 승인할 때까지 작업에서 환경 비밀에 액세스할 수 없습니다.

AZURE_CLIENT_ID, AZURE_TENANT_ID 및 AZURE_SUBSCRIPTION_ID에 대한 비밀을 만듭니다. GitHub 비밀에 대한 Microsoft Entra 애플리케이션 또는 사용자 할당 관리 ID에서 다음 값을 복사합니다.

GitHub 비밀	Microsoft Entra 애플리케이션 또는 사용자 할당 관리 ID
AZURE_CLIENT_ID	클라이언트 ID
AZURE_SUBSCRIPTION_ID	구독 ID
AZURE_TENANT_ID	디렉터리(테넌트) ID

참고 항목

보안상의 이유로 워크플로에 직접 값을 전달하는 대신 GitHub 비밀을 사용하는 것이 좋습니다.

GitHub에서 리포지토리로 이동합니다.
탐색 메뉴에서 설정으로 이동합니다.
보안 > 비밀 및 변수 > 작업을 선택합니다.
새 리포지토리 비밀을 선택합니다.
Azure CLI 명령의 전체 JSON 출력을 비밀의 값 필드에 붙여넣습니다. 비밀 이름을 AZURE_CREDENTIALS으로 지정합니다.
비밀 추가를 선택합니다.

워크플로 추가

OpenID Connect
서비스 주체

GitHub 리포지토리에 대한 작업으로 이동합니다.
워크플로 직접 설정을 선택합니다.
워크플로 파일의 on: 섹션 뒤에 있는 모든 항목을 삭제합니다. 예를 들어 나머지 워크플로는 다음과 같습니다.
```
name: CI with OpenID Connect

on:
    push:
        branches: [ main ]
```

권한 섹션을 추가합니다.

name: CI with OpenID Connect

on:
    push:
        branches: [ main ]

permissions:
      id-token: write
      contents: read

체크 아웃 및 로그인 작업을 추가합니다. 이러한 작업은 사이트 코드를 체크 아웃하고 이전에 만든 GitHub 비밀을 사용하여 Azure에서 인증합니다.

name: CI with OpenID Connect

on:
    push:
        branches: [ main ]

permissions:
      id-token: write
      contents: read

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: azure/login@v2
      with:
      client-id: ${{ secrets.AZURE_CLIENT_ID }}
      tenant-id: ${{ secrets.AZURE_TENANT_ID }}
      subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}

Azure CLI 작업을 사용하여 Blob Storage에 코드를 업로드하고 CDN 엔드포인트를 제거합니다. az storage blob upload-batch의 경우 자리 표시자를 스토리지 계정 이름으로 바꿉니다. 스크립트는 $web 컨테이너에 업로드됩니다. az cdn endpoint purge의 경우 자리 표시자를 CDN 프로필 이름, CDN 엔드포인트 이름 및 리소스 그룹으로 바꿉니다. CDN 제거 속도를 높이려면 --no-wait 옵션을 az cdn endpoint purge에 추가할 수 있습니다. 보안을 강화하려면 스토리지 계정 키를 사용하여 --account-key 옵션도 추가할 수 있습니다.
```
    - name: Upload to blob storage
      uses: azure/CLI@v1
      with:
        inlineScript: |
            az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME>  --auth-mode key -d '$web' -s .
    - name: Purge CDN endpoint
      uses: azure/CLI@v1
      with:
        inlineScript: |
           az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"
```

Azure에서 로그아웃하는 작업을 추가하여 워크플로를 완성합니다. 완성된 워크플로는 다음과 같습니다. 파일이 리포지토리의 .github/workflows 폴더에 표시됩니다.

name: CI with OpenID Connect

on:
    push:
        branches: [ main ]

permissions:
      id-token: write
      contents: read

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: azure/login@v2
      with:
      client-id: ${{ secrets.AZURE_CLIENT_ID }}
      tenant-id: ${{ secrets.AZURE_TENANT_ID }}
      subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}

    - name: Upload to blob storage
      uses: azure/CLI@v1
      with:
        inlineScript: |
            az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME> --auth-mode key -d '$web' -s .
    - name: Purge CDN endpoint
      uses: azure/CLI@v1
      with:
        inlineScript: |
           az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"

  # Azure logout
    - name: logout
      run: |
            az logout
      if: always()

GitHub 리포지토리에 대한 작업으로 이동합니다.
워크플로 직접 설정을 선택합니다.
워크플로 파일의 on: 섹션 뒤에 있는 모든 항목을 삭제합니다. 예를 들어 나머지 워크플로는 다음과 같습니다.
```
name: CI

on:
    push:
        branches: [ main ]
```
워크플로 이름을 Blob storage website CI로 바꾸고, 체크 아웃 및 로그인 작업을 추가합니다. 이러한 작업은 사이트 코드를 체크 아웃하고 이전에 만든 AZURE_CREDENTIALS GitHub 비밀을 사용하여 Azure에서 인증합니다.
```
name: Blob storage website CI

on:
    push:
        branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: azure/login@v2
      with:
          creds: ${{ secrets.AZURE_CREDENTIALS }}
```
Azure CLI 작업을 사용하여 Blob Storage에 코드를 업로드하고 CDN 엔드포인트를 제거합니다. az storage blob upload-batch의 경우 자리 표시자를 스토리지 계정 이름으로 바꿉니다. 스크립트는 $web 컨테이너에 업로드됩니다. az cdn endpoint purge의 경우 자리 표시자를 CDN 프로필 이름, CDN 엔드포인트 이름 및 리소스 그룹으로 바꿉니다. CDN 제거 속도를 높이려면 --no-wait 옵션을 az cdn endpoint purge에 추가할 수 있습니다. 보안을 강화하려면 스토리지 계정 키를 사용하여 --account-key 옵션도 추가할 수 있습니다.
```
    - name: Upload to blob storage
      uses: azure/CLI@v1
      with:
        inlineScript: |
            az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME>  --auth-mode key -d '$web' -s .
    - name: Purge CDN endpoint
      uses: azure/CLI@v1
      with:
        inlineScript: |
           az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"
```

name: Blob storage website CI

on:
    push:
        branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: azure/login@v2
      with:
          creds: ${{ secrets.AZURE_CREDENTIALS }}

    - name: Upload to blob storage
      uses: azure/CLI@v1
      with:
        inlineScript: |
            az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME> --auth-mode key -d '$web' -s .
    - name: Purge CDN endpoint
      uses: azure/CLI@v1
      with:
        inlineScript: |
           az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"

  # Azure logout
    - name: logout
      run: |
            az logout
      if: always()

배포 검토

GitHub 리포지토리에 대한 작업으로 이동합니다.
첫 번째 결과를 열어 워크플로 실행에 대한 자세한 로그를 확인합니다.

리소스 정리

고정적인 웹 사이트 및 GitHub 리포지토리가 더 이상 필요하지 않은 경우 리소스 그룹과 GitHub 리포지토리를 삭제하여 배포한 리소스를 정리합니다.

다음 단계

Azure Static Web Apps에 대해 알아보기

다음을 통해 공유

GitHub Actions 워크플로를 사용하여 Azure Storage에 정적 웹 사이트 배포

필수 조건

배포 자격 증명 생성

GitHub 비밀 구성

워크플로 추가

배포 검토

리소스 정리

다음 단계

피드백

추가 리소스