Reactjs 带有代理的网页包-开发服务器已断开连接

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

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

如果我刷新，它会再次连接，但一分钟后又会断开连接

网页包是通过

create reac app

安装的

这是我的

包.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

文件：

---

编辑：根据下面的答案，我尝试将我的网络添加到

package.json

，如下所示：

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

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 dev服务器在本地主机上运行。只能从容器内访问Localhost。要允许从主机（即容器外部）访问它，您需要使webpack在可公开访问的地址上为捆绑包提供服务，

0.0.0

将此添加到您的配置中：

const-config={
...,
开发服务器：{
contentBase:“./dist”，
端口：process.env.port | | 3000，
主持人：“0.0.0.0”
}
...,
}
module.exports=config

嗯，

react脚本

3.3.0

使用代理确实是个问题

根据最近一期的报道：

这与nginx的默认60s规则相关。以前的

react脚本

版本似乎会在websocket连接在60秒后超时时重新加载它

因此，将以下行添加到nginx的

dev.conf

，如下所示：

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

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

---

解决了问题。

您可以共享您的网页配置吗？您需要在

0.0.0.0

上运行webpack dev服务器，才能在容器外部访问它。我在哪里配置它？在react脚本中，它是一个非常大的文件

webpack.config.js

，就是那个吗？谢谢。请参考我的编辑，在那里你可以找到我的完整配置文件，并与你的答案进行交叉参考。只需在

webpack.config.js

的底部添加你的代码片段，再次构建客户端并不能解决问题，但我不知道如何进行“添加到您的代码”。您可以查看上的网页文档，了解有关为您的项目配置它的更多信息。您还可以将主机作为CreateReact应用程序的环境。不要害怕卷起袖子，自己深入研究代码和文档！