[error] github pages 404 error

✍️ 1번 방법은 유지보수 까지 고려했을 경우, 적합한 방법 이고, 2번 방법은 직관적으로 추가 패키지 설치 없이 간단하게 실행 할 수 있는 방법이다.

상황

github pages로 배포한 React 기반 사이트에서 /signin 경로에서 새로고침을 할 경우 404 error 가 뜸.

원인

github pages 는 기본으로 SPA를 지원해 주지 않는다고 한다.

예를 들어 URL이 example.tld/foo
이고 /foo 가 프론트엔드 경로인 경우, 깃허브 페이지 서버는 /foo를 모르기 때문에 404 에러를 반환한다.

해결

어쨌든 github pages는 path를 이해하지 못해서 404라고 판단 할 것이고, 404.html 을 render 할 것이다.

404.html을 index.html 과 동일하게 해주므로써 404.html 이 render 되어도 실질적으로 index.html이 render 되는 것과 같은 효과를 적용한다.

index.html 과 동일한 404.html을 적용하는 방법은 다음과 같다.

1. 명령어로 index.html 파일 복사해서 404.html 파일 만들기

• npm install shx —save-dev 실행
• package.json 의 build script 다음과 같이 변경

  "scripts":{
  ...
  	"build": "react-scripts build && cp build/index.html build/404.html",
  ....
  }

• npm run build 후 build 폴더 안에 생성된 404.html 파일 확인

2. 직접적으로 index.html 복사 후, 404.html로 파일명 변경

• npm run build 후 생성된 build 폴더 안의 index.html 을 그대로 복사한 다음, 복사본의 이름을 404.html로 변경 한다.

참고 문헌

• https://art-coding3.tistory.com/43
• https://github.com/sujinleeme/spa-github-pages-ko