WebSocket API에서 Node.js 및 Socket.IO와 함께 NGINX 및 NGINX Plus 사용하기

Patrick Nommensen

이 게시물에서는 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.io 명령을 실행하여 Socket.IO를 설치하세요.

이 예제에서는 실시간 앱의 Socket.IO 서버가 5000번 포트에서 실행 중이라고 가정합니다. 다음은 server.js Node 애플리케이션 파일의 템플릿입니다. 서버 역할을 하며 들어오는 요청을 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);
    });
  });
});

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

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

NGINX 구성

업스트림 선언

애플리케이션에 여러 인스턴스가 있는 경우 NGINX와 NGINX Plus는 부하를 분산하고 사용자 세션을 여러 노드에 배포할 수 있습니다. NGINX 또는 NGINX Plus 구성의 http 컨텍스트에 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 프로토콜은 HTTP/1.1에서 도입된 Upgrade 헤더를 사용하므로 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 블록을 함께 사용하면, 다음 location 블록은 http://app.domain.com/assets/의 콘텐츠에 대한 클라이언트 요청에 로컬 /path/to/assets 디렉터리의 파일을 제공하여 응답하도록 NGINX에 지시합니다. 정적 파일 처리를 추가로 최적화하거나 필요에 맞게 캐시 만료 설정을 지정할 수 있습니다.

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

추가 자료

• WebSocket 프록시로서의 NGINX
• NGINX와 NGINX Plus 기능 비교
• NGINX Plus 기술 사양

NGINX Plus를 사용해 보려면 지금 30일 무료 평가판을 시작하거나 사용 사례에 대해 논의하려면 문의하세요.

작성자 소개

Patrick Nommensen

Patrick Nommensen의 다른 블로그 게시물