React 앱을 Vite + gh-pages로 빌드 및 배포하기

요즘 속도가 빠르고 가벼운 느낌이 드는 Vite를 프로젝트에 자주 활용한다. 그러던 중 간단한 프로젝트를 gh-pages를 이용하여 배포하려고 했는데 여러 난관이 있었다. 이번 일을 계기로 Vite로 생성한 react.js 프로젝트를 gh-pages 위에 배포하는 방법을 정리하였다.

배포 환경

yarn, react, vite, gh-pages

배포 방법

1. gh-pages 라이브러리 설치

yarn add gh-pages

2. 파일 설정

vite.config.js base 추가

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
   base: '/repo-name',
   plugins: [react()],
   build: {
      chunkSizeWarningLimit: 100000000,
   },
});

package.json script 추가

scripts: {
	...
	"predeploy": "npm run build",
	"deploy": "gh-pages -d dist"
}

3. 빌드 및 git commit

1. 빌드: yarn build
2. /dist 변경 내역 스테이징: git add dist -f
3. git 커밋하기: git commit -m “Create build files”
4. gh-pages의 브랜치에 dist의 리소스만 업로드 (gh-pages branch가 없어야함)

      git subtree push --prefix dist origin gh-pages

5. Deploy 하기: yarn deploy

재배포/업데이트

npm run deploy