교육 (Today I Learned)/Hanaro
[Hanaro] 31일차 / React 프로젝트 Github Pages 배포
Bay Im
2024. 2. 28. 17:27
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", // 추가!
-
- package.json
- 배포
- vite.config.ts 파일의 plugins: 바로 아래에 base: '/깃레포지토리이름/', 추가
- vite.config.ts
-
export default defineConfig({ plugins: [react()], base: '/깃레포지토리이름/', // 추가! });
-
- vite.config.ts
- 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로 되어있는지 확인
- 에러나면 github 홈페이지-해당 레포지토리 페이지에서 Settings-Pages 들어간 후 Branch에서 branch가 gh-pages로 되어있는지 확인
- vite.config.ts 파일의 plugins: 바로 아래에 base: '/깃레포지토리이름/', 추가
- 배포 전 설정
728x90