배포후 다이어리, 수정페이지 새로고침시 404에러

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

12.19) 배포하기

해결된 질문

작성

196

안녕하세요,

로컬에서는 새로고침 하여도 페이지가 정상적으로 보여지는데

배포후에는 다이어리, 수정페이지 새로고침시 404에러가 뜹니다. isLoading(false) 코드도 잘 작성한것 같은데 뭐가 문제인지 모르겠네요ㅠㅠ

깃허브 :https://github.com/jw118g/ONE-BITE-REACT

vercel :https://emotion-diary-woad.vercel.app/

javascript react node.js

답변 2

이정환 Winterlood

지식공유자

안녕하세요 지원님

아이코 ..! 신규 강의 출시로 인해 답변이 늦었습니다 🙇‍♂

해당 문제는 Vercel 에서 현재 배포하신 프로젝트의 경로를 제대로 읽지 못하는 걸로 보입니다.

Netlify나 Firebase에서 이런 현상이 일어나는건 봤어도 Vercel에서는 처음이네요 ...!

문제를 빠르게 해결하시려면 프로젝트 루트 단계에 vercel.json 파일을 생성하신 뒤 다음과 같은 내용을 작성해보세요! 그 다음 vercel --prod 명령어로 다시 배포하시면 될 겁니다.

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

인프런 AI 인턴

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

배포 후 다이어리나 수정 페이지를 새로고침할 때 404 에러가 발생하는 문제는 리액트 앱이 싱글 페이지 어플리케이션(SPA)으로 구현되었기 때문에 발생할 수 있습니다. 로컬 환경에서는 개발 서버가 SPA의 라우팅을 위해 모든 요청을 index.html로 리다이렉트 처리해주기 때문에 문제가 발생하지 않습니다. 하지만 정적 파일을 제공하는 서버(예: GitHub Pages, Vercel)에서는 직접 해당 설정을 추가해주어야 합니다.

Vercel을 사용하고 계시다면, vercel.json 파일을 프로젝트의 루트 디렉토리에 생성하고 다음과 같은 구성을 추가해주세요:

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

이 설정은 서버에 정의되지 않은 모든 경로를 index.html로 리다이렉트하여, 리액트 라우터가 클라이언트 측에서 경로를 처리할 수 있도록 합니다.

이 방법을 적용한 후에도 문제가 지속된다면 index.html, 리액트 라우터 설정, 혹은 isLoading(false) 코드의 구현을 다시 확인해보시는 것이 좋습니다. 문제의 정확한 원인 파악을 위해서는 배포 환경에 특화된 설정과 코드의 세부적인 구현을 검토해야 합니다.

인프런 커뮤니티 질문&답변

배포후 다이어리, 수정페이지 새로고침시 404에러