배포 환경에서 클라이언트‐서버 WS handshake

로컬에서는 돌렸을때 문제가 없었는데 도커 환경 위에서 구동을 할때 클라이언트와 서버 사이의 WS 통신에서 에러 메세지가 지속적으로 뜨는 것이 문제가 되었다. 이 때문에 채팅방에 들어와서 채팅을 입력하더라도 보이는 것이 없었기에 해당 문제를 해결해야 했다

우선 알아두면 좋을 브라우저와 도커 환경에서의 WS handshake 순서이다

sequenceDiagram
    participant Browser
    participant Client as Client(React/Vue):5173
    participant Nginx
    participant Backend as Backend:3000

    Browser->>Nginx: 1. HTTP GET /
    Nginx->>Client: 2. 프론트엔드 앱 전달
    Client->>Browser: 3. JS 로드 
    
    Browser->>Nginx: 4. WS 연결 요청 (/socket.io)
    Note right of Browser: ws://domain.com/socket.io
    Nginx->>Backend: 5. WS 연결 프록시
    Backend-->>Nginx: 6. WS Upgrade 응답
    Nginx-->>Browser: 7. WS 연결 수립
    
    Note over Browser,Backend: 8. WebSocket 양방향 통신

기존의 우리 코드

우선 클라이언트 쪽에서 WS setup을 위해 작성한 코드이다

const URL = 'https://inear.live/rooms';

export const socket = io(URL, {
  autoConnect: false
});

해당코드는 좋은 접근이다. 상기 되어있는 URL을 이용하여 접근을 시도할 경우 클라우드페어에서 알맞게 nginx에다가 http://{public_IP_주소}:80으로 요청을 포워딩할 것이기 때문이다

다만 놓친 몇가지가 있는데

일단 백엔드로 요청을 보내려면 /api prefix를 붙여야 해당 요청이 전송이 된다
로컬 환경이건 배포 환경이건 동일하게 DNS에 영향을 받지 않는 코드를 작성하고 싶으면 URL을 명시하기보다는 상대 경로를 쓰는 것이 더 용이하다
```
export const socket = io('/rooms', {
  path: '/api',
  autoConnect: false,
});
```

이렇게 설정을 진행하게 되면 다음과 같이 handshake 요청이 들어가게 된다

최초 handshake: /api/?EIO=4&transport=polling
WebSocket 연결: /api/?EIO=4&transport=websocket

다만 Socket.IO는 내부적으로 정해진 경로 패턴을 사용한다!!!!!!!!

/socket.io/?EIO=4&transport=polling
/socket.io/?EIO=4&transport=websocket

그렇기에 사실 보내는 요청은 경로가 /socket.io가 포함이 되어야한다. 그렇다면 수정해야할 사항들

클라이언트는 path에 /api가 아닌 /socket.io를 추가해야한다 (다만 이는 이미 default로 설정이 되어있기 때문에 사실 아무것도 설정을 안해줘도 된다)
```
export const socket = io('/rooms', {
  autoConnect: false,
});
```
백엔드는 요청을 처리하는게 /api 뿐만 아니라 하나가 더 생긴것이다: /socket.io 그러므로 default.d에서 설정을 또 해줘야한다

upstream backend {
    server server:3000;
}

server {
    listen 80;
    
    # 공통 헤더 설정
    proxy_http_version 1.1;
    proxy_set_header Host $host;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";

    location / {
        proxy_pass http://client:5173;
    }

    location /api {
        proxy_pass http://backend;
    }

    location /socket.io {
        proxy_pass http://backend;
    }
}