apache에서 react-router-dom 설정

기존 php 서비스 위에 react를 사용하여 페이지를 만들어야 하는 프로젝트가 생겼다.

react-router-dom을 사용하여 react페이지를 만들었는데 qa서버(테스트 서버)에서 history.back 또는 url로 직접 접근하면 404에러가 나오는 문제가 생겼다.

php 서비스는 apache위에 떠있었기 때문에 react-router-dom의 url을 apache에서 해석을 함으로써 생긴 문제였다.

예를 들면 react-router-dom을 통해 `/page`와 `/page/1`의 url을 router하고 해당 링크로 가게 되면 apache에서 `/page/index.html` `/page/1/index.html`을 찾기 때문에 404 error가 나타나는 것이었다.

이를 해결하기 위해서는 apache의 설정을 통해 해결을 할 수 있다.

<VirtualHost *:8080>
  ServerName example.com
  DocumentRoot /var/www/httpd/example.com

  <Directory "/var/www/httpd/폴더루트">
    ...

    RewriteEngine on
    # Don't rewrite files or directories
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]
    # Rewrite everything else to index.html to allow html5 state links
    RewriteRule ^ index.html [L]
  </Directory>
</VirtualHost>

react는 초입의 html파일 하나만 있기 때문에 `/page` 라는 url로 들어왔을 시에 `/`에 있는 html파일을 거치도록 해서 정상적으로 작동이 되게 하는 설정이다.

참고 : https://wkdtjsgur100.github.io/react-router-deploy/