带有NGINX proxy_pass的Webpack开发服务器 [英] Webpack Dev Server with NGINX proxy_pass

问题描述

我试图让webpack-dev-server在Docker容器中运行，然后通过NGINX主机对其进行访问.初始index.html已加载，但与开发服务器的Web套接字连接无法连接.

I'm trying to get webpack-dev-server running inside a Docker container then accessing it through a NGINX host. The initial index.html loads but the Web Sockets connection to the dev server cannot connect.

VM47:35 WebSocket连接到'ws://example.com/sockjs-node/834/izehemiu/websocket'失败:WebSocket握手期间出错:意外的响应代码:400

VM47:35 WebSocket connection to 'ws://example.com/sockjs-node/834/izehemiu/websocket' failed: Error during WebSocket handshake: Unexpected response code: 400

我正在使用以下配置.

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;
  }
}

推荐答案

代理密码应该是webpack-dev-server容器的ip和端口，并且需要proxy_redirect off;

Proxy pass should be ip and port of your webpack-dev-server container and you need 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";
}

也不要忘记将民意调查添加到您的webpack-dev中间件

Also don't forget to add poll to your webpack-dev middleware

  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000
  }

这篇关于带有NGINX proxy_pass的Webpack开发服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！