내 Lovable 앱에서 Vercel 404 오류를 디버깅하는 데 3시간을 썼습니다. 해결 방법은 다음과 같습니다.

Lovable 앱을 배포할 때 Vercel에서 404 오류를 마주하는 것은 정말 좌절스러운 경험입니다. 저는 이 문제를 해결하기 위해 3시간을 허비했습니다. 제가 발견한 해결 방법은 다음과 같습니다.

문제 상황

Lovable을 사용하여 앱을 구축하고 Vercel에 배포했습니다. 앱은 로컬 환경에서는 완벽하게 작동했지만, Vercel에 배포하자마자 404 오류가 발생했습니다. 처음에는 무엇이 잘못되었는지 전혀 알 수 없었습니다.

디버깅 과정

1. 로그 확인: Vercel 대시보드에서 로그를 확인했지만, 명확한 오류 메시지는 없었습니다. 단순히 요청을 찾을 수 없다는 404 오류만 표시되었습니다.
2. 라우팅 확인: 앱의 라우팅 설정이 올바른지 확인했습니다. 하지만 로컬에서는 문제가 없었기 때문에 라우팅 자체의 문제는 아닌 것 같았습니다.
3. 빌드 설정 검토: 빌드 명령과 출력 디렉터리 설정을 검토했습니다. 모든 것이 표준 설정대로 되어 있었습니다.

해결 방법

결국 문제는 Single Page Application (SPA)의 라우팅 방식에 있었습니다. Vercel은 기본적으로 요청된 경로에 실제 파일이 있는지 확인합니다. SPA에서는 모든 경로가 index.html로 리디렉션되어야 하지만, 이 설정이 누락되어 있었습니다.

이를 해결하기 위해 프로젝트 루트에 vercel.json 파일을 생성하고 다음과 같은 설정을 추가했습니다:

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

이 설정을 추가하고 다시 배포하자, 404 오류가 사라지고 앱이 정상적으로 작동했습니다.

교훈

SPA를 Vercel과 같은 호스팅 플랫폼에 배포할 때는 항상 라우팅 리라이트 (Rewrites) 설정을 확인해야 한다는 것을 배웠습니다. 이 작은 실수가 몇 시간을 낭비하게 만들었습니다.