[React.js] Netlify로 배포 후 새로고침 에러 | Page Not Found

Page Not Found

최근 Netlify로 토이 프로젝트 배포 후 첫 로그인은 화면이 잘 뜨지만 새로고침 시 위와 같은 에러가 발생했다. 거기에 첫화면은 잘 렌더링 되지만 콘솔엔 failed to load resource까지 뜨는 아이러니..배포가 끝이 아니었던 것이다. 배포 후에 조금씩 원하는 기능을 추가하려 했지만 이슈 해결에만 이틀정도 소요된 것 같다. 그 중에 해당 에러가 가장 눈에 띄고 거슬려서 구글링을 시작했다. 그래도 구글링 실력이 좀 늘었는지 완벽한 해결방법은 아닌 것 같지만 간단하게 해결이 가능했다.

 

내 프로젝트같은 경우엔 처음 페이지에서 로그인을 하면 로그인이 유지가 되는데 여기서 새로고침 시 문제가 발생하는 것 같았다. 아마 새로고침을 하면 로그인 정보를 못불러오는 것 같은데..이게 CSR 문제인건지, React Router 문제인건지 아니면 Netlify 문제인지 정확히 알지는 못했지만 Netlify의 File-based configuration을 통해  새로고침 시 경로를 index로 설정해주어 문제를 해결하긴 했다.(임시적인 해결 방법인 것 같긴 하다.)

 

문서에 따르면 파일 기반 설정을 통해 새로고침 경로를 수정할 수 있게 되어있다.

netlify.toml 파일에서 직접 리디렉션을 관리할 수 있습니다. 리디렉션을 선언하려면 [[redirects]] 머리글이 있는 항목을 사용하십시오. - Netlify Docs

리디렉션 설정을 통해 초기에 요청한 URL이 아닌 다른 URL을 제공하자. - Netlify Docs

먼저

1. 프로젝트 루트 레벨(src, public와 같은 레벨)에 netlify.toml 파일을 생성한다. 
2. from엔 변경이 필요한 경로를, to엔 새로고침 시 이동할 경로를 설정해준다.

netlify.toml 새로고침 시 경로 설정

---

이렇게 설정하고 빌드 후 배포하니 더 이상 얘기한 두 개의 에러는 발생하지 않게 되었다. 꽤나 고생했지만 문제 해결 능력이 좀 상승한 것 같아서 기분은 좋았다. 하지만 SPA, CSR에 대한 이해, 프로젝트 렌더링 순서, React Router에 대한 이해 부족 등에 대한 부분도 있었기 때문에 공부의 필요성을 느꼈다.