상황

Vite 기반의 React에서 만든 앱을 배포해 다른 사람들에게 보여줘야 하는 상황. 최대한 쉽게 배포할 수 있는 방법을 찾다 결국 Github pages를 사용하기 결정하였습니다.

Vite 공식 문서를 찾아보니 Github Actions를 이용해 배포하는 예제가 있었습니다. 문서의 가이드는 아래와 같습니다.

가이드

GitHub Pages

1단계

vite.config.js 파일 내 base 설정값을 적절하게 설정합니다.

만약 GitHub Pages를 통해 https://.github.io/이나 커스텀 도메인(예: www.example.com)에 배포하고자 한다면, base 설정값을 '/'로 지정해 주세요. 또는 base의 기본값이 '/'이기 때문에 설정에서 base를 제거해도 됩니다.

만약 https://.github.io//와 같은 형태로 배포하고자 한다면(예: 리포지토리가 https://github.com//인 경우), base 설정값을 '//'로 지정해 주세요.

2단계

리포지토리 설정 페이지에서 GitHub Pages 설정으로 이동한 후, 배포 소스를 "GitHub Actions"로 지정해 주세요. 이를 통해 프로젝트를 빌드하고 배포하는 워크플로우를 생성할 수 있습니다. 아래는 npm을 이용해 의존성을 설치하고 빌드하는 예시입니다:

# GitHub Pages에 정적 콘텐츠를 배포하기 위한 간단한 워크플로우
name: Deploy static content to Pages

on:
  # 기본 브랜치에 대한 푸시 이벤트 발생 시 실행
  push:
    branches: ['main']

  # Actions 탭에서 수동으로 워크플로우를 실행할 수 있도록 구성
  workflow_dispatch:

# GITHUB_TOKEN의 권한을 설정하여 GitHub Pages에 배포할 수 있도록 함
permissions:
  contents: read
  pages: write
  id-token: write

# 동시에 하나의 배포만 허용하도록 구성
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # 단순히 배포만 수행하기에 하나의 잡으로만 구성
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Set up Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - name: Install dependencies
        run: npm ci
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          # dist 디렉터리 업로드
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

위 설정 파일은 main 브랜치에 커밋이 될 때 마다 npm build를 해 생긴 dist 폴더를 Github pages에 배포하는 yml 파일입니다.

위에 지시대로 vite.config.ts 파일의 base를 "/내 저장소 이름/" 이름으로 바꿔 주었습니다. 그리고 위 Github Actions 설정 파일을 /.github/workflow 폴더를 만들어 넣어주었습니다.

그런데 분명 Vite 문서와 똑같이 입력했는데 에러가 발생하였습니다.

에러 메세지를 복사해서 구글링을 해보니 Github Actions의 actions/deploy-pages의 버전을 최신 버전인 4 버전을 사용하고 있어 이에 맞추어 actions/upload-pages-artifact를 3 버전을 사용해야 한다는 Github Issue를 확인하였습니다.
https://github.com/actions/deploy-pages/issues/305

버전을 알맞게 수정 후 아래 설정 파일을 사용하였습니다.

# GitHub Pages에 정적 콘텐츠를 배포하기 위한 간단한 워크플로우
name: Deploy static content to Pages

on:
  # 기본 브랜치에 대한 푸시 이벤트 발생 시 실행
  push:
    branches: ["main"]

  # Actions 탭에서 수동으로 워크플로우를 실행할 수 있도록 구성
  workflow_dispatch:

# GITHUB_TOKEN의 권한을 설정하여 GitHub Pages에 배포할 수 있도록 함
permissions:
  contents: read
  pages: write
  id-token: write

# 동시에 하나의 배포만 허용하도록 구성
concurrency:
  group: "pages"
  cancel-in-progress: true

jobs:
  # 단순히 배포만 수행하기에 하나의 잡으로만 구성
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Set up Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: "npm"
      - name: Install dependencies
        run: npm ci
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # dist 디렉터리 업로드
          path: "./dist"
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4
 

결과적으로 배포가 잘 되었고 리액트 앱이 작동하는 것을 확인할 수 있었습니다.