React : 배포 후 새로고침 404Error

💡노마드코더 수강이후 개인작업을 하며 직면한 문제의 해결과정을 기록한 포스트입니다.

목표

1. 배포된 react프로젝트가 새로고침 되었을 때 404에러가 나오는 이유를 파악.
2. 해결책을 찾아 적용한다.

이유

로컬에서는 문제가 없던 프로젝트가 배포 이후에는 페이지 라우팅을 한 이후 새로고침을 하면 404에러가 출력되는 것을 볼 수 있다.
이유는 SPA의 특징 때문인데 SPA는 단일 페이지 어플리캐이션으로 한 개의 HTML(index.html)에서 페이지 라우팅을 클라이언트 측 JavaScript로 하기 때문에 다른 페이지로 이동할 때 새로고침이 발생하는 것이다. 그러니까 실존하지 않는 페이지로 이동하는 것이기 때문에 새로고침할 수 없다는 것...

요약

• 기존의 웹페이지는 각 페이지별로 html파일이 존재하나
• 브라우저의 히스토리를 조작하여 주소가 바뀌는 것처럼 보이게 하는 것
• 즉, 실제로 새로고침 되는 html파일이 없어서 그외 페이지는 모두 404에러 출력엔딩.

방법

리액트 라우터는 브라우저 수준의 라우터라서 서버 사이드에서도 URL 요청에 대한 적절한 처리가 필요함

해결

내가 사용하고 있는 호스트는 Apache를 사용하는 닷홈이기 때문에 SPA + Apache 조합으로 구글링했다.

1. index.html이 있는 폴더안에 .htaccess라는 파일을 만든다.
   

2. .htaccess파일 안에 아래 내용을 넣는다.

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

사실 이 방법은 best한 방법은 아니라고 한다.
가장 베스트한 방법은 서버측에서 apache 설정을 수정하는 것인데, 내가 닷홈의 서버에 접근하고 수정할 수는 없으니 차선의 방법을 선택했다.
👉🏻React앱 Apache로 배포 시 404 에러 해결하기

대안
클라우드 호스팅(Firebase, AWS 등)은 기본적으로 경로 기반 라우팅을 지원함.