Webpack Dev-Server mit NGINX proxy_pass

Ich versuche webpack-dev-server laufen in einem Docker-container dann Zugriff über einen NGINX-host. Die ersten index.html lädt aber die Web-Sockets-Verbindung zu den dev-server kann nicht hergestellt werden.

VM47:35 WebSocket-Verbindung zu 'ws://Beispiel.com/sockjs-Knoten/834/izehemiu/websocket' Fehler: Fehler bei der WebSocket-handshake: Unexpected response code: 400

Ich bin mit der folgenden config.

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;
  }
}
InformationsquelleAutor Joshua Barnett | 2016-11-09
  1. 24

    Proxy-pass sollte die ip und den port Ihres webpack-dev-server-container, und Sie müssen 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";
}

    Vergessen Sie auch nicht zu Umfrage hinzufügen zu Ihrem webpack-dev-middleware

      watchOptions: {
    aggregateTimeout: 300,
    poll: 1000
  }
    • Ich arbeitete auf dieser etwas mehr in den Fall von einem HTTPS-server und einige Probleme hatte und diese gelöst und gepostet, hier die Antwort: stackoverflow.com/questions/43081342/..., die hilfreich sein für andere, übergeben, obwohl dieser Beitrag.
    InformationsquelleAutor Žarko Selak
Schreibe einen Kommentar