View
개인적인 해결 방법을 적었습니다. 문제가 있다면 댓글로 알려주세요!
문제의 시작
리액트로 작업한 결과물을 깃헙에서 제공해주는 pages기능을 이용해 배포해보고자 열심히 찾아서 빌드하고 npm run deploy....
명령어 열심히 쳐서 배포 뙇! 했는데.
...
아무것도 나오지 않았다...
분명 내 로컬환경에서 npm start 로 실행시키면 잘만나오는데!! 왜 배포하니까 안나오는거지?!
이유를 찾다
create-react-app로 개발한 리액트 프로젝트는 기본적으로 루트(/) URL을 기준으로 프로젝트가 생성된다.
GitHub는 gh-pages페이지방식이 조금 이상했다.
내깃허브아이디.github.io/페이지 이게아니라
내깃허브아이디.github.io/ 레파지토리명 / 페이지 이런 방식이었다.
그래서 라우터로 이동했을때 바로 내깃허브아이디.io/페이지 로 이동이 된 것이다. 예를들면
yeeed711.github.io/react-clone/pages -> 이렇게 나와야 정상적으로 확인이 가능한데
yeeed711.github.io/pages -> 이렇게 나오는것...
클라이언트에서 라우팅하는 부분을 github page에서 제공해주지 않아서 추가로 설정해줘야 한다고 했다.
Deployment | Create React App
npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main..js are served with the contents of the /st
create-react-app.dev
여기서 자세히 확인가능!
그래서 아무튼 해결?
1. ./packge.json 파일안에 homepage를 추가
{
...,
"homepage": "https://{사용자이름}.github.io/{저장소이름}"
}
2. react-router을 사용한 부분에 BrowserRouter에 basename 을 추가
- PUBLIC_URL을 설정해서 기본 도메인 부분을 붙여주는 것! packge.json 파일에 추가한 homepage주소와 연결된다.
<BrowserRouter basename={process.env.PUBLIC_URL}>
<Routes>
<Route />
<Routes>
</BrowserRouter>이렇게 간단히 끝
'소소버그잡기' 카테고리의 다른 글
| ES module에서 __dirname 사용하기 (0) | 2022.11.22 |
|---|---|
| ReactDOM.render 오류잡기 (0) | 2022.09.25 |
| react-hook-form, React.forwardRef() 에러 (0) | 2022.09.20 |
| [React] styeld-components 를 함수내에 작성하면 이렇게 됩니다. (0) | 2022.08.15 |
