Nginx proxy_pass 및 Rewrite 설정

1. proxy_pass, upstream

브라우저에서 바로 API 서버로 통신을 할 수 없기 때문에 React(Nginx)는 Express 서버와 통신을 해야한다.

Express 컨테이너의 Cluster IP를 알아야 브라우저에서 Express 서버로 요청을 프록시하여 전달할 수 있는데, 여기서 proxy_pass를 사용한다.

// nginx.conf
upstream express-server {
    server backend-server:8080;
}

...

location /api {
    ...
    proxy_pass   http://express-server;
}

backend-server는 .yaml 파일의 name 필드 값이다.

/api/~~~ 의 요청이 오면 nginx는 backend-server의 클러스터 IP를 가져와서

ex) http://10.23.1.1:8080/api/~~~ 로 요청을 전달한다.

2. rewrite

/api/~~~에서 /api 부분은 제외하고 요청을 보내고 싶다면 rewrite 구문을 사용하면 된다.

// nginx.conf

location /api {
    rewrite ^/api(.*)$ $1?$args break;
    proxy_pass   http://express-server;
    ...
}

설명을 해보자면,

/api/posts?id=1 이라는 요청이 들어왔을 때, /api 이후에 오는 uri가 $1 이 된다.
(정규표현식 capturing group)

nginx에서 proxy를 사용할 때 기본적으로 GET요청 시 같이 보내는 argument가 보내지지 않는데,

&args 변수를 사용하면 같이 보낸 argument에 접근할 수 있다.

즉, /api/posts?id=1 은 /posts?id=1 로 rewrite 되어서 전송이 된다.