• Login

---

nginxによるsocket.ioプロキシの設定

nginx のインストールと設定 で nginx を導入した目的は、WebSocketを使用したWebアプリを提供することであった。 なので今回は実際に socket.io を使用した 簡単なWebアプリ にリバースプロキシでアクセスしてみる。

設定例

location /chat/ {
    proxy_pass  http://127.0.0.1:3000/;

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";

    proxy_redirect http://127.0.0.1:3000/ https://kobalab.net/chat/;
    proxy_redirect / /chat/;

    proxy_cookie_path / /chat;
}

設定項目

location

proxyに割り当てる nginx 側のパス。/chat/ とした。

proxy_pass

proxyのアクセス先のURL。/ で終端させるとリクエストURIを /chat/ → / に変換してアクセスするようになる。^*1

proxy_http_version

使用するHTTPプロトコルのバージョン。1.1 以降でないとWebSocketをサポートしていない。

proxy_set_header

ハンドシェイク時にproxyが送信するネゴシエーションヘッダ。この通り設定すればOK。

proxy_redirect

ステータスコード 3xx のリダイレクト応答があった場合の Location ヘッダの書き換え方法^*2。 http:// ではじまる完全URLと、/ ではじまる絶対パスについて記述するとよい。

proxy_cookie_path

応答に Set-Cookie ヘッダがあった場合の path の書き換え方法^*3。

注意事項

socket.io のプログラム例では接続の際に

    let socket = io(); 

としているが、プロキシがパスを変更する場合はこれでは動作しない^*4。 以下のような修正が必要^*5。

    let socket = io("/", { path: location.pathname + 'socket.io/' });

• リバースプロキシ利用を考慮した接続方法に変更 · kobalab/test-chat@4104674