아파치 웹서버에 리액트 라우터 앱 올리기

react-router를 사용하면 리액트 앱에서 주소에 따라 다른 화면을 띄우는 라우팅이 가능하다. 그런데 클라이언트 측 라우팅이라 <Link>를 통해 주소 이동을 하고 막상 새로고침을 하면 실제 서버의 해당 주소엔 아무것도 없기 때문에 오류가 난다.

물론 개발 시 사용하는 webpack-dev-server는 알아서 무조건 index.html로 연결해줘서 문제가 없지만, 실제 서버에 배포할 땐 index.html로 연결하도록 세팅을 해줘야 한다.

지금 사용하고 있는 호스팅 서버가 아파치를 사용하고 있어 아파치에서의 세팅법을 찾아봤다.

아파치 웹서버는 .htaccess 파일을 통해 디렉터리별로 간단하게 서버 설정이 가능하다.

따라서 리액트 앱을 배포하는 디렉터리 안에 아래 내용의 .htaccess 파일을 만들어 넣으면 끝!

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . ./index.html [L]

내용을 간단하게 설명하자면 요청한 경로에 파일(심볼릭 링크 포함)이 없다면 ./index.html로 연결하라는 내용이다.

만약 이렇게 서버 설정하는게 여의치 않으면 그냥 간단하게 <BrowserRouter> 대신 <HashRouter>를 쓰자ㅎㅎ;