문제점
깃허브 서버에 쉽게 정적페이지를 호스팅 할 수 있는 gh-pages 라이브러리를 사용하여 배포 후에 로컬서버에서 이미지가 표시되지 않는 에러가 발생했다.
해결
pakage.json에서 homepage옵션을
"homepage": "."이렇게 바꾸면 localhost server에서도 이미지가 제대로 출력된다.
주의!
client-side routing을 사용한다면 이 방법은 사용할 수 없다.
과정
개발자 도구 network에 소스파일 status code를 보니 304가 떠서 캐시 문제인줄 알고 캐시삭제를 했는데 여전히 해결되지 않았다. 그래서 다시 천천히
gh-pages의 동작을 유심히 살펴보니 빌드할 떄 이런 문구를 띄웠다.
알고보니 gh-pages라이브러리를 사용하면서 pakage.json에 homepage 옵션을 추가해줬었는데 이게 localhost server를 열면서 path를 추가로 만들어서 소스파일의 경로가 꼬였던 것이다
나 같은 경우 이렇게 Guardiantales_Areana path가 추가로 붙어져 소스파일의 경로를 제대로 잡지 못하였다
이 이미지는 localhost server에서 크롬 개발자 도구 network에서 보면
이렇게 request URL를 요청하는데 pakage.json의 homepage 옵션으로 path가 추가되어 잘못된 경로로 소스파일을 요청하고 있었던 것이다.
그래서 img/에 Guardiantales_Areana를 붙여서
Guardiantales_Areana/img/${heroName}.png이런식으로 이미지 경로를 수정하는 방법도 있지만 , 이건 배포를 하게 되면 Guardiantales_Areana/Guardiantales_Areana/img....이렇게 중복으로 경로가 겹치게 된다.
그러므로 "homepage": "." 이렇게 homepage 옵션을 바꾸는게 가장 편하고 좋은 해결책이였다. 다만 이 방법은 client-side routing을 사용한다면 쓰지 못한다고 하니 주의해야겠다.
참고
homepage 옵션에 관한 설명은 아래에서 볼 수 있다.
https://github.com/facebook/create-react-app/blob/master/docusaurus/docs/deployment.md#building-for-relative-paths
