Vercel로 SPA 배포하면 일어나는 404 에러 해결하기

Chanhee Jang·2023년 3월 14일
0

chanlendar

목록 보기
4/5

Vercel로 SPA 프로젝트를 배포하고, 접속을 하면 잘되는 것처럼 보인다.

하지만, 그 상태에서 새로고침을 해보면 404 에러를 내뱉는다.

해결해보자


솔루션

vercel로 배포되는 프로젝트는 루트에 vercel.json 을 작성함으로써, vercel에 배포되는 환경을 설정 해줄 수 있다.

바로 vercel.jsonrewrites 속성을 이용하면 된다.

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*"
    }
  ]
}

Reference

https://vercel.com/docs/concepts/projects/project-configuration#rewrites

profile
What is to give light must endure burning

0개의 댓글