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을 사용하거나 사용해 보세요 단추를 선택하여 실행합니다.

자리 표시자 myStaticSite를 Azure Storage에서 호스팅되는 사이트 이름으로 바꿉니다.

   az ad sp create-for-rbac --name {myStaticSite} --role contributor --scopes /subscriptions/{subscription-id}/resourceGroups/{resource-group} --sdk-auth

예제에서 자리 표시자를 구독 ID 및 리소스 그룹 이름으로 바꿉니다. 출력은 스토리지 계정에 대한 액세스를 제공하는 역할 할당 자격 증명이 있는 JSON 개체입니다. 나중에 사용할 수 있도록 이 JSON 개체를 복사합니다.

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

중요

항상 최소한의 액세스 권한을 부여하는 것이 좋습니다. 이전 예의 범위는 전체 리소스 그룹이 아닌 특정 App Service 앱으로 제한되어 있습니다.

GitHub 비밀 구성

  1. GitHub에서 리포지토리를 찾습니다.

  2. 설정 > 비밀 > 새 비밀을 선택합니다.

  3. Azure CLI 명령의 전체 JSON 출력을 비밀의 값 필드에 붙여넣습니다. 비밀 이름을 지정합니다(예: AZURE_CREDENTIALS).

    나중에 워크플로 파일을 구성할 때 이 비밀을 Azure 로그인 작업의 creds 입력에 사용합니다. 예를 들면 다음과 같습니다.

    - uses: azure/login@v1
    with:
        creds: ${{ secrets.AZURE_CREDENTIALS }}
    

워크플로 추가

  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@v2
        - 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 제거 속도를 높이려면 --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"
    
  6. Azure에서 로그아웃하는 작업을 추가하여 워크플로를 완성합니다. 완성된 워크플로는 다음과 같습니다. 파일이 리포지토리의 .github/workflows 폴더에 표시됩니다.

    name: Blob storage website CI
    
    on:
        push:
            branches: [ main ]
    
    jobs:
      build:
        runs-on: ubuntu-latest
        steps:
        - uses: actions/checkout@v2
        - 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 리포지토리를 삭제하여 배포한 리소스를 정리합니다.

다음 단계