개요

location을 통한 포워딩를 참고하여, Chat 서버의 API와 Spring 서버의 API 접근 경로를 다음과 같이 수정을 마쳤다.

• location / { proxy_pass http://localhost:8080 } ⇒ Spring 서버 API
• location /chat/ { proxy_pass http://localhost:4000/ } ⇒ Chat 서버 API

하지만 소켓 통신은 제대로 연결되지 않았고, Socket.IO 공식 문서를 참고하여 문제를 해결하고자 한다.

1. /chat/socket.io로 통일 및 NGINX 또한 경로 일관성 유지

1. 서버측 socket io 설정 시, Client 측 Path와 맞춤

   const io = new Server(server, {
     path: '/chat/socket.io/',  // 경로를 '/chat/socket.io'로 설정
     cors: {
       origin: ['<http://localhost:3000>', '<https://yourdomain.com>'],
       methods: ['GET', 'POST'],
       credentials: true
     }
   });
   

2. NGINX 또한 일관적인 path 경로를 유지. Socket 통신을 위한 설정추가

   https://socket.io/docs/v3/reverse-proxy/

   • 전체

           location /chat/socket.io/ {
                   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;
                   
                   # Socket 통신을 위한 설정
   				        proxy_http_version 1.1;
   					      proxy_set_header Upgrade $http_upgrade;
   				        proxy_set_header Connection "upgrade";
                   
                   proxy_pass <http://127.0.0.1:4000/chat/socket.io/>;
                   proxy_redirect off;
           }
   

3. 프론트 또한 일관적인 path 경로 유지.

   • 해당 방식이여도 상관없음

   상관있다.

   • URL은 반드시 도메인부분만 입력해야한다.

     const newSocket = io("<https://domain.com>", {
     	path: '/chat/socket.io/
     })
     

결과

위처럼 Socket 통신을 위한 설정만 추가된다면, 잘 동작하는 것을 확인할 수 있다.

현재 백엔드는 테스트, 배포 모두 완료되었으며, 프론트 쪽 코드만 수정하면 된다.