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

원문 발행 2026. 05. 14. 06:08원문 언어 영어AI 한국어 번역Dev.to AI tag 원문 보기

이 글은 원문 전문을 보관하지 않아 AI 번역본만 보여드려요. 원문 전체는 아래 원문 바로가기에서 확인해 주세요.

요약

Lovable 앱을 Vercel에 배포하는 과정에서 발생한 404 오류를 해결한 경험담입니다. 로컬에서는 정상 작동했으나, 실제 배포 환경인 Vercel에서 404 오류가 발생하는 주된 원인은 Single Page Application (SPA)의 라우팅 설정 누락이었습니다. 이 문제를 해결하기 위해 프로젝트 루트에 `vercel.json` 파일을 생성하고 모든 경로를 `/index.html`로 리라이트(rewrite)하는 설정을 추가하여 정상적으로 앱을 구동할 수 있었습니다.

핵심 포인트

Vercel 배포 시 SPA 404 오류는 흔한 문제이며, 라우팅 설정 확인이 필수적이다.
SPA의 경우 모든 요청 경로를 `index.html`로 리디렉션(rewrite)해야 한다.
`vercel.json` 파일을 사용하여 글로벌 리라이트 규칙을 정의할 수 있다.
배포 환경과 로컬 개발 환경 간의 차이점을 항상 염두에 두어야 한다.

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

문제 상황

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

디버깅 과정

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

해결 방법

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

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

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

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

교훈

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

AI 자동 생성 콘텐츠

원문 바로가기

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

요약

핵심 포인트

문제 상황

디버깅 과정

해결 방법

교훈

댓글

문제 상황

디버깅 과정

해결 방법

교훈