-
깃허브를 통해 React를 배포해보자git & Github 2023. 3. 10. 23:46
그동안 만들었던 React 프로젝트를 배포해보고 싶었다.
https://codingapple.com/unit/react-build-deploy-github-pages/
만든 리액트 사이트 build & Github Pages로 배포해보기 - 코딩애플 온라인 강좌
(리액트 강좌 전체 목록) 이번시간은 간단한 내용이기 때문에 글로 빠르게 진행합니다. 여러분이 만든 사이트를 배포하려면 그냥 작업하던 App.js 파일 그대로 올리시는게 아니라 build용 파일
codingapple.com
기본적으로 코딩 애플 님의 방법을 따라하였다.
📌 추가배포하기
추가적으로 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