[React] github Pages 배포 빈 화면 에러 처리하기

---

react app을 github Pages를 이용해서 배포를 했는데 빈 화면만 나왔다.

그런대 웹 페이지 로고가 잘 나오는 것을 보니 배포는 잘 된 것 같다.

그럼 뭐가 문제인 것일까?

 

한국어로는 아무리 검색해도 유용한 결과가 나오지 않았다.
배포를 처음부터 다시 해보고, 예전 브렌치로 돌아가서 다시 해보고 삽질을 하다가 영어로 이상하게라도 검색을 해보았다.

“react deploy github pages but blank page” 이렇게 이상하게 때려넣어서
검색했는데 해결방법이 바로 나왔다… 이래서 영어로 구글링을 해야하는구나 뼈저리게 느꼈다.

 

결론적으로 문제는 react-router를 사용해서 설정한 route 경로 때문이었다.
github Pages를 이용해서 배포를 하게되면 기본적으로 아래와 같은 형태로
url이 생성된다.

http://깃허브아이디.github.io/레포이름

 

반면 내가 설정한 route는 아래와 같았다.

/ => 메인화면
/project1 => project1 프로젝트 화면
/project2 => project2 프로젝트 화면

따라서 http://깃허브아이디.github.io 가 되어야 내가 설정한 메인이 보여지게 되는 것이다.

하지만 배포된 주소의 전체 url은 http://깃허브아이디.github.io/레포지터리명과 같이 배포되어 있기 때문에

main route를 기존의 /에서 /레포지터리명 으로 수정해주었다. 그 결과 원하던 메인 창이 잘보여지게 된다.

 

레퍼런스
https://github.com/gitname/react-gh-pages/issues/3#issuecomment-399787987