이번에 처음으로 netlify로 배포하면서 새로고침 시 404 오류를 마주해야 했습니다.😭
여러 사이트를 찾아본 결과, React 애플리케이션을 yarn build 명령어로 빌드하여 배포할 때, 특히 GitHub Pages 또는 Netlify 같은 정적 사이트 호스팅 서비스에서 404 오류를 겪을 수 있다고 합니다. 이 문제는 기본적으로 React Router가 클라이언트 측 라우팅을 사용하기 때문에 발생합니다. React Router는 경로를 서버가 아닌 클라이언트에서 관리하므로, 사용자가 직접 URL을 입력하거나 새로 고침을 했을 때, 서버는 해당 경로를 알지 못해 404 오류를 반환하게 됩니다.
이 문제를 해결하려면 리다이렉트 파일을 생성하여 모든 요청을 애플리케이션의
index.html파일로 리다이렉트해 주어야 합니다. 이를 통해 React Router가 올바르게 작동할 수 있게끔 도와줍니다.
⚒️ 404 오류 해결 방법: 리다이렉트 파일 설정
-
public 폴더에
_redirects파일 추가:
배포 환경에 따라, 예를 들어 Netlify 같은 경우는public폴더에_redirects파일을 추가하여 모든 경로를index.html로 리다이렉트하도록 설정할 수 있습니다. 이 파일을 추가하면 클라이언트 사이드 라우팅이 제대로 동작하게 됩니다. -
_redirects 파일 내용:
/* /index.html 200이 한 줄의 설정으로 모든 경로(
/*)에 대해index.html로 요청을 보내고, 상태 코드를 200으로 반환하도록 설정할 수 있습니다. 이를 통해 사용자가 어떤 URL을 입력하더라도 React 라우터가 이를 처리할 수 있습니다.
예시
1. _redirects 파일 생성 및 설정
프로젝트의 public 폴더에 _redirects 파일을 생성한 후, 위에서 언급한 설정을 추가합니다.
/* /index.html 200
2. yarn build로 프로젝트 빌드
프로젝트의 빌드를 생성하려면 yarn build 명령어를 사용하여 최종 애플리케이션을 빌드합니다.
yarn build
3. 빌드 폴더 배포
배포를 위해 build 폴더를 GitHub Pages 또는 Netlify에 배포합니다. Netlify의 경우, 빌드한 build 폴더를 Netlify 프로젝트로 드래그앤드롭하거나 자동 배포를 설정할 수 있습니다.
4. 404 오류 방지 및 리다이렉트 설정 확인
배포 후, 브라우저의 개발자 도구 네트워크 탭에서 리다이렉트가 제대로 동작하는지 확인할 수 있습니다. 이제 클라이언트 측에서 라우팅을 처리할 수 있게 되어 URL을 직접 입력하거나 새로고침을 했을 때도 404 오류 없이 React 애플리케이션이 정상적으로 작동할 것입니다.
⚒️ 결론
public폴더에_redirects파일을 추가하고/index.html로 모든 경로를 리다이렉트하도록 설정하면 404 오류 문제를 해결할 수 있습니다.
