带有 NGINX proxy_pass 的 Webpack 开发服务器

Posted 2023-02-16

【中文标题】带有 NGINX proxy_pass 的 Webpack 开发服务器

【英文标题】：Webpack Dev Server with NGINX proxy_pass

【发布时间】：2017-03-23 19:31:17

【问题描述】：

我试图让webpack-dev-server 在 Docker 容器中运行，然后通过 nginx 主机访问它。初始 index.html 加载，但无法连接到开发服务器的 Web Sockets 连接。

VM47:35 WebSocket 连接到“ws://example.com/sockjs-node/834/izehemiu/websocket”失败：WebSocket 握手期间出错：意外响应代码：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;
  

【参考方案1】：

代理密码应该是你的 webpack-dev-server 容器的 ip 和端口，你需要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";

另外不要忘记将 poll 添加到你的 webpack-dev 中间件

  watchOptions: 
    aggregateTimeout: 300,
    poll: 1000
  

【讨论】：

我在 HTTPS 服务器的情况下做了更多的工作并且遇到了一些问题，并解决了这些问题并在此处发布了答案：***.com/questions/43081342/… 这将对通过这篇文章的其他人有所帮助。

我遇到了类似的问题（nx.dev + React + nginx），proxy_redirect 不是必需的。更重要的是它可能是错误的并导致无效的重定向。