React + Vite GitHub 페이지 배포하기!

실제로 도메인에서 보고싶어서 정리 시작
우선 필수로 깃허브에 레파지토리는 만들어져있어야겠지? 글고 git init / git add / git commit / git push 까진 기본임.

GitHub Page 배포 방법

1. 작업하고 있는 프로젝트에서 gh-pages 패키지를 설치해야 함!

npm install gh-pages

2. 패키지 설치 후 package.json 수정

"scripts": {
    "start": "vite",
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "predeploy": "npm run build", //추가
    "deploy": "gh-pages -d dist" //추가
  },
  "homepage": "https://github.com/kwak0630/react-study-v3", //추가

3. 프로젝트에서 npm run build > npm run deploy 실행

4. 해당 레파지토리의 setting > page에 들어가서 소스 / 브랜치 확인 후 변경

빈 화면 ?!

0. 강력 새로고침!!!!!!!!!!!!
   

1. vite.config 수정

export default defineConfig({
  base: '/react-study-v3/',   // 깃허브 레파지토리 이름 그대로 올리기!!!
  plugins: [react()],
})

2. main.jsx 수정

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { BrowserRouter } from "react-router-dom"

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter basename="/react-study-v3">
    <App />
  </BrowserRouter>
)

마지막

프로젝트 작업 후
git add .
git commit
git push
npm run build
npm run deploy
순서 !!