[Hanaro] 31일차 / React 프로젝트 Github Pages 배포

04 React - Routing

• Github Pages로 배포하기
  • 배포 전 설정
    • cmd 창에서 프로젝트 폴더로 이동 후 npm i gh-pages -D
    • package.json 파일의 “scripts” 블록 안에 "build” 바로 아래에 "deploy": "gh-pages -d dist" 추가
      • package.json

        • "scripts": {
          	"dev": "vite",
              "build": "tsc && vite build",
              "deploy": "gh-pages -d dist",  // 추가!

  • 배포
    • vite.config.ts 파일의 plugins: 바로 아래에 base: '/깃레포지토리이름/', 추가
      • vite.config.ts

        • export default defineConfig({
            plugins: [react()],
            base: '/깃레포지토리이름/',  // 추가!
          });

    • main.tsx 파일의 <BrowserRouter></BrowserRouter>를 주석 처리하고, 그 자리에 <HashRouter> <App /> </HashRouter>로 바꿔주기
      • main.tsx

      ...코드 생략
      import { HashRouter } from 'react-router-dom';  // 추가!
      
      ReactDOM.createRoot(document.getElementById('root')!).render(
        <React.StrictMode>
          <CounterProvider>
            {/* <BrowserRouter> */}  // BrouserRouter 대신 HashRouter로 변경!
            <HashRouter>
              <App />
            </HashRouter>
            {/* </BrowserRouter> */}
          </CounterProvider>
        </React.StrictMode>
      );

    • 이후 프로젝트 다시 한번 git add-commit-push
    • cmd 창 프로젝트 폴더 위치에서 yarn build
    • cmd 창 프로젝트 폴더 위치에서 yarn deploy
    • https://깃아이디.github.io/깃레포지토리이름 으로 접속하면 배포 완료!
      • 에러나면 github 홈페이지-해당 레포지토리 페이지에서 Settings-Pages 들어간 후 Branch에서 branch가 gh-pages로 되어있는지 확인

        •