带代理的Webpack-开发服务器已断开连接 [英] Webpack with Proxy - The development server has disconnected

问题描述

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

In my React app, I'm getting the following error about a minute after connection is established:

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

如果我刷新，它将再次连接，仅在一分钟后断开连接.

If I refresh, it connects again, only to disconnect after a minute again.

Webpack是通过create-reac-app安装的.

Webpack was installed via 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代理反向，具有以下配置:

I use a nginx proxy reverse, with the following configuration:

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/，则不会遇到此问题，因此它必须与代理有关.

If I go to http://localhost:3000/, I don't face the issue, so it must be related to proxy.

日志:

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文件:

---

This is my webpack.config.js file:

https://pastebin.com/HF78WjLL

我已尝试根据以下答案将我的网络添加到package.json，如下所示:

I have tried, based on the answer below, to add my network to package.json, like so:

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

但仍然存在相同的错误，就像以前一样:它会连接并迅速断开连接.

But the same error persists, just like before: it connects and quickly disconnects.

我该如何解决?

推荐答案

好吧，react-scripts 3.3.0使用代理确实是问题所在.

Well, react-scripts 3.3.0 working with proxy was the problem, indeed.

根据最近的问题: https://github.com/facebook /create-react-app/issues/8203 ，

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

This is related to nginx's default proxy_read_timeout 60s rule. It seems that prior react-scripts versions would reload the websocket connection when it timed out after 60s.

因此，将以下几行添加到nginx的dev.conf中，如下所示:

So, adding the following lines to nginx's dev.conf, like so:

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

解决了问题.

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