React+Vite 프로젝트 github pages로 배포하기

 

gh-pages 패키지 설치

// yarn
yarn add gh-pages

// npm
npm install gh-pages

 

package.json 설정

{
	// ....
  "scripts": {
    // ...
    "predeploy": "npm run build", // 추가!
    "deploy": "gh-pages -d build", // 추가!
  },
  "dependencies": {
	// ...
  },
  "devDependencies": {
	// ...
  },
	// ....
   // 배포할 웹사이트 주소
  "homepage": "https://danimkim.github.io/react-essentials"  // 추가!
}

 

vite.config.js 설정

배포주소가 기본 github.io 이면 별도의 설정이 필요없지만 하위 경로에 특정 레포지토리 이름이 있는경우 해당 레포지토리 이름을 base 옵션값으로 추가해줘야한다.

 

export default defineConfig({
  plugins: [react()],
  resolve: {
    // ...
    },
  },
  base: "/react-essentials/", // 레포 이름 추가!
});

 

 

gh-pages 배포

yarn deploy

 

 

---

 

참고자료

https://vite.dev/guide/static-deploy#github-pages