[Vercel] 배포 error 해결

현재 진행하고 있는 프로젝트를 vercel 배포하기로 하여 프로젝트를 생성하고, 깃허브와 연동해 배포를 하였다.

처음 배포를 하고 나서 보여지는 화면에, 내가 잡아놓은 레이아웃이 보이길래 제대로 배포가 되었다고 생각하였다

그러나 url을 이동했을 때, 404 NOT_FOUND 에러가 발생하였고, 메인 페이지 외에는 모두 동일한 에러가 발생했다.
구글링을 하여 찾아보니, vercel에서 특정 url의 HTML을 찾지 못해서 발생한 에러였고, index.html에 접속할 수 있도록 코드를 추가해서 해결하면 된다.

💡vercel.json 코드 추가

{
  "routes": [
    { "src": "/[^.]+", "dest": "/", "status": 200 }
  ]
}

vercel.json 파일을 새로 만들고 위의 코드를 추가하면 된다!

코드를 간단하게 살펴보자면,
source : 사용자가 브라우저에서 요청하는 url
요청된 url을 검사하고, .이 없는지 확인한다 (/style.css 이런건 x)

dest(destination) : 요청된 url이 실제로 전달되는 경로
서버에서 요청된 url을 모두 / 경로로 리다이렉트 하며, SPA의 index.html을 의미한다

💡간단하게 정리하자면,

1. 사용자가 특정 url로 이동
2. url의 경로를 확인하고, 서버에서 /로 리다이렉트 && status 200 반환
3. status가 200일 경우(=성공), 클라이언트 측 라우터에서는 경로에 맞는 컴포넌트랜더링

🤔서버에서 리다이렉트 하는 이유

그렇다면 왜 서버에서 모든 경로를 /로 리다이렉트하는 걸까?
SPA에서는 하나의 HTML(index.html)만 제공한다. 사용자가 특정 url로 이동하더라도 브라우저는 새로운 html을 요청하지 않는다.
서버는 특정 url에 해당하는 html이 없기 때문에, 모든 url을 /로 보내고 index.html을 받게 된다. 그럼 클라이언트 측에서 index.html 중 경로에 맞는 컴포넌트를 랜더링 하는 것이다!