[CI/CD] github pages 배포 방법 (React-Typescript 프로젝트)

Github Pages 배포 (React-Typescript 프로젝트 배포)

• 배포 전 설정
  • 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로 되어있는지 확인

      •