React.js를 사용해 개발한 웹사이트가 localhost의 npm 또는 yarn에서 정상적으로 작동한다. 따라서 이 사이트를 netlify에 배포하려는 상황이다.
이런! 에러가 발생했다!
Page Not Found
Looks like you’ve followed a broken link or entered a URL that doesn’t exist on this site.
React Router를 사용하는 React 사이트를 netlify에 배포하는 경우 다음과 같은 에러가 발생할 수 있다.
왜 Page Not Found가 발생할까?
React Router는 client에서 라우팅을 처리한다. 따라서 root가 아닌 페이지(ex: https://yoursite.netlify.com/login 등)에 접속할 때, netlify(server)는 route를 처리하는 방법을 알 수 없다.
해결 방법
netlify는 client 측에서 처리되지 않는 URL을 처리할 수 있도록 _redirects라는 파일을 제공한다.
netlify 문서의 "History Pushstate and Single Page Apps" 섹션을 보면 SPA URL의 root로 redirect하는 방법을 보여준다.
이 문제를 해결하기 위해서는 프로젝트의 public/ 디렉토리 내에 _redirects 파일을 만들어야 한다. 포함되어야 하는 내용은 다음과 같다.
/* /index.html 200
해당 파일을 추가해주고 나면 페이지 이동 시에 발생하던 Page Not Found 에러는 감쪽같이 해결된다!
Ref
- https://dev.to/rajeshroyal/page-not-found-error-on-netlify-reactjs-react-router-solved-43oa