Reactの開発環境の前にnginxのリバースプロキシを置くときの設定

Web

Reactの開発環境の前にnginxのリバースプロキシを適当に置くと、以下のようなエラーが出る。*1

WebSocket connection to 'wss://127.0.0.1/sockjs-node' failed: Error during WebSocket handshake: Unexpected response code: 404

これは、Reactの開発環境がWebSocketを使っているためである。 nginxでWebSocketをリバースプロキシするときは、ヘッダをWebSocket側に送ってやらないといけない。 （ブラウザはヘッダを送っているが、nginxが勝手に中継してくれないということ。）

        # For React Debug
        location = /sockjs-node {
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";

            proxy_pass http://host.docker.internal:3000;
        }

*1:本当はそれぞれで閉じてテストできるようにすべきなんだけど。。。