web-dev-qa-db-fra.com

Serveur de développement Webpack avec NGINX proxy_pass

J'essaie d'obtenir webpack-dev-server s'exécutant dans un conteneur Docker puis y accédant via un hôte NGINX. La première index.html se charge mais la connexion Web Sockets au serveur de développement ne peut pas se connecter.

VM47: 35 La connexion WebSocket à "ws: //example.com/sockjs-node/834/izehemiu/websocket" a échoué: erreur lors de l'établissement de liaison WebSocket: code de réponse inattendu: 400

J'utilise la configuration suivante.

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;
  }
}
node.jsnginxwebsocketwebpackwebpack-dev-server
18
Joshua Barnett

Le pass proxy doit être l'ip et le port de votre conteneur webpack-dev-server et vous avez besoin de 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";
}

N'oubliez pas non plus d'ajouter un sondage à votre middleware webpack-dev

  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000
  }
19
Žarko Selak