[Netlify] Page Not Found 에러

Netlify Page Not Found 에러

Vue를 netlify를 통해 배포했을 경우, 메인 페이지는 표시되지만 다른 페이지에 접근하려는 경우 아래와 같이 Page Not Found 에러가 발생한다.

검색해보니 이는 React에서도 동일하게 발생하였다.

 

원인

최초 접속할 때의 url인 /는 index.html에서 읽는다.

하지만, SPA(Single Page Application)인 Vue와 React에서는 다른 화면으로 넘어가는 라우팅된 url에 대한 적절한 자원이 존재하지 않는다. 따라서 Page Not Found 에러가 발생하게 된다.

 

해결방법

Vue 혹은 React의 public 폴더 아래에 _redirects라는 파일을 생성한다. (확장자는 없다.

그리고 해당 파일 내부에 아래 코드를 작성한다.

/* /index.html 200

이는 어떤 경로로 들어와도(/*), 200 상태코드를 내려주며, index.html 파일을 렌더링 하겠다는 의미이다.