NGINX로 Reverse Proxy 설정하기

우리 프로젝트는 여태까지

공유기에서 80 포트 (프론트) 와 8080 포트 (백엔드) 를 모두 열어놓고 사용했다.

 

그러나 이 방식으로는 HTTPS를 제대로 적용할 수 없다.

(HTTPS를 적용하려면 프론트와 백엔드 모두 443 포트가 되어야하니까)

 

따라서 프론트엔드 서버와 백엔드 서버의 포트번호를 통일하기 위해

NGINX 를 Reverse Proxy로 사용하기로 했다.

 

계획

Nginx 가 앞에서 80 포트 요청을 받으면

URI 에 따라 백엔드 (8080 포트) 혹은 프론트 (3000 포트) 로 건내주도록 한다.

이렇게 함으로써 백/프론트 모든 요청이 80 포트로 이루어지도록 한다.

 

---

1. 백엔드 api 변경

백엔드 api 가 "/api" 로 시작되도록 변경했다.

요청 uri가 /api 로 시작하면 백엔드 프로세스로, 그렇지않으면 프론트 프로세스로 전달하기 위해서다.

# application.yml 에 아래 코드 추가

server:
  servlet:
    context-path: /api

2. nginx 설치

$ sudo apt-get install -y nginx

$ nginx -v
nginx version: nginx/1.14.2

$ sudo find / -name nginx.conf
/etc/nginx/nginx.conf

$ service nginx status

$ service nginx reload

3. Default Configuration 파일 unlink

default configuration 에 의해서 아래와 같이 나오는 듯 하다.

 

이 기본 설정을 없애보자.

 

/etc/nginx/nginx.conf 를 열어보면 다음과 같은 부분이 있다.

http {
        ...

        ##
        # Virtual Host Configs
        ##
        include /etc/nginx/conf.d/*.conf;
        include /etc/nginx/sites-enabled/*;
        ...
}

이 부분에서 우리가 별도로 커스터마이즈한 conf 파일이 포함 된다.

default configuration 의 경우 실제 파일 위치는 다른곳에 있고 /etc/nginx/sites-enabled/ 경로에 심볼릭 링크가 생성되어있다.

고로 /etc/nginx/sites-enabled/ 경로의 default 설정파일 심볼릭 링크를 제거하면 default 설정 적용이 해제된다.

$ sudo unlink /etc/nginx/sites-enabled/default

 

4. 커스텀 conf 파일 작성

1

/etc/nginx/sites-available 에 footprint.conf 를 생성

server {
  listen 80;
  server_name footprint;

  location /api {
    proxy_pass http://localhost:8080;
  }

  location / {
    proxy_pass http://localhost:3000;
  } 
}

 

2

/etc/nginx/sites-enabled 경로에 심볼릭 링크 생성

$ sudo ln -s /etc/nginx/sites-available/footprint.conf /etc/nginx/sites-enabled/footprint.conf

3

nginx 재가동

$ sudo service nginx reload

 

설정파일에 문법적 에러가 존재할 경우 reload 에 실패한다.

이 때는 /var/log/nginx 에 있는 error.log 를 열어보자. 실패 이유가 친절하게 써있을 것이다.

 

 

 

테스트해보니 사이트가 잘 실행되었다.

기존에 공유기에서 열어두었던 8080, 3000 이런 포트들은 이제 모두 닫고

SSH, 80 포트만 열어둔 상태가 되었다!

---

참고 (출처)

1. nginx 기초 사용법 정리 1 (conf, log, directive, Serving Static Content 의 과정에 대해서)

https://aimaster.tistory.com/11?category=344242

 

2. nginx 기초 사용법 정리 2 (location, proxy)

https://aimaster.tistory.com/12?category=344242

 

3. nginx 재가동 방법 restart VS reload

https://medium.com/sjk5766/nginx-중단-없이-변경된-설정-반영하는-방법-b0cc36a5fe59

 

4. NGINX 에서 Reverse Proxy 셋팅하는 방법

https://phoenixnap.com/kb/nginx-reverse-proxy