[apache2] SPA(Single Page Application) 새로고침 시 404 error

vue 와 같은 spa는 server side application과 달리 이름 그대로 "단일" 페이지를 로드한다.

즉, index.html에 대해서만 인식하고 있다는 의미.

서버는 클라이언트의 js를 브라우저에 전달하기 위해서만 존재하고 있다..

그래서 라우팅은 클라이언트 측에서 처리하고 콘텐츠만 업데이트 후 url을 변경한다.

 

문제는 이러한 환경에서 경로를 직접 입력하여 이동하거나 이동한 페이지에서 새로고침을 하면 

해당 url을 인식하지 못해 404 에러가 발생한다. (클라이언트는 오직 index.html ("/")만 인식하고있기 때문에..)

 

이를 방지하기 위해 모든 경로에 index.html로 응답하도록 서버쪽에 설정해줄 수 있다.

아래와 같이. (apache2 설정임)

<IfModule mod_rewrite.c>
        RewriteEngine On
        RewriteBase /
        RewriteRule ^index\.html$ - [L]
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule . /index.html [L]
</IfModule>

그러면 index.html에서는 다른 url로 랜더링 할 수 있는 js가 포함되어 있기 때문에 404 페이지가 아닌 원하는 페이지를 볼 수 있게 된다.