SSL上のActioncableのwebsocket

反応アプリケーションで websocket を使用するために actioncable を使用していましたが、RoR バックエンドとやり取りしていました.私は http を超えていたので、開発中はすべて順調に進んでいました.

本番環境にデプロイすると、ポート 443 の React アプリケーションが http ポートでホストされているバックエンドに接続しようとしているため、バックエンドに適切なパスが必要であることに気付きました.そこで、バックエンド ルートの前に「/api_backend」を付けることにしました.その後、「/api_backend」URL を Nginx の proxy_pass にマップしました.

そのため、すべてが SSL、React フロントエンド、RoR バックエンドにありました.

問題はまだ解決しませんでした.開発に使用した websocket は http にあります. ws://接続が異常にエラーをスローします.インターネット上で、クライアント ブラウザの設定を変更するようにという誤解を招く議論があります.最後に、Ngnixでヘッダーを変更できるWebsocket接続にhttp接続をアップグレードする必要があることに気付きました.

        location /api_backend/cable{
                proxy_pass http://127.0.0.1:6001;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "Upgrade";
        }

上記のように、「アップグレード」と「接続」の2つのヘッダーを設定していました.私の場合、 $http_upgrade には「websocket」というテキストが含まれています.そして、「接続」ヘッダーを「アップグレード」のタイプに設定していました. Nginxを保存して再起動するとすぐに、websocketはwss://プロトコルでsslで動作していました.

写真クレジット: ガンファイト | N.C.ワイス(アメリカ人、1882年～1945年)