[Apache] 아파치 기반 SPA에서 새로고침 시 Not found 뜨는 문제 해결 방법

배포 파일을 AWS의 Apache에 올리고 사이트에 접속을 했더니 홈 경로가 아닌 곳에서 새로고침을 하거나 뒤로가기 등을 하면 Not found가 뜨는 문제가 발생했습니다.

 

왜 못 찾는다는거니...

 

처음에는 어떤 부분을 건드려야 하는지, 어떻게 검색을 해야하는지도 모르겠어서 엄청 헤맸는데 (처음에는 vue-router의 문제인 줄 알았습니다...) SSAFY 코치님의 조언으로 웹 서버의 configuration 설정의 문제란 것을 알게 되었고, 환경이 조금씩 다르긴 하지만 StackOverflow와 이 블로그를 참고했습니다.

 

사실 아파치 뿐만 아니라 SPA(Single Page Application)면 흔히 발생하는 일이라고 알고 있는데요, SPA는 일반적으로 단 하나의 색인 파일(index.html)과 HTML5의 History API를 사용합니다. 새로고침하거나 우회해서 접속할 경우 index.html에 바로 접근하는 것이 아니기 때문에(?) Not found가 뜬다는데요. 어쨌든 저는 Apache2 환경에서 프로젝트를 진행했기 때문에 이 글에서는 아파치 설정만 설명합니다.

 

 

 Step 1.  Apache 모드 변경

RewriteEngine을 가능하게 만들어줘야 합니다. 아래의 명령어를 입력해 mod-rewrite를 활성화 시키고 서버를 재시작 해줍니다.

$ sudo a2enmod rewrite
$ apachectl restart

 

 Step 2.  Apache configuration 파일 수정

/etc/apache2/ 경로로 이동하면 apache2.conf라는 configuration 파일이 있습니다. 해당 파일을 열어 RewriteEngine에 대한 설정을 해줍니다. 에디터는 굳이 vim이 아니라 vi나 nano 등 아무거나 써도 됩니다.

$ cd /etc/apache2
$ sudo vim apache2.conf

 

주로 Apache의 루트 경로는 /var/www/html/인데요, 해당 경로에 대한 설정을 해주어야 합니다. 도메인을 여러개 사용하고 있다면 /var/www/html/example.com 등이 루트 경로가 될 수 있겠죠.

<Directory "/var/www/html">
    RewriteEngine on
    # If an existing asset or directory is requested go to it as it is
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]
    # If the requested resource doesn't exist, use index.html
    RewriteRule ^ index.html [L]
</Directory>

전체적으로는 아래 사진처럼 됩니다.

 

 

생각보다 엄청 간단한데, 검색을 어떻게 해야하는지 몰라서 뻘짓한게 좀 있었네요.. ㅎ_ㅎ

다음 Web 관련 글은 Apache와 tomcat에서의 SSL 관련 설정이 될 것 같습니다. 감사합니다!!