문제의 시작...
평소에 CRA나 Next를 사용하는 일이 많았습니다. 하지만 이번 새 프로젝트에서는 빌드속도가 빠르다는 Vite를 도입하게 됐습니다. 여기서 예상치 못한 변수가 생겼습니다.
바로 Vite를 사용하여 애플리케이션을 빌드하고 배포할 때 프로젝트의 루트에 vercel.json 파일을 포함하지 않으면 Vercel은 기본 설정을 사용하여 들어오는 요청을 처리합니다. 이로 인해 잘못된 라우팅이나 assets이미지 누락 등 애플리케이션에 문제가 발생하게 된 것 입니다.
왜 Vite는 안돼?
Vite는 기본적으로 SPA (Single Page Application)를 위해 설계되어 있으며, 클라이언트 측 라우팅을 사용하여 페이지를 로드합니다. 이것은 클라이언트 측에서 URL이 변경될 때 페이지가 다시 로드되지 않고 JavaScript 코드가 사용되는 것을 의미합니다.
반면, Vercel은 정적 웹 사이트를 위한 서비스로서, 각 URL에 대한 정적 파일을 미리 생성하여 제공합니다. 이것은 서버 사이드 렌더링 (SSR) 또는 정적 사이트 생성기 (SSG)와 같은 방식으로 작동합니다.
이러한 이유로 Vite를 사용하여 만든 SPA를 Vercel에 배포할 때는 서버가 모든 URL에 대한 적절한 정적 파일을 제공하지 않으므로 404 오류가 발생할 수 있습니다. 이를 해결하기 위해 Vercel에게 모든 요청을 단일 HTML 파일로 리다이렉션하도록 구성하는 것이 필요합니다.
CRA(Create React App)는 기본적으로 React 앱을 배포하기 위한 정적 파일들을 생성해주는 기능이 내장되어 있습니다. 이에 따라서 CRA로 만들어진 앱은 이미 정적 파일들이 생성되어 있으며, 이 파일들이 바로 브라우저에서 실행될 수 있는 형태로 빌드되어 있습니다.
반면 Vite는 정적 파일들을 빌드하기 전에 개발 서버에서 바로 브라우저에 제공하기 때문에, 배포를 위해서는 빌드된 정적 파일들을 호스팅할 수 있는 서버에 올려야 합니다. 이때, 정적 파일들이 적절한 URL로 요청되어야 하므로, vercel.json 파일을 추가하여 리다이렉트 설정을 해주어야 합니다.
그러나 CRA는 이미 정적 파일들이 빌드된 상태로 제공되기 때문에, vercel.json 파일을 추가하지 않아도 문제 없이 배포가 가능합니다.
해결방법은?
비교적 해결방법은 간단했습니다.
{
"rewrites": [{ "source": "/(.*)", "destination": "/" }]
}이 설정은 모든 요청을 "/"로 리다이렉션합니다. 이렇게 하면 Vercel이 index.html을 반환하고 클라이언트에서 JavaScript를 사용하여 적절한 페이지를 로드하도록 할 수 있습니다.
위의 코드를 프로젝트 루트에 위치 시키고 배포를 진행한다면 Vite로도 정상적인 배포를 진행할 수 있게됩니다.
