Node.js 및 Socket.IO(WebSocket API)와 함께 NGINX 및 NGINX Plus 사용

게시물에서는 Node.js와 Socket.IO와 함께 NGINX와 NGINX Plus를 사용하는 것에 대해 이야기하겠습니다. WebSocket과 NGINX로 실시간 웹 애플리케이션을 빌드하는 것에 대한 게시물은 꽤 인기가 있었으므로 이 게시물에서는 Socket.IO를 사용하여 문서와 모범 사례를 계속 설명하겠습니다.

Node.js와 Socket.IO와 함께 NGINX를 사용해야 하는 이유는 무엇입니까?

Socket.IO는 Node.js 애플리케이션의 등장으로 인해 꽤 인기를 얻은 WebSocket API입니다. 이 API는 온라인 게임이나 채팅과 같은 실시간 앱을 간단하게 구축할 수 있기 때문에 잘 알려져 있습니다. NGINX 1.3.13 이상과 모든 NGINX Plus 릴리스는 WebSocket 연결의 프록싱을 지원하여 Socket.IO를 활용할 수 있습니다. WebSocket 프로토콜은 단일 TCP 연결을 통해 풀듀플렉스 또는 양방향 통신을 허용합니다.

프로덕션에서 실행되는 애플리케이션은 일반적으로 포트 80(HTTP), 포트 443(HTTPS) 또는 둘 다에서 실행해야 합니다. 애플리케이션의 여러 구성 요소가 사용자와 상호 작용하거나 포트 80에서 웹 서버를 사용하여 다른 자산을 제공하는 경우 이는 어려울 수 있습니다. 이는 Socket.IO 서버로 프록시 해야 하며 NGINX가 이를 수행하는 가장 좋은 방법입니다. 백엔드 애플리케이션의 인스턴스가 하나이든 수백 개이든 NGINX는 여러 노드를 사용할 때 업스트림의 부하를 분산할 수도 있습니다.

Socket.IO 구성

Node.js를 설치하려면 적절한 배포판을 다운로드하세요 (또는 패키지 관리자 로 설치하세요 ). npm install socket.ioSocket.IO를 설치하려면 명령을 실행하세요.

이 예제에서는 실시간 앱의 Socket.IO 서버가 포트 5000에서 실행 중이라고 가정합니다. 다음은 server.js 노드 애플리케이션 파일의 템플릿입니다. 이는 서버 역할을 하고 들어오는 요청을 Socket.IO 서버를 실행하는 적절한 포트로 라우팅하는 기본 프로그램입니다.

var io = require('socket.io').listen(5000); 
io.sockets.on('connection', function (socket) {
  socket.on('set nickname', function (name) {
    socket.set('nickname', name, function () {
      socket.emit('ready');
    });
  });
 
  socket.on('msg', function () {
    socket.get('nickname', function (err, name) {
      console.log('Chat message by ', name);
    });
  });
});

클라이언트에 전달되는 파일(예: index.html) 에 다음과 같은 JavaScript 코드를 추가합니다 . 이 예에서는 사용자의 브라우저로 WebSocket을 생성하기 위해 애플리케이션에 대한 연결을 요청합니다.

<script src="/socket.io/socket.io.js"></script>
<script>     var socket = io(); // your initialization code here.
</script>

NGINX 구성

Upstream 선언

NGINX 및 NGINX Plus는 애플리케이션에 여러 인스턴스가 있는 경우 사용자 세션을 여러 노드에 로드 밸런싱하고 분산할 수 있습니다. httpNGINX 또는 NGINX Plus 구성의 컨텍스트 에서 upstream업스트림 그룹의 노드를 정의하는 블록을 포함합니다.

다음 예에서 보듯이, 지시문 weight에 매개변수를 포함시켜 server해당 지시문으로 향하는 트래픽 비율을 설정할 수 있습니다. 여기서 srv1.app.com은 다른 서버보다 5배 더 많은 세션을 수신합니다. NGINX Plus는 향상된 부하 분산 방법과 세션 지속성, 상태 검사, 확장된 상태 보고서, 부하 분산된 서버 그룹의 즉석 재구성을 추가하여 NGINX의 역방향 프록시 기능을 확장합니다.

# in the http{} configuration block
upstream socket_nodes {
    ip_hash;
    server srv1.app.com:5000 weight=5;
    server srv2.app.com:5000;
    server srv3.app.com:5000;
    server srv4.app.com:5000;
}

가상 호스트 구성

이제 업스트림 서버 그룹이 선언되었으므로 가상 서버를 구성하여 트래픽을 해당 서버로 전달해야 합니다. 최소한 지시어를 포함하고 proxy_pass업스트림 그룹의 이름을 지정합니다. WebSocket 프로토콜은 UpgradeHTTP/1.1에 도입된 헤더를 사용하므로 지시어를 포함합니다 proxy_http_version.

server {
    server_name app.domain.com;
    location / {
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
        proxy_pass http://socket_nodes;
    }
}

정적 파일은 어떤가요?

정적 자산을 전달하려면 NGINX 프록시 요청을 업스트림 Node.js 인스턴스로 보낼 수 있지만 

대부분의 경우 NGINX에서 직접 제공하는 것이 더 효율적입니다.

server_name위 블록 의 지시문 과 함께 server다음 블록은 NGINX에 로컬 /path/to/assets 디렉터리 에서 제공함으로써 http://app.domain.com/assets/location 의 콘텐츠에 대한 클라이언트 요청에 응답하라고 지시합니다 . 

정적 파일 처리를 더욱 최적화하거나 필요에 맞는 캐시 만료 설정을 설정할 수 있습니다.

location /assets {
    alias /path/to/assets;
    access_log off;
    expires max;
}

문제 해결

다음 오류가 표시되면 NGINX 1.3 이전 버전을 실행 중일 가능성이 큽니다. 

WebSocket 사용은 NGINX 1.3.13 이상에서 지원됩니다.

WebSocket connection to '...' failed: Error during WebSocket handshake: 'Connection' header value is not 'Upgrade': keep-alive socket.io.js:2371

위 내용과 같이 NGINX Plus를 활용하여 Demo 가 필요하시면 하단의 전문가에게 상담받기 버튼을 클릭해주세요