[React/리액트] Github page SPA 404 에러 발생 해결

 

SPA 에러 발생 원인

• github 페이지 내부에서 SPA 기능을 지원해주지 않습니다. 
• 예시로, repository/home으로 구성된 주소에서 /home은 SPA의 path이고 프론트엔드의 주소라는 것을 github내부에서는 인식을 하지 못하기 때문에 404 에러가 발생합니다.

 

---

 

404 에러 해결 방안

여러 가지 해결 방법이 있지만 해당 포스터에서 소개해줄 방법은 404페이지에 index.html의 내용을 붙여 넣는 방법이다. 

github 내부에서는 404에러가 발생하면 저장소 내부에 404.html이 존재하는지 찾고 존재한다면 해당 페이지를 띄운다. 없는 경우 기본적으로 github 제공하는 404 홈페이지가 뜨게 된다. 이러한 github 내부 로직을 이용하여 github page를 build할때, index.html 내용을 넣어 404.html을 생성한다.

 

 

▼ 구현▼

1. 터미널에서 'npm install shx --save-dev' 실행

2. 프로젝트 폴더 내부의 package.json 파일의 script build 영역에 'shx cp build/index.html build/404.html' 추가

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