Vercel 배포 시 404 에러 해결하기 (Vercel SPA 라우팅 문제)

1. 문제 상황

• OAuth2 로그인은 성공
• 리다이렉트 URL에서 404에러 발생

2. 원인 분석

• SPA에서 모든 라우트가 index.html 에서 처리되어야 하는데 설정이 누락되어 있음

 

3. 해결 과정

• Vercel 설정에서 Framework Preset 확인 > Vite로 올바르게 설정되어 있음을 확인함
• vercel.json 파일 생성을 통해 SPA 라우팅 설정

 

4. 결과 및 교훈

SPA 배포 시 라우팅 설정은 필수!!

 

 

 

 

* SPA 

하나의 HTML 페이지로 이루어진 웹 애플리케이션,

JavaScript를 통해 동적으로 컨텐츠를 업데이트함.

 

SPA는 서버가 모든 경로에 대해 index.html을 반환하도록 설정해야 함!

그렇지 않으면 /login 같은 경로에 직접 접근할 때 서버가 해당 파일을 찾지 못해서

404 에러가 발생

 

Vercel은 내 프로젝트를 SPA로 배포해주는 플랫폼!!

 

 

해결 과정에서 생성한 vercel.json 파일:

{
    "rewrites": [
        {
            "source": "/(.*)",
            "destination": "/index.html"
        }
    ],
    "headers": [
        {
            "source": "/manifest.webmanifest",
            "headers": [
                {
                    "key": "Content-Type",
                    "value": "application/manifest+json"
                },
                {
                    "key": "Cache-Control",
                    "value": "public, max-age=0, must-revalidate"
                }
            ]
        },
        {
            "source": "/sw.js",
            "headers": [
                {
                    "key": "Cache-Control",
                    "value": "public, max-age=0, must-revalidate"
                }
            ]
        }
    ]
}

- rewrites: 모든 경로(/.*)를 index.html로 리다이렉트
- headers: PWA 지원을 위한 manifest와 service worker 설정
- PWA 지원 및 캐시 최적화 설정 추가