Vercel로 SPA 프로젝트를 배포하고, 접속을 하면 잘되는 것처럼 보인다.
하지만, 그 상태에서 새로고침을 해보면 404 에러를 내뱉는다.
해결해보자
vercel로 배포되는 프로젝트는 루트에 vercel.json
을 작성함으로써, vercel에 배포되는 환경을 설정 해줄 수 있다.
바로 vercel.json
의 rewrites
속성을 이용하면 된다.
rewrites는 브라우저에 보이는 URL을 수정하지 않고도 다른 URL로 사용자를 보낼 수 있다. (URL 프록시라고 부른다.)
react와 vue로 SPA를 만든 경우, 사용자가 웹 사이트에서 다른 페이지로 이동한다면 URL이 변경되지만, 서버는 항상 같은 HTML 파일을 제공해야 한다.
rewrites를 이용해 클라이언트의 URL과 서버의 파일 경로를 매핑시켜줄 수 있다.
{
// other options...
"rewrites": [
{ "source": "/", "destination": "/index.html" },
{ "source": "/login", "destination": "/index.html" },
{ "source": "/daily", "destination": "/index.html" }
]
}
source 속성은 다시 작성할 URL 을 지정하고 destination 속성은 다시 작성된 URL에 대한 대상 경로를 지정한다.
react-router 처럼 source와 destination에는 두 가지 유형의 매개 변수를 사용할 수 있다.
:
으로 시작하는 매개 변수와 *
와일드 카드다.
{
"rewrites": [
{ "source": "/about", "destination": "/about-our-company.html" },
{ "source": "/resize/:width/:height", "destination": "/api/sharp" },
{
"source": "/proxy/:match*",
"destination": "https://example.com/:match*"
},
{
"source": "/:path((?!uk/).*)",
"has": [
{
"type": "header",
"key": "x-vercel-ip-country",
"value": "GB"
}
],
"destination": "/uk/:path*"
}
]
}
https://vercel.com/docs/concepts/projects/project-configuration#rewrites