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

Question

在我的 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",
    ...,
  }

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

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

Answer 1

webpack 开发服务器默认在 localhost 上运行。本地主机只能从容器内访问。为了允许从主机访问它（即在容器外部），您需要让 webpack 在一个可公开访问的地址 0.0.0.0 上提供捆绑包。

将此添加到您的配置中：

const config = {

  ...,

  devServer: {
    contentBase: './dist',
    port: process.env.PORT || 3000,
    host: '0.0.0.0'
  }

 ...,

}
module.exports = config

Answer 2

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

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

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

所以，将以下行添加到 nginx 的 dev.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;
  }

解决了问题。