React Router production 경로 라우팅 문제

Client Side Routing (React Router 등)을 사용한 React 앱을 배포했을 때, index.html(root)에서 HTML5 pushState history API 를 활용해서 앱이 잘 동작하지만 만약 /www.example.com/user 등의 root가 아닌 경로에서 새로고침을 하거나, 직접 해당 경로를 요청하면 404 page not found 에러를 만나게 되었다. 

 

분명 webpack의 dev server에서는 잘 동작했는데 도커 컨테이너로 테스트해보니 라우팅 과정에서 에러가 발생하는 것 같았다.

dev server에서는 새로고침에도 정상 동작

로컬에서 dev server로 라우팅을 할 때에는 라우팅 경로에서 새로고침을 하거나, /subject/ko 등으로 직접 접근해도 정상적으로 동작하는 반면에, production 빌드 파일을 그대로 전달하는 웹서버(node의 http-server 사용)를 사용한 docker container에서는 오류가 발생했다.

새로고침을 하거나, 직접 접근했을 때 404 에러가 발생함

열심히 검색하고 뒤져본 결과 그 이유는, 웹 서버는 react-router 같이 HTML5 pushState history API (pushState)를 이용해 Client Side Routing을 하는 경우와 다르게 실제 해당 경로에 해당하는 파일(ex. ${root}/subject/math의 경우에는 ${root} -> subject 폴더 -> math 라는 파일)을 찾아서 응답하기 때문이다.

 

그래서 이러한 문제를 해결해주기 위해서는 웹 서버 설정에서 해당 uri 경로에 해당하는 파일이 없을 경우, index.html 파일로 응답하라는 설정이 필요한 것이었다.

 

하지만 기존에 사용 중이던 node의 http-server는  "a simple zero-configuration http server for serving static files to the browser" 라는 문구에서 알 수 있듯이 서버 설정이 불가능했고, nginx를 사용했다.

 

서버 설정은 간단하게 다음과 같이 설정해주었다. (nginx.conf)

server {
    listen 3000;
    location / {
        root    /home/node/app;
        index   index.html;
        try_files $uri $uri/ /index.html; # uri에 해당하는 파일을 찾지 못한 경우 index.html을 응답한다.
    }
}

해당 설정 이후 dev server에서처럼 잘 동작하는 모습

Docker를 알게 된지 얼마 되지 않아서 그런지 모르겠지만, 컨테이너라는 개념은 정말 신세계인 것 같다.

 

예를 들어서 이번 경우에도 nginx를 적용해야 했었는데, 별다른 설치 및 설정 과정 없이 nginx 이미지를 활용하는 것만으로도 쉽고 빠르게 프로젝트에 적용을 할 수 있다는 사실이 정말 신기하고 좋은 경험이었던 것 같다.

 

그리고 이제 나의 React App도 이미지화되어 항상 같은 환경 속에서 정상 동작한다는 것이 보장되어 있다는 사실이 정말 매력적이다.

 

사실 원래 DevOps에 관심이 없었는데, 우연한 계기로 Docker에 입문하면서 신세계를 경험하고 있고, CI/CD 쪽에도 점점 관심이 생겨서 공부해보고 싶어졌다.