배포
아래 내용은 노마드코더님의 강의를 통해 학습한 내용들을 기반으로 작성하였습니다.
Github 페이지로 배포하는 방법은 간단합니다.
1. package.json 수정
"scripts": {
...
"deploy": "gh-pages -d build",
"predeploy": "npm run build"
},
위와 같이 package.json의 script부분에 deploy
와 predeploy
를 추가해줍니다. 나중에 터미널을 통해 배포하고자 할 때, npm run deploy
명령을 통해 자동으로 npm run build
와 npm run predeploy
가 실행되고, gh-pages 브랜치에 배포를 위한 최적화된 파일들을 커밋해줍니다.
"homepage": "https://본인의 깃허브명.github.io/깃허브 레포지토리명"
package.json에 위의 문장도 추가해주어야 합니다. 위의 주소를 더 간단히 확인할 수 있는 방법은, 해당 깃허브 레포지토리에 가서, settings -> pages를 통해 해당 레포지토리의 github page를 볼 수 있는데, 그 주소를 넣으시면 됩니다.
2. App.js 수정
<Switch>
<Route path="/movie/:id">
<Detail />
</Route>
<Route path={`${process.env.PUBLIC_URL}/`} element={Home} >
<Home />
</Route>
</Switch>
저와 같은 경우에는 위의 방법만으로는 빈 페이지가 나오고 로딩이 되지 않아서 구글링을 해보니 위와 같이 추가한 후에는 정상적으로 실행이 되었습니다.
아직까지 ${process.env.PUBLIC_URL}
을 추가해주어야 하는 이유에 대해선 찾지 못했는데, 아시는 분이 계시다면 댓글로 알려주심 감사하겠습니다..
Author And Source
이 문제에 관하여(배포), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@tank3a/배포저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)