[Nginx] React 배포시 Reverse-Proxy 설정 방법

 

Reverse-Proxy란?

Proxy는 Client를 숨기고, Reverse-Proxy는 Server를 숨기는 것

 

Proxy란 대리자를 의미한다. 일반적으로 Proxy는 Server로부터 Clinet를 숨겨 정보를 알 수 없도록(그림1) 하는 역할이다.

Reverse-Proxy는 그 반대다. Client로부터 Server를 숨겨주는 것(그림2)이다. 

 

그림1. Proxy

 

그림2. Reverse-Proxy

 

 

 

Nginx 에서 React 배포시 Reverse-Proxy 설정 방법

React는 SPA(Single Page Application)이므로 Build 결과로 생성되는 html은 index.html 하나 뿐이다.

따라서 Nginx는 정적 페이지인 index.html만 응답하고, 그 외 데이터 요청은 API 서버에게 한다.

1) 최초 웹페이지 도메인 진입 (http://ip:port/)
    → Nginx가 직접 index.html 응답

2) 그 외 웹 페이지에서 서버에 요청
    → Reverse-Proxy를 이용해 API 서버에 요청 pass

 

nginx.conf

구체적으로 아래와 같이 URI에 따라 Reverse-Proxy 설정을 한다

1. location / {...}
   • root: 도메인(/)로 접속했을 때 response할 index.html 등 정적 파일이 모여있는 root 디렉토리
   • index: 도메인으로 접속했을 때 Nginx가 응답할 파일. index.html, index.htm을 root에서 순차적으로 찾는다
   • try_files
     $uri, $uri/ 경로가 root에 존재하면 해당 경로를 그려주고, 존재하지 않으면 /index.html을 rewrite한다.
     는 index.html 한 개만 response하는 SPA이므로 react-router를 이용해 내부적으로 URI를 변경하고,
      주소창을 수정만 해준다.
     즉, react-router를 이용해 /movie라는 경로로 이동했을 때 movie 페이지를 보여주도록 만든다면, 브라우저의 주소창은http://localhost/movie으로 변경될 것이다. 하지만, 아래의 설정을 보면 /movie로 접속했을 때 response하는 정보는 없다. 따라서 /movie 주소에서 새로고침하면 404 에러가 발생할 것이다. 이를 위해 현재 주소창에 입력된 uri가 없다면($uri, $uri/) 현재 유저가 보고있는 index.html을 rewrite하도록 하는 것이다.
2. location /api { ... } :  /api로 요청이 올 때: proxy_pass에 작성된 URL에 요청을 pass함

 

http {
	...
    
    server {
        listen       80;
        server_name  localhost;

        # 도메인(/)으로 접속: Nginx에서 react로 빌드 된 index.html response
        location / {
            root   html;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        # /api 경로로 요청이 올 경우: API Server IP로 proxy pass
        location /api {
            proxy_pass http://[API Server IP]:[PORT];
        }
    }
}

 

 

정리하며 생긴 의문점과 답

Q. 아래처럼 작성하면 /path 아래 경로는 무조건 proxy_pass ? 예를 들어, api uri가 @GetMapping("/path/path2/path3") 처럼 /path 아래로 depth가 깊어져도 전부 proxy_pass에 적용되는지?

A. Yes

localhost /path {
  proxy_pass ...
}

 

 

Q. 아래처럼 작성하면 @GetMapping("/path") 도 api 서버에서 걸릴까?

localhost /path/path2 {
  proxy_pass ...
}

A. No

 

 

Reverse-Proxy 설정 Reference

https://jjeongil.tistory.com/1490

Linux : Nginx Reverse Proxy 설정 방법, 예제, 명령어

https://fred16157.github.io/etc/nginx-reverse-proxy/

Nginx로 Reverse Proxy 설정하기