CloudFront, S3 배포 자동화

1. 문제 정의

지난 포스팅(링크)를 통해 CloudFront, S3, Route53을 통한 Vue 프로젝트를 배포하는 방법에 대해서 알아보았습니다. 하지만, 프로젝트를 진행할 수록 배포해야 하는 횟수가 늘어나게 되었고, 수동으로 배포하는 방식은 개발 시간 지연에 큰 영향을 미치고 있습니다.

이번 포스팅에서는 GitHub Action을 활용한 프로젝트 배포 자동화에 대해 알아보도록 하겠습니다.

2. GitHub Actions

우선 배포 코드부터 알아보도록 하겠습니다.

name: Deploy to CloudFront

// dev 브랜치에 push될 경우 github action이 실행됩니다. 
on:
  push:
    branches: [ "dev" ]


jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

// env 파일을 설정해줍니다.
      - name: Set .env file
        run: |
          touch .env
          echo "${{ secrets.VUE_SECRETS }}" > .env

// 프로젝트를 빌드해줍니다. 
      - name: Build project
        run: |
          yarn install
          yarn build

// s3와 cloudfront에 접근하기 위해 access key와 secret kye를 통해 인증을 해줍니다. 
      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ${{ secrets.AWS_REGION }}

// s3에 프로젝트를 업로드합니다. 
      - name: Upload to S3 test
        run: |
          aws s3 sync ./dist/ s3://${{ secrets.S3_BUCKET_NAME }} --region ${{ secrets.AWS_REGION }}

// cloudfront cache를 무효화 해줍니다.
      - name: Invalidate CloudFront Cache
        run: |
          aws cloudfront create-invalidation --distribution-id ${{ secrets.DISTRIBUTION_ID }} --paths "/*"

cloudfront의 배포 자동화의 경우, 한번 배포를 해 놓은 경우 매우 편리하게 진행할 수 있습니다.

2 - 1. CloudFront 캐시 무효화

이번 프로젝트를 진행하며, 시간을 많이 뺏긴 부분입니다.

CloudFront는 여러가지 이점을 위해 캐시를 사용합니다.

몇 가지 이점을 요약해보겠습니다.

1. 성능 향상: 캐시를 사용하면 콘텐츠가 사용자에게 더 가까운 위치에서 제공됩니다. 이는 웹 페이지 로딩 속도를 빠르게 하고, 사용자 경험을 향상시킵니다.
2. 트래픽 감소: 캐시를 사용하면 원본 서버에 대한 요청이 감소합니다. 이는 원본 서버의 부하를 줄이고, 트래픽 비용을 절감할 수 있습니다.
3. 가용성 향상: 캐시된 콘텐츠는 원본 서버에 문제가 생겨도 사용자에게 계속 제공될 수 있습니다. 이는 서비스의 가용성을 높이는 데 도움이 됩니다.

캐싱 덕분에 이러한 이점을 가질 수 있지만, 사용자가 명시적으로 캐시무효화를 해주지 않을 경우, 즉각적인 배포가 일어나지 않을 수 있습니다.

따라서, 배포 자동화 마지막 단계에서 모든 디렉토리에 대해 캐시 무효화를 해주는 작업이 필요합니다.