reactjs - 带代理的 Webpack - 开发服务器已断开连接

问题描述

在我的 React 应用程序中，建立连接大约一分钟后出现以下错误：

The development server has disconnected.
Refresh the page if necessary.

如果我刷新，它会再次连接，只是在一分钟后再次断开连接。

Webpack 是通过create-reac-app.

这是我的package.json：

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-alert": "^5.5.0",
    "react-dom": "^16.8.6",
    "react-hot-loader": "^4.5.3",
    "react-html-parser": "^2.0.2",
    "react-player": "^1.13.0",
    "react-router-dom": "^5.0.0",
    "react-scripts": "^3.3.0",
    "react-transition-group": "^4.3.0",
    "spotify-web-api-js": "^1.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.11.2"
  }
}

我使用nginx代理反向，具有以下配置：

server {

  listen 80;

  location / {
    proxy_pass        http://client:3000;
    proxy_redirect    default;
    proxy_set_header  Upgrade $http_upgrade;
    proxy_set_header  Connection "upgrade";
    proxy_set_header  Host $host;
    proxy_set_header  X-Real-IP $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header  X-Forwarded-Host $server_name;
  }

  location /users {
    proxy_pass        http://web:5000;
    proxy_redirect    default;
    proxy_set_header  Upgrade $http_upgrade;
    proxy_set_header  Connection "upgrade";
    proxy_set_header  Host $host;
    proxy_set_header  X-Real-IP $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header  X-Forwarded-Host $server_name;
  }
}

如果我去http://localhost:3000/，我不会遇到这个问题，所以它必须与代理有关。

日志：

client_1 ℹ ｢wds｣: Project is running at http://171.13.0.12/
client_1 ℹ ｢wds｣: webpack output is served from /
client_1 ℹ ｢wds｣: Content not from webpack is served from /usr/src/app/public
client_1 ℹ ｢wds｣: 404s will fallback to /index.html
Starting the development server...

这是我的webpack.config.js文件：

https://pastebin.com/HF78WjLL

编辑：根据下面的答案，我尝试将我的网络添加到package.json，如下所示：

"scripts": {
    "start": "HOST='0.0.0.0' react-scripts start",
    ...,
  }

但同样的错误仍然存在，就像以前一样：它连接并快速断开连接。

我应该如何解决这个问题？

标签： reactjsnginxnpmwebpackdocker-compose

好吧，react-scripts 3.3.0使用代理确实是个问题。

根据最近一期：https ://github.com/facebook/create-react-app/issues/8203 ，

这与 nginx 的默认60s 规则有关。似乎以前的版本会在 60 秒后超时时重新加载 websocket 连接。proxy_read_timeout react-scripts

因此，将以下行添加到 nginx'sdev.conf中，如下所示：

location / {
    proxy_pass        http://client:3000;
    proxy_redirect    default;
    proxy_set_header  Upgrade $http_upgrade;
    proxy_set_header  Connection "upgrade";
    proxy_set_header  Host $host;
    proxy_set_header  X-Real-IP $remote_addr;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header  X-Forwarded-Host $server_name;

    # the following two timeout rules fix CRA WDS disconnects after 60s
    proxy_read_timeout 86400s;
    proxy_send_timeout 86400s;
  }

解决了这个问题。

reactjs - 带代理的 Webpack - 开发服务器已断开连接

问题描述

解决方案

推荐阅读