-
깃허브를 통해 React를 배포해보자git & Github 2023. 3. 10. 23:46
그동안 만들었던 React 프로젝트를 배포해보고 싶었다.
https://codingapple.com/unit/react-build-deploy-github-pages/
기본적으로 코딩 애플 님의 방법을 따라하였다.
📌 추가배포하기
추가적으로 github.io 개인페이지 이외에도 React 프로젝트는 계속해서 배포가 가능하다.
1. github 레포 이름은 아무렇게나 해도 되며 레포를 생성한다.
2. 프로젝와 github 를 연결한다. (git push까지 하면 됨)
3. 프로젝트에 gh-pages 를 설치한다.
npm install gh-pages --save
4. package.json 에 homepage 와 scripts 에 predeploy 와 deploy를 추가한다.
"homepage": "https://{깃허브이름}.github.io/{배포할 레포이름}",
"scripts": { ... "predeploy": "npm run build", "deploy": "gh-pages -d build" },
5. BrowserRouter 에 basename 을 추가해줘야 이동이 잘된다. (<a>태그가 아닌 <Link> 태그를 이용할 것)
function Router() { return ( <> <BrowserRouter basename={process.env.PUBLIC_URL}> <Routes> <Route path="/" element={<Coins />} /> <Route path="/:coinId" element={<Coin />}> <Route path="price" element={<Price />} /> <Route path="chart" element={<Chart />} /> </Route> </Routes> </BrowserRouter> </> ); }
6. 터미널에서 아래코드를 실행한다.
npm run deploy
7. github Settings -> Pages -> Branch 를 git-pages 로 설정한다. 그리고 새로고침
'git & Github' 카테고리의 다른 글
dev 로 merge 했어야 했는데 main 으로 머지했을때의 대처법 (0) 2023.05.23 Organization을 만들고 팀원들이 git push 했을 때 access 접근권한이 없다고 오류가 나면 403 해결책 (0) 2023.03.15 git revert : 잘못 merge 한 pull request 를 분리하여 다시 커밋한다. (0) 2023.02.04