Webpack with Proxy - сервер разработки отключен

Question

В моем приложении React примерно через минуту после установления соединения появляется следующая ошибка:

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

Если я обновлю sh, он снова подключится, только через минуту снова отключится .

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

Если я go до 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

Ну, действительно, react-scripts 3.3.0 работа с прокси была проблемой.

Согласно недавнему выпуску: https://github.com/facebook/create-react-app/issues/8203,

Это связано с nginx по умолчанию proxy_read_timeout 60-е правило . Похоже, что предыдущие версии react-scripts перезагружали соединение веб-сокета по истечении 60 с.

Итак, добавив следующие строки к 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;
  }

решил проблему.

Answer 2

По умолчанию сервер разработчика webpack работает на локальном хосте. Localhost доступен только из контейнера. Чтобы позволить ему быть доступным с хоста (т. Е. Вне контейнера), необходимо, чтобы веб-пакет обслуживал пакеты по общедоступному адресу 0.0.0.0.

Добавьте это к вашей конфигурации:

const config = {

  ...,

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

 ...,

}
module.exports = config