Back-End/Server

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

유자맛바나나 2022. 1. 9. 22:12

 

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 설정 방법, 예제, 명령어

역방향 프록시는 클라이언트 요청을 가져와서 하나 이상의 프록시 서버에 요청을 보내고 응답을 가져오고 서버의 응답을 클라이언트에 전달하는 서비스입니다. 성능과 확장성 때문에 NGINX는 HTT

jjeongil.tistory.com

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

 

Nginx로 Reverse Proxy 설정하기

Node.js로 HTTP 서버 프로젝트를 개발하고 실제 서버에 배포할 땐 Apache나 Nginx 같은 프록시 서버도 같이 이용하는 것을 권장한다. 이유는 보안상의 이점, 캐시 기능으로 리소스 낭비 방지 등이 있다.

fred16157.github.io