web-dev-qa-db-ja.com

webpack-dev-server内のプロキシWebSocket接続

Webpack開発サーバー内でwebsocket接続をプロキシすることは可能ですか？通常のHTTPリクエストを別のバックエンドにプロキシする方法を知っていますが、おそらくプロキシ構成のターゲットがhttp：// ...で始まるため、WebSocketでは機能しません。

proxywebsocketwebpackwebpack-dev-server
12
Martin Grůber

Webpack-dev-serverのバージョン1.15.0は、WebSocket接続のプロキシをサポートしています。構成に以下を追加します。

devServer: {
  proxy: {
    '/api': {
       target: 'ws://[address]:[port]',
       ws: true
    },
  },
}
23
Mr. Spice

Webpack開発サーバーはws接続のプロキシをサポートしていません まだ 。

それまでは、webpackサーバーにhttp-proxyを追加することで、手動でプロキシを実装できます。

  • package.jsonに新しい依存関係を追加します。

    "http-proxy": "^1.11.2"

  • upgradeイベントをリッスンして、WebSocket接続を手動でプロキシします

    // existing webpack-dev-server setup
// ...
var server = new WebpackDevServer(...);

proxy = require('http-proxy').createProxyServer();
server.listeningApp.on('upgrade', function(req, socket) {
  if (req.url.match('/socket_url_to_match')) {
    console.log('proxying ws', req.url);
    proxy.ws(req, socket, {'target': 'ws://localhost:4000/'});
  }
});
//start listening
server.listen(...)

注（これをしばらく使用した後）

socket.ioはWebpackDevServerによってコードの変更をブラウザに通知するために使用されるため、WebSocketのプロキシに問題があります。 socket.ioはプロキシWebSocketと競合する可能性があります。私の場合、サーバーがvery迅速に応答しない限り、ハンドシェイクがサーバーから返される前に接続が切断されていました。

その時点で、私はWebpackDevServerを捨てて、 react-hot-boilerplate に基づくカスタム実装を使用しました。

5
jesenko

@氏。スパイスの答えは正しいです。ただし、さらに単純化することもできます。 http-proxy-middleware を確認してください。次のように設定できます。つまり、ws: trueを追加し、他の設定を通常どおりに保持します。

// proxy middleware options
var options = {
        target: 'http://www.example.org', // target Host
        changeOrigin: true,               // needed for virtual hosted sites
        ws: true,                         // proxy websockets
        ...
1
Qiulang