---

공유 호스팅(닷홈) SPA(React) 404 Error

닷홈 무료 호스팅

닷홈은 무료 호스팅을 지원하기 때문에 프로젝트를 진행하면서 만족스럽게 이용해 왔습니다. 공유 호스팅 환경(Apache 2.4)이고, FTP에 접속해 업로드 하는 것이 조금 불편해도 개발공부를 처음하는 입장에서는 직관적이라고 느꼈습니다. 하지만, Vanilla JS로 개발된 프로젝트를 React로 리팩토링하면서 404 Error가 발생했습니다.

404 Error 원인

• SPA(React)는 정적리소스를 최초에 한번에 다운로드함.(SPA&CSR에 대한 내용은 여기로.)
• 그러나 공유 호스팅은 최상위 경로(/)를 제외한 경로에서 필요한 정적 파일을 서빙하지 않음.
• 최상위 경로(/)를 제외한 경로에서 새로고침을 하거나 URL을 직접 접속하면, 404Error가 발생.

해결 방법: .htaccess

• SPA를 공유 호스팅에서 운영하기 위해서는 서버 측에서 모든 하위 경로에 대해 정적리소스를 반환하도록(최상위 주소를 거치도록; Redirect) 설정 해야함.
• "경로 기반 라우팅(RewriteRule)" 또는 "히스토리 모드(Fallback)" 옵션으로 불림.
• .htaccess 파일은 Apache 서버에서 웹 사이트의 구성을 제어하는 설정 파일임.
• 닷홈(Apache 서버)에서는 내가 서버 설정 파일을 건드릴 수 없기 때문에 index.html 파일이 있는 경로(root)에 .htaccess 파일을 작성.
• .htaccess 파일 내용

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

대안: 클라우드 호스팅

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

---