본문 바로가기
카테고리 없음

Vercel 배포 환경에서 404 Not Found가 발생하는 경우에 어떻게 해야할까?

by klm hyeon woo 2024. 5. 12.

목차

· 404 Not Found 해결 방법


프로젝트를 진행하면서 항상 마주했던 문제인데 당연시하면서 넘어가다가, 계속 구글링하던 나에게 필요한 포스팅을 오늘 진행합니다.

프로젝트를 진행하면서 리액트를 Vercel 배포 환경으로 테스트를 진행하다보면, 새로고침 시에 로컬 환경에서 발생하지 않는 404 에러가 발생하곤 합니다. 로컬 환경에서는 문제가 없기 때문에 분명 배포 환경에서의 문제인데, 이 부분은 Vercel.json 파일을 수정함으로서 해결을 할 수 있습니다. 

 

React, Vue, Svelte를 Netlify 또는 Vercel에 배포하기 위해서는 추가 스탭이 필요하다고 합니다.

관련 문제를 해결하기 위해서는 Vercel.json파일을 생성하고, 아래의 코드를 입력해주세요

404 Not Found 해결 방법

{
  "routes": [
    { "handle": "filesystem" },
    { "src": "/.*", "dest": "/index.html" }
  ]
}

레퍼런스

 

Deploying React, Angular, Svelte and Vue to Netlify & Vercel

Creating Your Project Doesn't matter if you use the official project generator for any of the major frontend frameworks or if you used other generators like my merced-spinup tool (check it out on npm), deploying the Vercel or Netlify is super simple! Info

www.linkedin.com

 

vercel 배포 시 특성 URL에서 404 Not Found 에러

origin으로 접근하면 (ex. www.domain.com/) 새로고침을 해도 Not Found가 뜨지 않는데, www.domain.com/community 등 pathname이 추가되면 새로고침 했을 때 Not Found가 뜨는 상황바로 www.domain.com/

velog.io

 

댓글