NGINXのWebpack Dev Server proxy_pass

Question

webpack-dev-serverをDockerコンテナ内で実行しようとしていて、NGINXホストからアクセスしています。 index.htmlの初期値はロードされますが、devサーバーへのWebソケット接続は接続できません。

VM47： 'WS：//example.com/sockjs-node/834/izehemiu/websocket' への35のWebSocket接続に失敗しました：のWebSocketハンドシェイク中にエラーが発生しました：予期しない応答コード：400

I次の設定を使用しています。

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

upstream webpack_dev_server { 
    server node; 
} 

server { 
    server_name _; 
    listen 80; 
    root /webpack_dev_server; 

    location/{ 
    proxy_pass http://webpack_dev_server; 
    } 

    location /sockjs-node/ { 
    proxy_pass http://webpack_dev_server/sockjs-node/; 
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    proxy_set_header Host $host; # pass the host header - http://wiki.nginx.org/HttpProxyModule#proxy_pass 

    proxy_http_version 1.1; # recommended with keepalive connections - http://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_http_version 

    # WebSocket proxying - from http://nginx.org/en/docs/http/websocket.html 
    proxy_set_header Upgrade $http_upgrade; 
    proxy_set_header Connection $connection_upgrade; 
    } 
} 

Answer 1

プロキシパスは、あなたのWebPACK-devのサーバーコンテナのIPアドレスとポートである必要がありますし、あなたのWebPACKの-devのミドルウェアに投票を追加することを忘れないでください。またproxy_redirect off;

location /sockjs-node { 
    proxy_set_header X-Real-IP $remote_addr; 
    proxy_set_header X-Forwarded-For $remote_addr; 
    proxy_set_header Host $host; 

    proxy_pass http://node:8080; 

    proxy_redirect off; 

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

が必要

watchOptions: { 
    aggregateTimeout: 300, 
    poll: 1000 
    }