Netlify 배포 후 새로고침시 404 에러

최근에 사전과제 하나를 하게 되었다. 사전과제 README 파일에 들어가야 할 것은 데모영상 or 배포링크였다. 배포가 되었고 배포 된 사이트에서 기능이 모두 동작하면 가산점을 준다고 하여서 배포를 결정하였다.

배포는 Netlify를 이용하여 정상 배포하였다.

 

그런데 제대로 돌아가나 확인 중 새로고침을 눌렀더니 다음과 같은 에러 메세지가 발생하였다.

 

404에러

HTTP에서 사용자가 요청하는 페이지나 파일을 찾을 수 없을 때 나타난다.

 

그런데 왜 잘 동작하다가 새로고침만 만나면 요청하는 페이지를 못찾겠다고 하는 걸까?

 

원인

Netlify나 다른 정적 웹 호스팅 플랫폼에서 해당 에러가 발생하는 이유는 라우팅 처리와 관련이 있다.

정적 웹 호스팅 환경에서는 서버 측 기능이 없거나 매우 제한적이기 때문에, 클라이언트 측 라우팅을 지원하지 않는 경로에 접근하면 서버가 해당 경로를 인식하지 못하고 404 에러를 반환한다고 한다.

 

해결 방법

그렇다면 어떻게 해결 할 수 있을까? URL 리다이렉션 설정이다.

웹 호스팅 환경에서 모든 경로를 해당 프론트엔드 페이지로 리다이렉션 하는 설정을 추가하면 된다. 이를 통해 서버가 해당 경로를 인식하지 못해도 브라우저에서는 제대로 로드할 수 있다.

 

우선 public 폴더 안에 '_redirects' 라는 파일을 하나 만든다.

 

해당 파일에는 다음과 같이 작성한 후 저장한다.

/* /index.html 200

위 설정은 모든 경로( /* )에 대해서 'index.html' 파일로 리다이렉션하도록 지정한다는 것이다.