Vite 프로젝트 CI/CD 구축기

이전에 배포된 Vite 프로젝트를 자동으로 배포하기 위해 CI/CD 파이프라인을 구축하려고 합니다.
CI/CD 파이프라인이 없다면 아래의 작업을 수동으로 진행해야 합니다.

1. 작성된 프로젝트 빌드
2. 빌드된 프로젝트를 S3 버킷에 수동으로 업로드
3. CloudFront Cache Invalidate 작업

수동으로 해도 크게 복잡한 작업은 아니지만 굳이 여러 단계를 거쳐야 하는 작업을 수동으로 해야하나 생각과 사람의 손으로 하다보면 실수가 있을수도 있기에 자동화를 하는 편입니다. (Human disaster)

그리고 S3 와 CloudFront 를 활용해 배포했기 때문에 워크플로우도 단순한 편입니다. 그럼 진행했던 과정을 남겨보겠습니다.

과정

Github Repository Secrect

올려진 레포지토리에 시크릿을 등록해야합니다. 시크릿은 레포지토리의 Setting > Secrects And Variables 에 등록해줍니다.
등록해야할 시크릿은 아래 캡쳐된 네 가지의 시크릿 입니다. 이전에 IAM 을 설정한 사용자의 AccessKeyID 와 AccessKey 를 등록해주고, 버킷의 리전 (서울 리전이라 ap-northeast-2), CloudFront 의 배포 ID 를 등록해줍니다.

혹시 Distribution ID 가 어디있는지 모르시는 분들은 CloudFront 서비스에 들어가 목록 테이블을 확인 하시면 가장 좌측 컬럼에 있는 것을 확인할 수 있습니다.

Workflows 작성

시크릿을 다 작성했다면 워크플로우를 작성할 차례입니다. CI/CD 구축을 위해 Github actions 를 활용할 예정입니다.
프로젝트의 루트에서 .github/workflows/deploy.yml 을 작성해줍니다.

deploy.yml 의 내용은 아래의 코드를 참고해주세요.

name: CD
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout source code
        uses: actions/checkout@v2
      - name: Install dependencies
        run: yarn install
      - name: Build
        run: yarn build
      - name: S3 Deploy
        run: aws s3 sync ./dist s3://{버킷 이름을 넣어주세요}/ --acl bucket-owner-full-control
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_REGION: ${{ secrets.AWS_REGION }}
      - name: Invalidate CloudFront Cache
        uses: chetan/invalidate-cloudfront-action@master
        env:
          AWS_DISTRIBUTION: ${{ secrets.AWS_DISTRIBUTION_ID }}
          PATHS: "/index.html"
        continue-on-error: true

main 브랜치에 Push 되거나, main 브랜치에 Pull Request 이 될 경우 워크플로우가 실행됩니다.
배포 전략 혹은 깃 플로우에 따라서 해당 브랜치를 다르게 가져갈 수 있습니다.

주목해야 할 점은 S3 Deploy 입니다.

aws s3 sync ./dist s3://{버킷 이름을 넣어주세요}/ --acl bucket-owner-full-control

aws CLI 를 통해 s3 버킷에 빌드된 파일을 올립니다.
s3 에 꼭 자신의 버킷 이름을 넣어주세요.
./dist 는 빌드된 결과물들이 저장되는 폴더 입니다. Vite 프로젝트는 빌드된 결과물을 ./dist 폴더에 저장합니다. CRA 프로젝트는 ./build 에 저장하기 때문에 만약 CRA 프로젝트로 CI/CD 를 구축하신다면 해당 폴더명을 변경해주시기 바랍니다!

S3 에 빌드된 파일들이 올라간다면 마지막으로 Invalidate Cache 를 실행함으로 캐시 무효화를 시켜 배포가 완료됩니다.

마무리

사실 S3 + CloudFront 를 활용해 배포된 프론트엔드 프로젝트는 CI/CD 구축이 너무 쉽습니다. 워크플로우도 단순하고 레퍼런스도 넘쳐나기 때문입니다.
요즘은 Next.js 프로젝트를 어떻게 배포하는게 좋을까 하는 고민이 있습니다. 사실 Vercel 에 배포하는 것이 가장 단순하긴 하지만 AWS 환경에서는 어떤 방식으로 배포해야할지가 고민입니다.
이전에 Next 프로젝트를 EC2 위에 배포를 했었는데, 그때 배포하기 위해 아래와 같은 과정을 거쳤습니다.

1. 빌드
2. 빌드된 결과물을 S3 에 업로드
3. EC2 에 설치된 CodeDeploy Agent 를 통해 블루/그린 방식의 무중단 배포

처음 구축해본 방식이라 워낙 복잡했고, 다시 시도해보면서 과정을 정리해봐야할 것 같습니다.
EC2 배포 이외에 AWS Elastic Beanstalk, S3 + CloudFront 배포 등 다양한 방법이 있다는데, 만약 다음 Next 프로젝트를 배포해야 할 일이 있다면 다시 한번 공부해보고 찾아봐야 겠습니다.