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

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

참고 항목

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

필수 조건

Azure 구독 및 GitHub 계정

참고 항목

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

배포 자격 증명 생성

Azure CLI에서 az ad sp create-for-rbac 명령을 사용하여 서비스 주체를 만듭니다. 이 명령은 Azure Portal에서 Azure Cloud Shell을 사용하거나 사용해 보세요 단추를 선택하여 실행합니다.

az ad sp create-for-rbac --name "myML" --role contributor \
                            --scopes /subscriptions/<subscription-id>/resourceGroups/<group-name> \
                            --json-auth

매개 변수 --json-auth 는 Azure CLI 버전 >= 2.51.0에서 사용할 수 있습니다. 사용 중단 경고와 함께 사용하기 --sdk-auth 이전 버전입니다.

위의 예시에서 자리 표시자를 구독 ID, 리소스 그룹 이름 및 앱 이름으로 바꿉니다. 출력은 아래와 비슷한 App Service 앱에 대한 액세스를 제공하는 역할 할당 자격 증명이 있는 JSON 개체입니다. 나중에 사용할 수 있도록 이 JSON 개체를 복사합니다.

  {
    "clientId": "<GUID>",
    "clientSecret": "<GUID>",
    "subscriptionId": "<GUID>",
    "tenantId": "<GUID>",
    (...)
  }

GitHub 비밀 구성

  1. GitHub에서 리포지토리로 이동합니다.

  2. 탐색 메뉴에서 설정으로 이동합니다.

  3. 보안 > 비밀 및 변수 > 작업을 선택합니다.

    Screenshot of adding a secret

  4. 새 리포지토리 비밀을 선택합니다.

  5. Azure CLI 명령의 전체 JSON 출력을 비밀의 값 필드에 붙여넣습니다. 비밀 이름을 AZURE_CREDENTIALS으로 지정합니다.

  6. 비밀 추가를 선택합니다.

워크플로 추가

  1. GitHub 리포지토리에 대한 작업으로 이동합니다.

    GitHub Actions menu item

  2. 워크플로 설정을 직접 선택합니다.

  3. 워크플로 파일의 섹션 뒤의 on: 모든 항목을 삭제합니다. 예를 들어 다시 기본 워크플로는 다음과 같습니다.

    name: CI
    
    on:
        push:
            branches: [ main ]
    
  4. 워크플로 이름을 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@v1
          with:
              creds: ${{ secrets.AZURE_CREDENTIALS }}
    
  5. Azure CLI 작업을 사용하여 Blob Storage에 코드를 업로드하고 CDN 엔드포인트를 제거합니다. az storage blob upload-batch의 경우 자리 표시자를 스토리지 계정 이름으로 바꿉니다. 스크립트가 컨테이너에 $web 업로드됩니다. 의 경우 az cdn endpoint purge자리 표시자를 CDN 프로필 이름, CDN 엔드포인트 이름 및 리소스 그룹으로 바꿉니다. CDN 제거 속도를 높이기 위해 옵션을 az cdn endpoint purge추가할 --no-wait 수 있습니다. 보안을 강화하려면 스토리지 계정 키를 사용하여 --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"
    
  6. Azure에서 로그아웃하는 작업을 추가하여 워크플로를 완성합니다. 완료된 워크플로는 다음과 같습니다. 파일이 리포지토리의 폴더에 .github/workflows 표시됩니다.

    name: Blob storage website CI
    
    on:
        push:
            branches: [ main ]
    
    jobs:
      build:
        runs-on: ubuntu-latest
        steps:
        - uses: actions/checkout@v3
        - uses: azure/login@v1
          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()
    

배포 검토

  1. GitHub 리포지토리에 대한 작업으로 이동합니다.

  2. 첫 번째 결과를 열어 워크플로 실행에 대한 자세한 로그를 확인합니다.

    Log of GitHub Actions run

리소스 정리

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

다음 단계