하나의 물리 서버에 React 빌드파일과 Spring Boot Jar Tomcat WAS 배포를 위한 NGINX 설정

1. 문제 상황

클라우드 플랫폼을 사용할 수 없고 학교 서버실 물리 컴퓨터(Ubuntu 20.04)에 배포해야 하는 상황이다.
물리 컴퓨터도 단 1대만 사용할 수 있어서 모든 처리를 한 곳에서 해야한다.

이러한 상황에서 Nginx 설정하는 방법을 알아보자.

 

2. 문제 해결

우선 현재 Nginx는 Docker 컨테이너상에서 동작하고 있으므로
Nginx 컨테이너상의 /usr/share/html/html 경로와 내 물리서버에 React App을 Build한 결과물 폴더의 경로를 볼륨 매핑하는 과정이 먼저 필요하다.
또한 Nginx 컨테이너와 같은 네트워크 상의 kiosek-backend 이름의 실행되고 있는 컨테이너가 있다고 가정한다.

 

1. 사용자가 브라우저에서 http://test.kr 을 입력하여 나의 Nginx Web Server에 요청을 하면 build 결과물 중의 하나인 index.html Document를 브라우저로 전송한다.

 

2. 브라우저에서는 index.html 내부의 Script가 동작하여 js 파일을 실행하여  js파일 내부에 api 호출하는 스크립트가 동작하여 http://test.kr/api/v1/reservations 와 같은 API 요청이 다시 Nginx로 들어오게 된다.

 

3. 이때는 Spring Tomcat Server로 요청을 Proxy Pass해줘야 한다.

 

간단하게 위와 같은 순서로 동작한다.

---

✏️ 실제 https://kiosek.kr을 브라우저에 입력했을때 확인 가능한 Network Traffic

실제 https://kiosek.kr 실행결과

kiosek.kr의 요청의 Response로 index.html의 결과를 받아온것을 알 수 있다. 그 뒤로는 js, css, img파일등이 실행 및 렌더링되고
마지막칸에 reservations?....라는 호출이 발생한것을 볼 수 있는데 이의 Reuest URL을 확인해보면 https://kiosek.kr/api/v1/reservations?... 의 호출이 발생하여 Response 값을 WAS -> Web Server를 통해 받아오는 것을 볼 수 있다.

---

✏️  nginx.conf 파일 

아래는 위에서 설명한 것을 그대로 설정해놓은 설정파일 예시이다.

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;

    keepalive_timeout  65;

    upstream kiosek-backend {
		server <WAS 주소>
    }

    server {
        listen	80;
        listen [::]:80;
        server_name www.test.kr www.test.kr;
        
        location / {
            root /usr/share/nginx/html;
            index index.html;
            try_files $uri $uri/ /index.html;
        }
        
        location /api {
            proxy_pass		http://kiosek-backend;
            proxy_redirect		off;
            proxy_set_header	Host $host;
            proxy_set_header	X-Real-IP $remote_addr;
            proxy_set_header	X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header	X-Forwarded-Host $server_name;
            proxy_set_header	X-Forwarded-Proto $scheme;
        }


    }   
}