[gh-pages] CRA 배포 시 homepage 경로를 참조하지 못할 때

gh-pages로 리액트 앱을 배포할 때 URL 설정을 package.json에 homepages로 추가하는 것만으로는 안 돼서 검색하다가 나중에 또 잊을까봐 기록으로 남겨둔다 ..^^

package.json

 

gh-pages를 install한 뒤 script에 predeploy와 deploy 명령어를 넣어준 뒤 "homepage"에 내 깃헙 아이디 + github.io + 현재 저장소 이름을 넣어준 것까지는 다른 튜토리얼에 나와 있는 내용과 동일하게 진행했다.

그런데 자꾸 빌드된 파일에 번들된 css나 js 파일을 참조하는 경로가 /github.io...로 시작하고 있었다. 즉, github io를 넣은 완전한 URL을 찾지 못하고 있었다. React-router 라이브러리를 사용할 때도 비슷한 문제가 발생하니 browser-router 쪽 이슈인가 싶어서 아래처럼 Router.js 파일을 일부 수정해주었다.

Router.js

원래는 <Router>가 최상단에 위치하는데 이를 <BrowserRouter basename={process.env.PUBLIC_URL}>로 감싸주었다.

.env

// root
PUBLIC_URL=https://hannah26hannah.github.io/react-twitter-clone/

루트 바로 아래에는 Firebase 설정 파일을 위한 키가 담긴 .env 파일이 있고, 여기에 위처럼 PUBLIC_URL을 설정해주었다.

이렇게 하고 나니까 정상적으로 빌드되고 배포할 수 있었다.

Reference

• Can't build CRA project with custom PUBLIC_URL

2달 전에 게시된 스택오버플로우 답변을 참고했다.