現在の位置: ホーム> 最新記事一覧> nginxの完全なガイドWebSocketプロキシサポートの構成

nginxの完全なガイドWebSocketプロキシサポートの構成

M66 2025-07-09

WebsocketプロトコルとNginxプロキシの関係

WebSocketは、永続的な接続をサポートするTCPベースの双方向通信プロトコルであり、リアルタイム通信、オンラインチャット、ライブブロードキャストプッシュ、その他のシナリオで広く使用されています。一般的に、データフローはプロキシサーバーを介してフロントエンドとバックエンドの間に転送する必要があり、Nginxは高性能リバースプロキシサーバーとして、WebSocketの要求転送タスクを適切に完了できます。

nginx環境をインストールして準備します

構成を開始する前に、Nginxがシステムにインストールされていることを確認する必要があります。インストールされていない場合は、使用するオペレーティングシステムに従ってパッケージマネージャーまたはソースコードを介してインストールできます。

nginx構成はWebSocketをサポートします

通常/etc/nginx/nginx.confにあるnginxのメイン構成ファイルを開き、次のコンテンツをHTTPブロックに追加します。

 map $http_upgrade $connection_upgrade {
    default upgrade;
    ''      close;
}

upstream backend {
    server 127.0.0.1:8080;
}

マップ指令は、アップグレードヘッダーの情報を処理して、WebSocketの接続要件に適応するために使用されます。上流の構成は、バックエンドアプリケーションサーバーのアドレスを定義します。

次に、サーバーブロックのWebSocketリクエストを処理する構成を追加します。

 location /websocket {
    proxy_pass http://backend;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;
}

この構成ブロックの目的は、 /websocketパスからバックエンドサービスへのリクエストを転送し、必要なWebSocketフィールドがHTTPリクエストヘッダーに保持されるようにすることです。

nginxを再起動して、構成を有効にします

変更構成が完了した後、NGINXサービスをリロードまたは再起動する必要があります。次のコマンドを実行するだけです。

 <span class="fun">Sudo Service Nginx Restart</span>

構成が正常に有効になる前に、構文エラーやポート占有率がないことを確認してください。

フロントエンドの例テストWebSocket接続

サーバー側の構成を完了した後、簡単なフロントエンドの例を使用して、WebSocket接続が正常に確立されているかどうかをテストできます。これがJavaScriptコードの例です。

 var ws = new WebSocket("ws://your_domain/websocket");

ws.onopen = function() {
    console.log("Connected to WebSocket");
};

ws.onmessage = function(event) {
    console.log("Received message: " + event.data);
};

ws.onclose = function() {
    console.log("Disconnected from WebSocket");
};

上記のコードをHTMLファイルに埋め込みました。ブラウザでページを開いた後、コンソールが「WebSocketに接続されている」出力を出力すると、接続が成功することを意味します。

要約します

この記事の構成手順を通じて、NGINXプロキシサーバーはWebSocketプロトコルをサポートできるため、効率的な双方向通信機能を実現できます。このアーキテクチャは、オンラインゲーム、リアルタイムデータダッシュボード、チャットシステムなど、リアルタイムのインタラクションを必要とするシナリオに特に適しています。Nginxは中間プロキシとしてのみ存在し、実際のWebSocketサービスはバックエンドアプリケーションによって処理されていることに注意してください。