React Router Nginx 문제해결 방법

React.js를 이용하여 포트폴리오 사이트를 제작했다.

기존에 서버를 구동시키기 위해서 yarn start 명령어를 사용했었는데 해당 명령어는

개발 서버에서 사용하는 것이고 실제 서버로 배포하기 위해서는 Deploy작업을 따로 해줘야 한다.

나는 기존에 사용하던 서버에 Nginx가 설치되어 있었고 해당 서버에 배포하기로 했다.

yarn build를 통해 나온 결과물을 웹 서버 폴더로 옮겼더니 정상적으로 작동한다.

하지만 문제점이 하나 있었는데 나는 라우팅을 위해 react-router-dom을 사용하고 있었다.

써드파티 모듈이지만 정말 많은 사용자들이 사용하고 있을 정도로 유명한 라우팅 모듈이다.

문제점은 /home /about 등으로 접근을 할 경우 nginx에서 해당 파일을 찾으려고 하는 것이다.

이 부분은 가상 호스트 설정을 통해 쉽게 해결이 가능하다.

 /etc/nginx/conf.d/ 폴더로 들어가서 vhosts.conf라는 파일을 하나 생성한다.

그리고 아래의 내용으로 채워준다.

server {
    listen 80 default_server;
    server_name /var/www/example.com;

    root /var/www/example.com;
    index index.html index.htm;      

    location ~* \.(?:manifest|appcache|html?|xml|json)$ {
      expires -1;
      # access_log logs/static.log; # I don't usually include a static log
    }

    location ~* \.(?:css|js)$ {
      try_files $uri =404;
      expires 1y;
      access_log off;
      add_header Cache-Control "public";
    }

    # Any route containing a file extension (e.g. /devicesfile.js)
    location ~ ^.+\..+$ {
      try_files $uri =404;
    }

    # Any route that doesn't have a file extension (e.g. /devices)
    location / {
        try_files $uri $uri/ /index.html;
    }
}

server_name 부분에 자신의 도메인 이름을 적으면 되고

root부분에 라우팅 시킬 폴더를 입력하면 된다.

위처럼 파일을 생성하고 sudo service nginx restart를 통해 재시작해주면 정상적으로 동작한다.