[Vite] CRA를 사용하여 github actions를 통해 배포하던 프로젝트를 Vite를 사용하여 배포하기

기존에는 CRA를 사용하여 AWS S3에 github actions를 이용해 배포 자동화를 진행하였습니다.
이때, 적절한 yaml 파일을 활용하여 배포 과정을 성공적으로 수행하였습니다.

name: CI/CD

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Set up Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: deploy to s3
        uses: jakejarvis/s3-sync-action@master
        with:
          args: --delete
        env:
          AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_REGION: 'ap-northeast-2'
          SOURCE_DIR: 'build'

그런데 새로운 프로젝트를 진행하면서 Vite를 사용해 AWS S3에 github actions를 이용한 배포 자동화를 해야 하는 상황이 생겨 이전의 경험에 기반하여 동일한 yaml파일을 사용했지만

deploy to S3 부분에서

The user-provided path build does not exist.

라는 오류가 발생하였고, 이로 인해 배포가 실패하였습니다.

해당 오류 메세지는 일반적으로 사용자가 지정한 경로(파일, 디렉토리, 작업 공간 등)가 존재하지 않음을 의미합니다.

이를 참고하여 코드를 재검토하고 수정한 결과, Deploy to s3의 환경 변수 SOURCE_DIR부분을 build에서 dist로 변경해야 함을 확인하였습니다.

name: CI/CD

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Set up Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: deploy to s3
        uses: jakejarvis/s3-sync-action@master
        with:
          args: --delete
        env:
          AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_REGION: 'ap-northeast-2'
          SOURCE_DIR: 'dist'

왜 이런 오류가 발생한 원인을 파악하기 위해 Vite와 CRA의 차이점을 확인해본 결과

Vite : 웹 개발의 전반적인 과정을 처리하는 완전한 빌드 도구
CRA : React 애플리케이션 생성 및 빌드에 특화된 도구

이 두 도구는 각각 다른 빌드 결과물을 생성하며, 이에 따라 빌드 폴더의 이름이 서로 다르게 설정되어 있었음을 확인할 수 있었습니다.