[BE] SFU와의 WebRTC 연결 수립 과정 구현 (ICE, DTLS, SDP)

deploy/https/nginx.backend.conf

@@ -1,8 +1,9 @@
 # 이제는 거의 동일
 worker_processes auto;
 
+# 4096개의 연결로 변경
 events {
-  worker_connections 1024;
+  worker_connections 4096;
 }
 
 http {
@@ -19,30 +20,84 @@ http {
     server main-backend-app-3:8080 max_fails=3 fail_timeout=10s;
   }
 
+  # websocket용 upstream
+  upstream main_backend_ws {
+    # load balancer를 hash로 해서 바뀌지 않도록 해야 한다. 
+    hash $arg_room_code consistent;
+
+    server main-backend-app-1:8080 max_fails=3 fail_timeout=10s;
+    server main-backend-app-2:8080 max_fails=3 fail_timeout=10s;
+    server main-backend-app-3:8080 max_fails=3 fail_timeout=10s;
+  }
+
   server {
     listen 80;
     server_name _;
 
-    # 마찬가지로 실제 배포 환경에서도 sse 연결이 가능하도록 하는 것이 중요하다. 
-    location ~ ^/api/cards/sse$ {
+    location = /api/ws {
+      return 301 /api/ws/;
+    }
+
+    location ^~ /api/ws/ {
+      if ($arg_room_code = "") { return 400; }
+
+      proxy_pass http://main_backend_ws;
+
+      # 전역적으로 설정했지만 안전성을 위해서 한번 더
+      proxy_http_version 1.1;
+
+      # 웹소켓 업그레이드 
+      proxy_set_header Upgrade $http_upgrade;
+      proxy_set_header Connection "upgrade";
+
+      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-Proto $scheme;
+      proxy_set_header X-Forwarded-Host $host;
+
+      # 연결 높이기 
+      proxy_read_timeout 3600s;
+      proxy_send_timeout 3600s;
+
+      # 실시간 성을 위해서 추가
+      proxy_buffering off;
+
+      # 이건 업스트림 변경을 일으키지 않게 한다.
+      proxy_next_upstream off;
+    }
+
+    # sse를 사용하는 경우 버퍼링을 꺼주고 오래 연결이 가능하도록 해주어야 한다. -> 지금은 사용하지 않지만 마지막에 sse가 있으면 이를 이용하도록 할 예정이다.
+    location ^~ /api/sse/ {
       proxy_pass http://main_backend_app;
 
       proxy_http_version 1.1;
       proxy_set_header Connection "";
+
       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-Proto $scheme;
 
+      # buffering 꺼주기 -> 실시간으로 바로 보낼 수 있도록 하기 위함이다. 
       proxy_buffering off;
       proxy_cache off;
       add_header X-Accel-Buffering no;
 
+      # 오랫동안 연결되도록 하기 1시간
       proxy_read_timeout 3600s;
       proxy_send_timeout 3600s;
 
+      # 응답을 메모리/디스크에 쌓지 않고 바로 전달하도록 한다. 
       proxy_request_buffering off;
+      chunked_transfer_encoding on;
+
+      # 스트리밍에 경우 업스트림을 교체하지 않는다. 
       proxy_next_upstream off;
+
+      # sse가 캐시되지 않도록 명시
+      add_header Cache-Control "no-cache, no-store";
+
       gzip off;
     }
 

deploy/https/nginx.gateway.conf

@@ -29,28 +29,55 @@ server {
   proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
   proxy_set_header X-Forwarded-Proto $scheme;
 
-  # keep alive 사용을 위한 체크
-  proxy_http_version 1.1;
-  proxy_set_header Connection "";
-
   # 443에도 certbot을 확인할 수 있도록 수정
   location /.well-known/acme-challenge/ {
     root /var/www/certbot;
   }
 
   # Docker에 dns 서버
-  resolver 127.0.0.11 ipv6=off;
+  # 최대 10초까지만 같은 이름을 쓰고 2초 까지 기다린다
+  resolver 127.0.0.11 ipv6=off valid=10s;
+  resolver_timeout 2s;
+
+  set $backend_upstream http://main-backend-nginx;
 
-  # test와 마찬가지로 sse 연결에 대해서 설정을 해두는 것이 중요하다.
-  location ~ ^/api/cards/sse$ {
-    proxy_pass http://main_backend_app;
+  # websocket 연결 설정 ( test 서버와 거의 동일 )
+  location = /api/ws {
+    return 301 /api/ws/;
+  } 
 
+  location ^~ /api/ws/ {
+    proxy_pass $backend_upstream;
+
+    # 전역적으로 설정했지만 안전성을 위해서 한번 더
     proxy_http_version 1.1;
-    proxy_set_header Connection "";
+
+    # 웹소켓 업그레이드 
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "upgrade";
+
     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-Proto $scheme;
+    proxy_set_header X-Forwarded-Host $host;
+
+    # 연결 높이기 
+    proxy_read_timeout 3600s;
+    proxy_send_timeout 3600s;
+
+    # 실시간 성을 위해서 추가
+    proxy_buffering off;
+  }
+
+
+  # test와 마찬가지로 sse 연결에 대해서 설정을 해두는 것이 중요하다. -> 지금은 사용하지 않지만 마지막에 sse가 있으면 이를 이용하도록 할 예정이다.
+  location ^~ /api/sse/ {
+    proxy_pass $backend_upstream;
+
+    # keep alive 설정
+    proxy_http_version 1.1;
+    proxy_set_header Connection "";
 
     proxy_buffering off;
     proxy_cache off;
@@ -60,13 +87,20 @@ server {
     proxy_send_timeout 3600s;
 
     proxy_request_buffering off;
-    proxy_next_upstream off;
     gzip off;
+    add_header Cache-Control "no-cache, no-store";
+
+    # 응답을 한번에 다 보내는게 아닌 조각 단위로 계속 나누어서 보내도록 설정
+    chunked_transfer_encoding on;
   }
 
   # backend로 연결
   location /api/ {
-    proxy_pass http://main-backend-nginx;
+    proxy_pass $backend_upstream;
+
+    # keep alive 사용을 위한 체크
+    proxy_http_version 1.1;
+    proxy_set_header Connection "";
 
     # gateway도 설정을 안하면 api가 기다리든 말든 끊어버리니 api gateway도 설정을 해주는 것이 중요하다. -> 나중에 업로드 api만 따로 변경
     client_max_body_size 10m;
@@ -75,16 +109,21 @@ server {
     proxy_read_timeout 1m;
   }
 
+  set $frontend_upstream http://frontend:3000;
+
   # NEXT에 캐싱서버 -> NEXT는 기본적으로 압축하는 로직이 존재한다. 
   location /_next/static/ {
-    proxy_pass http://frontend:3000;
+    proxy_pass $frontend_upstream;
     expires 1y;
     add_header Cache-Control "public, immutable";
     access_log off;
   }
 
   location / {
-    proxy_pass http://frontend:3000;
+    proxy_pass $frontend_upstream;
+
+    proxy_http_version 1.1;
+    proxy_set_header Connection "";
 
     # 연결 지연시간 설정
     proxy_connect_timeout 3s;

deploy/test/docker-compose.yml

@@ -39,6 +39,19 @@ services:
       - clobby-network
     restart: unless-stopped
 
+  # sfu 서버 -> 현재 sfu는 이걸로 가고 위에 로드밸런싱을 갖춘 아키텍처는 나중에 저장 로직으로 사용하면 된다. ( 배포는 또 다 분리할거니까 괜찮을 거다. )
+  sfu:
+    container_name: sfu
+    image: "${MAIN_BACKEND_IMG}:latest"
+    env_file:
+      - ./.env.backend
+    networks:
+      - clobby-network
+    # 보안 주의
+    ports:
+      - "40000-41999:40000-41999/udp"
+      - "40000-41999:40000-41999/tcp"
+
   # frontend 빌드 
   frontend:
     container_name: frontend

deploy/test/nginx.backend.conf

@@ -1,9 +1,9 @@
 # 동시에 처리 가능한 프로세스 수 설정 
 worker_processes auto;
 
-# 하나의 process는 1024개의 동시 연결이다.
+# 하나의 process는 4096개의 동시 연결이다.
 events {
-  worker_connections 1024;
+  worker_connections 4096;
 }
 
 http {
@@ -12,7 +12,7 @@ http {
     # load balancer 
     least_conn;
 
-    # backend 헬스 체크 추가
+    # backend 헬스 체크 추가 ( pool의 크기 )
     keepalive 64;
 
     # 10초 동안 3번의 연결실패가 일어나면 그 앱은 닫는다. 
@@ -22,16 +22,67 @@ http {
     server main-backend-app-3:8080 max_fails=3 fail_timeout=10s;
   }
 
+  # websocket용 upstream 추가
+  upstream main_backend_ws {
+    # sfu 서버로 사용하게 되어서 주석 처리 ( 나중에 websocket은 이걸 사용할 수 있다. )
+    # # load_balancer 떄문에 바뀌지 않도록 이를 수정해준다. ( room_id를 기반으로 앱을 매핑 )
+    # # consistent를 이용해서 서버가 늘거나 삭제되도 대부분은 그대로 서버를 유지하도록 한다. 
+    # hash $arg_room_code consistent; 
+
+    # server main-backend-app-1:8080 max_fails=3 fail_timeout=10s;
+    # server main-backend-app-2:8080 max_fails=3 fail_timeout=10s;
+    # server main-backend-app-3:8080 max_fails=3 fail_timeout=10s;
+    server sfu:8080;
+    keepalive 64;
+  }
+
   server {
     listen 80;
     server_name _;
 
-    # sse를 사용하는 경우 버퍼링을 꺼주고 오래 연결이 가능하도록 해주어야 한다. 
-    location ~ ^/api/cards/sse$ {
+    # 웹소켓 관련 추가
+    location = /api/ws {
+      return 301 /api/ws/;
+    }
+
+    location ^~ /api/ws/ {
+      # room_id가 없으면 에러를 발생시켜야 한다.
+      # nginx는 $arg_<파라미터이름>으로 매핑을 시킨다. 
+      # if ($arg_room_code = "") { return 400; }
+
+      proxy_pass http://main_backend_ws;
+
+      # 전역적으로 설정했지만 안전성을 위해서 한번 더
+      proxy_http_version 1.1;
+
+      # 웹소켓 업그레이드 
+      proxy_set_header Upgrade $http_upgrade;
+      proxy_set_header Connection "upgrade";
+
+      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-Proto $scheme;
+      proxy_set_header X-Forwarded-Host $host;
+
+      # 연결 높이기 
+      proxy_read_timeout 3600s;
+      proxy_send_timeout 3600s;
+
+      # 실시간 성을 위해서 추가
+      proxy_buffering off;
+
+      # 이건 업스트림 변경을 일으키지 않게 한다.
+      proxy_next_upstream off;
+    }
+
+    # sse를 사용하는 경우 버퍼링을 꺼주고 오래 연결이 가능하도록 해주어야 한다. -> 지금은 사용하지 않지만 마지막에 sse가 있으면 이를 이용하도록 할 예정이다.
+    location ^~ /api/sse/ {
       proxy_pass http://main_backend_app;
 
       proxy_http_version 1.1;
       proxy_set_header Connection "";
+
       proxy_set_header Host              $host;
       proxy_set_header X-Real-IP         $remote_addr;
       proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
@@ -48,10 +99,14 @@ http {
 
       # 응답을 메모리/디스크에 쌓지 않고 바로 전달하도록 한다. 
       proxy_request_buffering off;
+      chunked_transfer_encoding on;
 
       # 스트리밍에 경우 업스트림을 교체하지 않는다. 
       proxy_next_upstream off;
 
+      # sse가 캐시되지 않도록 명시
+      add_header Cache-Control "no-cache";
+
       gzip off;
     }