잘 사용하던 React 앱을 Vercel 클라우드에 올려본 후, 주소창에 경로(라우팅)를 변경하면 404 에러가 나서 그 해결책을 정리해 보았습니다.
Vercel 클라우드는 리액트 기반 Next.js 프레임워크로도 유명합니다.
프론트엔드 전문 답게 Vercel 클라우드 역시 Serverless 혹은 Static 프론트엔드가 강점이 있는 클라우드인데요, 하도 괜찮다는 이야기가 많아서 한번 배포해 보았습니다.
다른 aws 등에서 잘 돌던 React 앱을 배포했고 전반적인 기능은 별 수정없이 잘 동작하였습니다.
하지만, 주소창을 통해 라우팅을 변경하면 아래와 같이 404 에러가 발생을 하게 되었습니다.
예컨대, https://projects-xxxxx.vercel.app/ 화면에서 https://projects-xxxxx.vercel.app/login을 주소창을 통해 입력했을 때 혹은 새로 고침을 했을 때 발생하는 에러입니다.
(단 Link 등의 컴포넌트로 내부에서 라우팅하는 기능은 정상적으로 동작했습니다.)
이거 저거 하다보니 Vercel 404 에러 해결방법이 2가지가 있어 정리해 보았습니다.
Vercel 클라우드 rewrite 기능
우선은 vercel.json 이라는 배포 설정 파일을 만들어야 합니다.
구성 옵션 vercel.json 파일
{ "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }] }
이렇게 설정 한 후 주소창에 변경된 라우터를 입력하거나 새로 고침시에도 정상적으로 라우팅이 처리되는 것을 확인할 수 있습니다.
해시(Hash) 라우터 사용
BrowseRouter에서 HashRouter로 변경할 수도 있습니다.
아래와 같이 react-router-dom 에서 기존 BrowserRouter 대신에 HashRouter를 임포트합니다.
// import { BrowserRouter } from "react-router-dom";
import { HashRouter } from "react-router-dom";
그런 후 BrowserRouter와 동일하게 아래와 같이 감싸줍니다.
ReactDOM.createRoot(document.getElementById("root")!).render(
...
<HashRouter>
<App />
</HashRouter>
...
</React.StrictMode>
Hash Router를 사용하는 경우에는 주소 형태가 다음과 같이 변경이 됩니다. 즉, # 해시 태크를 달게 되는데요,
https://projects-xxxxx.vercel.app/#/login
해시 부분 주소에 해당하는 컨텐츠를 페이지 새로고침 없이 웹어플리케이션 구조를 변경할 수 있기 때문에 용이합니다.
해시 라우터의 주의 사항
다만 해시라우터 형태로 구현이 되게 되면 SEO에 불리하게 되고, URL 구조가 복잡해 질 수 있기 때문에, 앱의 용도에 맞는 경우 사용을 하시면 됩니다.
Vercel의 배포 설정에 관한 자세한 사항은 아래의 문서를 참고해 보시기 바랍니다.
vercel 설정 참고 문서 : https://vercel.com/docs/projects/project-configuration#rewrites
그 밖에 도움이 되는 글
모던 ProgressBar NProgress 리액트 사용 예시(+RTK Query)
리액트 로딩 스피너 라이브러리 react-spinners