Github Actions로 배포 자동화하기

1. Github Actions를 활용하려면 프로젝트의 루트에 .github 폴더를 생성하고, 해당 폴더 내에 workflows 폴더를 생성해야 합니다. 그리고, 아래와 같이 .yml 파일을 생성해줍니다.
   
2. deploy.yml 파일에 다음과 같은 코드를 넣어줍니다.

name: Next.js deployment practice

on:
  push:
    branches: [main]

jobs:
  continuous-deployment:
    runs-on: ubuntu-latest
    steps:
      - name: Git Checkout
        uses: actions/checkout@v2

      - name: Use Node.js version 18.x
        uses: actions/setup-node@v2
        with:
          node-version: 18.x

      - name: Build
        run: |
          npm install
          npm run build

      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ${{ secrets.AWS_REGION }}

      - name: Deploy to S3
        run: aws s3 sync ./${{ secrets.BUILD_DIRECTORY }} ${{ secrets.AWS_S3_BUCKET_NAME }} --delete

      - name: CloudFront Invalidate Cache
        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.AWS_CLOUDFRONT_DISTRIBUTION_ID }} --paths '/*'

코드에 대한 간단한 설명은 다음과 같습니다.

• name: Github Actions에서 이 이름을 통해 어떤 배포 파일인지 구분합니다.
  저희는 Next.js deployment practice 라고 작성해 볼게요.

• on: workflow 파일 실행을 유발하는 작업입니다. 여기서는 Github의 main 브랜치에 코드가 Push 됐을 때 해당 .yml 파일을 실행한다는 의미입니다. main 브랜치의 코드가 변경(Push 혹은 Merge)되면 배포가 시작됩니다.

• jobs: 여러 단계(steps)로 구성되어 있으며, Github 내의 가상 인스턴스에서 실행됩니다. 현재 파일에서는 continuous-deployment라는 작업을 진행하는데 ubuntu 서버를 통해 실행하겠다(runs-on: ubuntu-latest)라는 의미가 됩니다.

• steps: jobs를 실행할 단계들이 나열되어 있습니다. name을 기준으로 설명드리면, 여기서 name은 본인이 이해하기 쉽게 임의로 작성하시면 됩니다. 아래에서 말하는 Action은 uses로 되어있는 경우 Github Marketplace에 작성된 명령어를 사용한 것이고, run으로 되어있는 경우 직접 명령어를 작성하는 경우입니다.

  • Git Checkout: checkout@v2 Action을 활용하여 github에 업로드된 소스 코드를 가져옵니다.

  • Use Node.js version 18.x: setup-node@v2 Action을 활용하여 노드 18.x 버전을 가상 인스턴스에 설치합니다.

  • Build: npm install과 npm run build 명령어를 실행합니다.

  • Configure AWS credentials: configure-aws-credentials@v1 Action을 활용하여 가상 인스턴스에서 AWS CLI를 통해 사용자 인증을 진행합니다. 이때 aws-access-key-id, aws-secret-access-key, aws-region을 입력해줍니다.

  • Deploy to S3: AWS CLI를 통해 빌드된 파일 및 폴더를 S3 버킷에 업로드합니다. 이때 sync는 동기화를 의미하며, --delete는 동기화하는 객체 내에 존재하지 않는 파일 및 폴더가 기존 객체(파일 및 폴더)에 있을 경우 자동으로 삭제한다는 의미입니다. 즉, 새롭게 변경한 코드에 불필요한 특정 파일(이미 이전에 배포된 파일)을 삭제한 경우, 배포 시 이를 인식하고 알아서 기존 파일을 삭제해준다는 의미입니다.

  • CloudFront Invalidate Cache: 기존 배포한 콘텐츠(캐시)를 삭제하고 S3에 새로 배포한 콘텐츠를 연결한다는 의미입니다. --distribution-id는 기존에 배포한 CloudFront 배포 id를 의미하며 --paths는 삭제할 캐시의 경로를 의미한다.

이때 .yml 파일에서 ${{ secrets.AWS_ACCESS_KEY_ID }}와 같이 변수를 입력하는 부분이 있습니다. 해당 값은 노출될 경우 보안상의 위험이 있기 때문에 변수로 숨겨놓은 것입니다. 해당 값을 github에 입력해보겠습니다. 먼저, 배포할 파일이 있는 Github 레포지토리로 이동 후 'Settings'를 클릭

사이드바에서 'Secrets and variables'의 'Actions'를 클릭합니다. 그리고 'New repository secret' 버튼을 클릭합니다.

이제 deploy.yml 파일에 있던 ${{ secrets.AWS_ACCESS_KEY_ID }}와 같은 형태의 비밀키를 이곳에 입력해 줍니다. ${{ secrets.AWS_ACCESS_KEY_ID }}라면 이전에 다운받았던 csv 파일에서 확인하실 수 있을텐데요. .yml 파일에 이와 같은 형태로 된 값들 'Name'과 'Secret'에 넣어주세요.

• AWS_ACCESS_KEY_ID: IAM 계정 생성 시 발급 받은 액세스 키입니다. 다운로드 받은 csv 파일에 있습니다.
• AWS_SECRET_ACCESS_KEY: IAM 계정 생성 시 발급 받은 시크릿 키입니다. 다운로드 받은 csv 파일에 있습니다.
• AWS_REGION: AWS 지역을 말합니다. 저희는 ap-northeast-2 로 입력해 줄게요.
• BUILD_DIRECTORY: S3에 업로드할 폴더를 말합니다. 저희의 경우 out 을 작성합니다.
• AWS_S3_BUCKET_NAME: S3 버킷의 이름을 의미합니다. 저희는 nextjs-blog-static 로 입력하였습니다.
• AWS_CLOUDFRONT_DISTRIBUTION_ID: CloudFront의 배포 ID입니다. AWS의 CloudFront 페이지로 이동하면 확인하실 수 있습니다.

이제 git push 후 변경 사항을 main 브랜치에 반영해봅니다. main 브랜치에 변경 사항이 감지되면 Github Actions에서 자동으로 배포를 진행합니다. 배포 상황은 Actions 탭에서 확인하실 수 있습니다. 배포가 완료되면 웹사이트에 접속해 변경 사항이 잘 반영됐는지 확인해주세요.