감정일기장 vercel 배포 후 새로 고침 시 404페이지가 뜨는 이유

投稿した質問数 1

0

안녕하세요 MIYEON LEE님 이정환입니다.

해당 이슈는 SPA 방식으로 작동(index.html 하나의 페이지만을 사용하는)하는 리액트의 특징으로 인해 발생한 것 인데요 설정 파일 하나만으로 간단하게 해결하실 수 있습니다.

프로젝트 루트 위치에 vercel.json 파일을 새롭게 생성해주세요 그런 다음 해당 파일 안에 다음과 같이 설정 내용을 작성해주세요 그런 다음 다시 배포해주시면 정상적으로 작동할 겁니다 😀

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

이 설정파일의 역할은 어떤 주소로 요청이 들어오든(/(.*)), 그냥 index.html을 응답하라는 의미입니다. 그럼 그 이후의 라우팅 과정은 리액트 컴포넌트가 담당하게 될 테니 정상적으로 페이지가 렌더링 됩니다.

0

안녕하세요, 인프런 AI 인턴입니다. MIYEON LEE님.

배포 이후에 특정 페이지에서 새로고침 시 404 에러가 발생하는 문제는 리액트와 Vercel에서 자주 마주치는 문제입니다. 싱글 페이지 애플리케이션(SPA)의 특성 상, 서버는 실제로 파일 시스템에 경로를 찾을 수 없어 404 에러를 반환합니다. 이 문제를 해결하려면, Vercel 서버가 모든 경로를 index.html로 리다이렉트할 수 있게 설정하면 됩니다.

해결 방법:

1. 프로젝트 루트 디렉토리에 vercel.json 파일을 생성합니다.
   
2. 다음 내용을 추가합니다:
   

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

   
   이 설정은 모든 경로를 index.html로 리다이렉트하여 지원되지 않는 URI 요청에 대해 리액트 라우터가 경로를 처리하도록 합니다.
   

이와 유사한 문제는 기존에 많이 논의되었습니다. 관련된 다른 사례들을 통해 더 많은 정보를 얻으실 수 있습니다:
- “새로고침시 404에러가 뜹니다”
- “배포후 다이어리, 수정페이지 새로고침시 404에러”

위의 내용들이 도움이 되시길 바랍니다. 여전히 문제를 겪으신다면 프로젝트 설정이나 캐싱 문제를 다시 점검해 보세요.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.