연습 - 워크플로에 Bicep 배포 동작 추가

완료됨

기본 워크플로를 만들었으며 연결할 Azure 및 GitHub 환경을 구성했습니다. 이제 웹 사이트의 Bicep 파일을 워크플로에서 Azure에 배포할 준비가 되었습니다.

이 연습에서는 다음을 수행합니다.

  • 리포지토리에 Bicep 파일을 추가합니다.
  • 워크플로 단계를 추가하여 실행기의 파일 시스템에 리포지토리 소스 코드를 다운로드합니다.
  • Azure에 로그인하는 워크플로 단계를 추가합니다.
  • Bicep 파일을 배포하는 워크플로 단계를 추가합니다.
  • 워크플로를 다시 실행하고 웹 사이트가 성공적으로 배포되었는지 확인합니다.

GitHub 리포지토리에 웹 사이트의 Bicep 파일 추가

환경 및 구성에 따라 웹 사이트 리소스의 다양한 구성을 배포하는 데 사용할 수 있는 웹 사이트의 Bicep 파일을 이미 준비했습니다. 여기서는 리포지토리에 Bicep 파일을 추가합니다.

  1. Visual Studio Code 탐색기를 엽니다.

  2. 리포지토리의 루트에 deploy 폴더를 만듭니다.

  3. 배포 폴더에서 main.bicep이라는 이름으로 새 파일을 만듭니다. deploy 폴더 내에 파일을 만들어야 합니다.

    Screenshot of the Visual Studio Code Explorer, with the main dot bicep file highlighted and located in the deploy folder.

  4. 다음 코드를 main.bicep 파일에 복사합니다.

    @description('The Azure region into which the resources should be deployed.')
    param location string = resourceGroup().location
    
    @description('The type of environment. This must be nonprod or prod.')
    @allowed([
      'nonprod'
      'prod'
    ])
    param environmentType string
    
    @description('A unique suffix to add to resource names that need to be globally unique.')
    @maxLength(13)
    param resourceNameSuffix string = uniqueString(resourceGroup().id)
    
    var appServiceAppName = 'toy-website-${resourceNameSuffix}'
    var appServicePlanName = 'toy-website-plan'
    var toyManualsStorageAccountName = 'toyweb${resourceNameSuffix}'
    
    // Define the SKUs for each component based on the environment type.
    var environmentConfigurationMap = {
      nonprod: {
        appServicePlan: {
          sku: {
            name: 'F1'
            capacity: 1
          }
        }
        toyManualsStorageAccount: {
          sku: {
            name: 'Standard_LRS'
          }
        }
      }
      prod: {
        appServicePlan: {
          sku: {
            name: 'S1'
            capacity: 2
          }
        }
        toyManualsStorageAccount: {
          sku: {
            name: 'Standard_ZRS'
          }
        }
      }
    }
    
    var toyManualsStorageAccountConnectionString = 'DefaultEndpointsProtocol=https;AccountName=${toyManualsStorageAccount.name};EndpointSuffix=${environment().suffixes.storage};AccountKey=${toyManualsStorageAccount.listKeys().keys[0].value}'
    
    resource appServicePlan 'Microsoft.Web/serverfarms@2023-12-01' = {
      name: appServicePlanName
      location: location
      sku: environmentConfigurationMap[environmentType].appServicePlan.sku
    }
    
    resource appServiceApp 'Microsoft.Web/sites@2023-12-01' = {
      name: appServiceAppName
      location: location
      properties: {
        serverFarmId: appServicePlan.id
        httpsOnly: true
        siteConfig: {
          appSettings: [
            {
              name: 'ToyManualsStorageAccountConnectionString'
              value: toyManualsStorageAccountConnectionString
            }
          ]
        }
      }
    }
    
    resource toyManualsStorageAccount 'Microsoft.Storage/storageAccounts@2023-05-01' = {
      name: toyManualsStorageAccountName
      location: location
      kind: 'StorageV2'
      sku: environmentConfigurationMap[environmentType].toyManualsStorageAccount.sku
    }
    
  5. 파일의 변경 내용을 저장합니다.

  6. Visual Studio Code 터미널에서 다음 코드를 실행하여 변경 내용을 스테이징하고, 변경 내용을 커밋하고, 변경 내용을 리포지토리로 푸시합니다.

    git add deploy/main.bicep
    git commit -m 'Add Bicep file'
    git push
    

워크플로 단계 바꾸기

