문제는 내가 개발한 React 프로젝트를 Vercel로 배포한 후, 여러 가지 기능을 테스트한 다음에 화면을 초기화하기 위해 새로고침을 했을 때 발생했다.
분명히 새로고침 하기 전까지만 해도 잘 보이던 페이지에 404 에러 화면이 나오고 있는 것이다. URL이 잘못된 것도 아니었고, 오류 때문에 서비스가 내려간 것도 아니었다. 혹시 싶어서 루트 경로가 아닌 다른 화면의 URL를 입력하니 마찬가지로 404 에러 화면이 나타났다. 차라리 아예 동작하지 않는다면 정말로 에러가 발생했구나 싶었을 텐데......
검색해 보니 다행히(?) 나와 같은 문제를 겪는 사람이 많았고 해결법도 생각보다 간단했다. 우선 원인부터 파헤쳐보자.
원인
내 프로젝트는 React를 통해 만들어졌다. React는 기본적으로 SPA이기 때문에 사용자가 어떤 URL로 들어와서 페이지를 요청하든 index.html이라는 파일을 내려주게 된다. 이후에 Javascript로 화면을 업데이트한다. 즉, index.html 파일이 있고 사용자가 접속한 경로가 Router로 등록이 되어 있으면 404 에러를 만날 일이 없다.
하지만 Vercel은 기본적으로 SPA로 동작시키지 않는다. 예를 들어 /test라는 경로로 접속했다고 하면 정말로 서버 내에서 해당 경로에 존재하는 html 파일을 찾는다. 일반적인 MPA의 형태로 웹사이트를 동작시키는 것이다.
화면 내에서 버튼을 통해 경로를 이동할 때는 자연스럽게 현재 웹페이지 내에서 화면이 다시 그려지지만, 해당 경로로 곧바로 접속하면 경로 내에 있는 html 파일을 찾기 때문에 404 오류가 발생하는 것이다. (그 경로에 html 파일이 없으니까!)
해결 방법
원인을 알았으니 해결 방법은 간단하다. 유저가 어떤 경로로 요청을 보내든 항상 같은 경로의 index.html 파일을 응답하도록 만들면 된다.
먼저 프로젝트의 루트 경로에 vercel.json 파일을 생성한 뒤 아래와 같은 내용을 작성한다.
{
"rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}재배포를 완료하면 새로고침을 하거나 특정 URL로 바로 접속하더라도 정상적으로 화면이 나타나는 것을 확인할 수 있다! rewrites 옵션을 통해서 모든 경로에 대한 목적지를 index.html로 설정해주는 코드라고 보면 쉽다.
