gh-pages로 배포하기

gh-pages로 배포하는 방법과 배포 중에 겪은 에러를 적어보려한다.
먼저 gh-pages로 배포하는 방법은 아래와 같다.
터미널에서 gh-pages 라이브러리를 설치해준다.

npm install gh-pages --save-dev

package.json파일 script에 deploy와 predeploy를 추가해준다.

"deploy": "gh-pages -d build",
"predeploy": "npm run build",

package.json파일 맨 밑에 homepage를 추가해준다.

"homepage": "https://gowell032.github.io/React-Movie-app"

"https:// [github id] .github.io/ [레파지토리명] "으로 적어주면 된다.
predeploy는 deploy를 실행시킬때 자동으로 그 이전에 빌드를 도와주는 키다.
터미널에 npm run deploy를 치면 배포가 실행된다.

배포를 한 뒤에 페이지를 확인해보니 메인과 링크들이 정상적으로 작동되지않았다.
알고보니 경로를 읽지 못하는 에러였다.
솔루션은 process.env.PUBLIC_URL를 적는것이다.
나같은 경우는 route의 path와 Link에 아래와 같이 적었다.

<Route path={`${process.env.PUBLIC_URL}/`} element={<Home />} />
<Link to={`${process.env.PUBLIC_URL}/`}>