Netlify를 통한 React프로젝트 배포 후 발생한 "Page Not Found" 문제 해결
문제 상황
Netlify를 통해 배포한 웹사이트(https://busanexhibitionguide.netlify.app)에서 루트 경로는 정상적으로 접속되고 다른 페이지로 이동이 가능했습니다. 하지만 특정 경로(예: https://busanexhibitionguide.netlify.app/exhibition)로 직접 접속을 시도하면 "Page Not Found"라는 메시지가 나타나며, 접속이 불가능한 문제가 있었습니다.
이 문제의 원인은 react-router가 클라이언트 측에서 라우팅을 처리하기 때문에, root 경로가 아닌 다른 페이지로 직접 접속하려고 하면 Netlify가 이를 제대로 인식하지 못해서입니다.
해결 방법
이 문제를 해결하기 위해 URL 리라이트(URL Rewrite)라는 개념을 이해하고 적용했습니다.
Netlify는 기본적으로 Single Page Application(SPA)에 대한 URL 리라이트 설정을 자동으로 제공하지 않습니다. 이는 웹앱의 구조나 사용하는 라우팅 라이브러리에 따라 URL 리라이트 방식이 달라질 수 있기 때문입니다. 따라서 개발자는 자신의 웹앱에 맞는 URL 리라이트 설정을 직접 지정해야 합니다.
Netlify는 이 문제를 해결하기 위해 _redirects라는 파일을 추가하여 SPA의 root URL로 redirect 시키는 방법을 제공합니다. 이 파일은 클라이언트에서 처리되지 않은 URL을 제대로 인식하도록 도와줍니다.
public/ 디렉토리 아래에 _redirects라는 파일을 생성하고 아래와 같은 내용을 추가했습니다.
/* /index.html 200이렇게 설정한 후, 루트 경로가 아닌 특정 경로로 접속을 시도해보니 이전과 달리 정상적으로 페이지가 나타나는 것을 확인할 수 있었습니다.
