logo

Github Actions로 간단한 Azure Static Web Page 배포

쉽고 편한 Github Actions

devops, azure

Github Actions은 Github 내부에서 CI/CD를 쉽게 만들어 사용할 수 있는 막강한 기능입니다.

현재 사내에서 사용하는 저장소가 Gitlab이라 Gitlab CI/CD는 많이 사용하나 Github Actions은 사용할 일이 개인적인 작업 말고는 없었습니다. 하지만 최근에 비즈니스적인 이유로 Github 혜택을 받게 되어 저장소를 조금씩 이전하고 있어서 드디어 Github Actions를 실무에서도 사용할 수 있게 되었습니다.

워낙 쉽고 편리하니 짧게나마 알아보겠습니다.

🤔 Github Actions이란?

Github에서 2018년에 공개되어 2019년 정식으로 릴리즈된 워크플로우 자동화 기능입니다.

이전에는 Travis-ci나 Circle-ci를 사용하여 빌드 및 테스트를 진행하는 게 일반적이었는데 이제는 사실상 특별한 일 없고서는 Github Actions만 사용하면 됩니다.

더군다나 Github Actions는 CD까지도 커버할 수 있어서 너무나도 유용합니다.

🚀 빠른 시작

GA-1 빠르게 시작하는 방법으로 우선 Github Actions를 사용할 해당 저장소로 이동한 뒤 상단 탭 리스트에 존재하는 Actions를 클릭하면 나오는 페이지에서 시작 워크플로우 설정을 스스로 코드를 작성할지 아니면 마켓 플레이스에서 원하는 워크플로우를 가져와 기본으로 사용할지만 선택해주면 됩니다.

✏️ yml 작성

Github Actions 관련 yml형식 파일들은 해당 저장소의 /.github/workflows/ 폴더로 저장되어 커밋됩니다.

아래는 Github에서 제공하는 샘플 yml파일 입니다.

# 이것은 Actions 시작에 도움이되는 기본 워크플로우입니다.

name: CI

# Action이 실행될 시점을 제어합니다.
on:
  # 마스터 브랜치에 대해서만 푸시 또는 풀 리퀘스트 이벤트에서 워크플로우를 트리거합니다.
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

  # Actions 탭에서 이 워크플로우를 수동으로 실행할 수 있게 허용합니다.
  workflow_dispatch:

# 워크플로우 실행은 순차 또는 병렬로 실행할 수 있는 하나 이상의 jobs으로 구성됩니다.
jobs:
  # 이 워크플로우에서는 "build"라는 하나의 job이 포함되어 있습니다.
  build:
    # job이 실행될 runner 타입입니다.
    runs-on: ubuntu-latest

    # steps는 job의 일부로 실행될 태스크의 순서를 나타냅니다.
    steps:
      # $GITHUB_WORKSPACE 에서 저장소를 체크아웃하여 job에서 액세스할 수 있도록 합니다.
      - uses: actions/checkout@v2

      # runners shell을 사용하여 하나의 커맨드를 실행합니다.
      - name: Run a one-line script
        run: echo Hello, world!

      # runners shell을 사용하여 여러 커맨드를 실행합니다.
      - name: Run a multi-line script
        run: |
          echo Add other actions to build,
          echo test, and deploy your project.

📦 마켓 플레이스

Github Actions의 가장 큰 장점은 오픈 소스로 공유할 수 있다는 점입니다. 이 말인즉, 이미 만들어진 Action을 가져다 쉽고 빠르게 자신만의 Action을 만들 수 있다는 말입니다. 벌써 6000개가 넘는 Action이 Github Marketplace에서 공유되고 있으며 우리는 필요할때마다 가져와 사용하거나 혹은 사용될 수 있게 공유할 수 있습니다.

☁️ Azure Action

Github Actions의 실사용 흐름은 마켓 플레이스에서 해당 서비스 Action을 가져와서 필요한 설정을 넣고 원하는 커맨드를 입력하면 보통 끝납니다. 물론 프로덕트가 거대해지고 사용하는 서비스가 많아진다면 Action 코드도 점점 더 길어지고 많은 파일들이 필요하게 되겠죠.

Azure에서는 Static Web Apps(preview)라는 서비스를 만들었습니다만 아직 프리뷰 버전이라서 버그가 많은 관계로 Storage와 CDN으로 배포하는 Action 코드를 작성해보겠습니다.

name: CD

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:
  upload:
    runs-on: ubuntu-latest
    steps:
      - name: Azure Login
        uses: azure/login@v1.1
        with:
          creds: ${{ secrets.AZURE_CREDENTIALS }}

      - name: Checkout
        uses: actions/checkout@v2

      - name: Azure CLI Action
        uses: Azure/cli@v1.0.0
        with:
          inlineScript: |
            az storage blob upload-batch --connection-string '${{ secrets.AZURE_CONNECTION_STRING }}' -s ./build -d '$web'
            az cdn endpoint purge --content-paths '/*' -g ${{ secrets.AZURE_RESOURCE_GROUP }} --profile-name ${{ secrets.AZURE_PROFILE_NAME }} -n ${{ secrets.AZURE_ENDPOINT}}

설명을 잠깐 해드리자면 먼저 Azure Login Action을 호출하여 사용자를 인증합니다. 그리고 Azure CLI Action으로 Static Web Page를 Azure Storage에 업로드한 후 Azure CDN 캐시를 초기화합니다.

여기서 눈여겨볼 점이 ${{ secrets. ... }} 라는 변수인데 이것들은 저장소의 상단 탭 중 Settings로 이동하면 Secrets 카테고리에서 선언할 수 있습니다.

✔️ 확인

Github Actions가 제대로 동작하고 있는지 확인해보려면 다시 해당 저장소 Actions 탭을 선택하면 관련 페이지로 이동합니다.

GA-2

그리고 자세한 진행 사항이나 설정값을 확인하기 위해선 리스트에 존재하는 커밋을 선택하면 됩니다.

💭 끝으로

이처럼 Github Actions는 강력한 마켓 플레이스를 기반으로 누구나 쉽고 빠르게 CI/CD를 만들 수 있습니다. 그러나 100% 무료 기능은 아닙니다. 그나마 Pubic 저장소는 무료이며 Private 저장소는 시간당, runner(OS)에 따라 가격이 책정됩니다. 이점 유의하시길 바라며 (사실 그리 큰 유의점은 아닙니다만…), 그럼 하나라도 더 자동화를 하여 생산성을 높여보시길 바랍니다. 😄