React 프로젝트 Nginx 설정

React 프로젝트를 Nginx서버에 배포하면서 환경내에서 발생한 문제점들에 대해 정리하고자 합니다.

1. 요청 url 설정

• Nginx 상에서 HTTP 요청을 할 때 기본적으로 해당 Nginx 서버의 IP 주소(혹은 도메인 주소)가 기존의 URL의 앞단에 덮어 써지는 것을 확인하였습니다. 따라서 개발 환경에서 요청하는 경우와 배포환경에서 요청하는 방식이 달라야했습니다. 프로젝트에서 주로 사용되는 REST API 주소는 배포환경일 때는 IP주소를 앞부분에 넣지 않고 요청을하고 개발 환경일 때는 IP주소를 넣고 요청하는 하드코딩으로 해결하였습니다.
  - 3rd party API 요청
  jira 이슈 상태 실시간 현황을 파악하기 위해 Jira 서버에 요청을 보냈습니다. 이때도 Nginx 주소가 덮어써져서 요청이 올바로 진행되지 않았습니다. 따라서 nginx.conf 파일의 server 블록에 아래 내용을 추가해주었습니다.

  server {
  	...
  	  location /rest {
      	proxy-pass https://jira.xxxx.xx.co.kr; # 사내 지라 서버 주소
        }
       ...
   }

  위 코드는 /rest로 시작하는 API요청이 왔을 때, 목적지 Origin을 proxy-pass 값으로 하겠다는 의미입니다.
  브라우저(url: nginx주소/path) -> Nginx(url: https://jira.xxx.xx.co.kr) -> Jira 서버 순서로 요청이 진행 됩니다.

2. Nginx 환경에서 SPA 에플리케이션 새로고침 시 404 Error Fallback UI 설정
   Nginx에 React 프로젝트 배포 완료 후, 몇 페이지 타고 들어간 상태에서 새로고침 시, 404 Error가 발생하는 문제가 생겼습니다. 이 문제는 History API와 연관이 있었습니다. React 웹 앱에서의 React-Router는 History를 사용해 (가짜)라우팅 처리를 하는 반면, Nginx 서버에서는 (가짜)라우팅 처리된 것이 진짜인줄 착각하고 발생시키는 에러였습니다. 따라서 nginx.conf 파일에서 알 수 없는 url로 요청이 왔을 땐 초기화면인 index.html로 반환하도록 설정 값을 수정하여 해결하였습니다.