다음으로 워크플로 정의를 업데이트하여 Bicep 파일을 Azure에 배포합니다.

  1. Visual Studio Code에서 .github/workflows/workflow.yml 파일을 엽니다.

  2. 파일 on: 맨 위에 섹션을 추가 permissions: 합니다jobs:.

    name: deploy-toy-website
    
    on: [workflow_dispatch]
    
    permissions:
      id-token: write
      contents: read
    
    jobs:
    

    이렇게 변경하면 워크플로에서 워크로드 ID를 사용할 수 있습니다.

  3. say-hello 작업의 이름을 deploy로 바꿉니다.

    jobs:
      deploy:
        runs-on: ubuntu-latest
        steps:
    
  4. 워크플로 정의에서 placeholder 단계를 제거하려면 파일의 아래쪽 두 줄을 삭제합니다.

  5. 첫 번째 단계로 코드를 체크 아웃하는 작업을 실행기의 파일 시스템에 추가합니다. 파일 하단에서 새 단계를 추가합니다.

    jobs:
      deploy:
        runs-on: ubuntu-latest
        steps:
        - uses: actions/checkout@v3
    

    참고

    이 코드를 이 모듈에서 복사하여 붙여넣는 것보다 직접 입력하는 것이 좋습니다. 파일의 들여쓰기를 주의해야 합니다. 들여쓰기가 올바르지 않은 경우 YAML 파일이 유효하지 않습니다. Visual Studio Code는 물결 모양의 선을 표시하여 오류를 나타냅니다.

  6. 방금 추가한 단계 아래에서 Azure 환경에 로그인하는 작업을 추가합니다. 이 작업은 이전에 정의한 비밀을 사용하여 워크로드 ID를 통해 로그인합니다.

    jobs:
      deploy:
        runs-on: ubuntu-latest
        steps:
        - uses: actions/checkout@v3
        - uses: azure/login@v1
          with:
            client-id: ${{ secrets.AZURE_CLIENT_ID }}
            tenant-id: ${{ secrets.AZURE_TENANT_ID }}
            subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
    
  7. 방금 추가한 단계 아래에서 Bicep 배포를 수행하는 또 다른 단계를 추가합니다.

    jobs:
      deploy:
        runs-on: ubuntu-latest
        steps:
        - uses: actions/checkout@v3
        - uses: azure/login@v1
          with:
            client-id: ${{ secrets.AZURE_CLIENT_ID }}
            tenant-id: ${{ secrets.AZURE_TENANT_ID }}
            subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
        - uses: azure/arm-deploy@v1
          with:
            deploymentName: ${{ github.run_number }}
            resourceGroupName: ${{ env.AZURE_RESOURCEGROUP_NAME }}
            template: ./deploy/main.bicep
            parameters: environmentType=${{ env.ENVIRONMENT }}
    

    이 작업은 github.run_number 기본 환경 변수를 사용하여 Azure에 있는 배포의 이름도 지정합니다. 또한 리소스 그룹 이름에 대해 환경 변수를 사용하고 Bicep 파일에 있는 environmentType 매개 변수를 사용합니다.

  8. 워크플로 파일 상단의 permissions:jobs 사이에 이 변수와 값을 추가합니다.

    name: deploy-toy-website
    
    on: [workflow_dispatch]
    
    permissions:
      id-token: write
      contents: read
    
    env:
        AZURE_RESOURCEGROUP_NAME: ToyWebsite
        ENVIRONMENT: nonprod
    
    jobs:
    
  9. 파일의 변경 내용을 저장합니다. 파일은 다음 예제와 비슷합니다.

    name: deploy-toy-website
    
    on: [workflow_dispatch]
    
    permissions:
      id-token: write
      contents: read
    
    env:
        AZURE_RESOURCEGROUP_NAME: ToyWebsite
        ENVIRONMENT: nonprod
    
    jobs:
      deploy:
        runs-on: ubuntu-latest
        steps:
        - uses: actions/checkout@v3
        - uses: azure/login@v1
          with:
            client-id: ${{ secrets.AZURE_CLIENT_ID }}
            tenant-id: ${{ secrets.AZURE_TENANT_ID }}
            subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
        - uses: azure/arm-deploy@v1
          with:
            deploymentName: ${{ github.run_number }}
            resourceGroupName: ${{ env.AZURE_RESOURCEGROUP_NAME }}
            template: ./deploy/main.bicep
            parameters: environmentType=${{ env.ENVIRONMENT }}
    
  10. Visual Studio Code 터미널에서 변경 내용을 스테이징하고 리포지토리에 커밋한 후 Azure Repos에 푸시합니다.

    git add .
    git commit -m 'Add Azure CLI tasks to workflow'
    git push
    

워크플로 실행

이제 워크플로를 실행할 준비가 되었습니다.

  1. 브라우저에서 Actions>deploy-toy-website를 선택하여 워크플로를 엽니다.

  2. 워크플로 실행>워크플로 실행을 선택합니다.

  3. 워크플로의 새 실행이 실행 목록에 표시됩니다. 표시되지 않으면 브라우저 페이지를 새로 고칩니다.

  4. 실행 중인 워크플로를 선택하여 실행의 세부 정보를 확인합니다.

    실행이 끝날 때까지 기다립니다.

  5. 배포 작업을 선택합니다.

    Screenshot of the GitHub interface showing the run page, with the deploy job highlighted.

  6. azure/arm-deploy@v1 실행을 선택합니다. 그러면 작업 세부 정보가 표시됩니다.

  7. 작업 세부 정보에서 azure/arm-deploy@v1 실행을 선택합니다.

    Screenshot of the GitHub interface showing the workflow log, with the 'environment variables' highlighted.

    이 단계에서는 워크플로 파일에 추가한 환경 변수를 사용합니다.

  8. 나머지 워크플로 출력을 검사합니다.

    워크플로가 성공적인 배포를 표시합니다.

배포 확인

  1. Azure Portal로 이동합니다.

  2. 왼쪽 메뉴에서 리소스 그룹을 선택합니다.

  3. ToyWebsite를 선택합니다.

  4. 개요에서 배포 상태를 확인합니다. 성공한 배포 하나가 표시될 것입니다.

    Screenshot of the Azure portal that shows the resource group with one successful deployment.

  5. 1 성공 링크를 선택하여 배포의 세부 정보를 확인합니다.

    Screenshot of the Azure portal that shows the resource group deployment history, with the deployment highlighted.

    github.run_number 환경 변수로 배포의 이름을 지정했으므로 배포의 이름이 GitHub Actions의 워크플로 실행 수와 일치합니다.

  6. 배포된 리소스를 확인하려면 배포를 선택합니다. 배포를 확장하고 자세한 정보를 보려면 배포 세부 정보를 선택합니다. 이 경우에는 스토리지 계정, Azure App Service 요금제, 앱이 있습니다.

    Screenshot of the Azure portal that shows the resource group deployment details, with the App Service resources highlighted.