Quasar 和 webpack devServer ECONNREFUSED on docker compose

Question

我正在尝试通过 docker-compose 开发应用程序。此应用程序包含三个组件：一个前端（使用 Quasar 框架构建）和一个后端（使用 python/flask 构建），以及另一个 API（此处不相关）。问题是：当我在我的项目目录中执行 docker-compose up 时，前端运行完美（我可以通过浏览器访问它），但是当我向后端发出请求时（通过单击某个按钮前面）我在终端中遇到以下错误：

[HPM] Error occurred while trying to proxy request /api/projects from 0.0.0.0:8080 to https://backend:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

我收到了一个 504 状态码。

这是我的 docker-compose.yml 文件：

version: "3"
services:
  backend:
    build:
      dockerfile: Dockerfile.dev
      context: "./backend"
    volumes:
      - "./backend/venv"
      - "./backend:/usr/app"
    environment:
      - FLASK_ENV=dev
    ports:
      - "5000:5000"
  frontend:
    build:
      dockerfile: Dockerfile.dev
      context: "./frontend"
    volumes:
      - "./frontend/node_modules"
      - "./frontend:/usr/app"
    ports:
      - "8080:8080"
  api:
    build:
      dockerfile: Dockerfile.dev
      context: "./api"
    volumes:
      - "./api:/usr/app"
    expose:
      - "3000"

这是我的 quasar.conf.js 文件中的 devServer 对象：

    devServer: {
      https: true,
      // open: true, // opens browser window automatically
      proxy: {
        "/api": {
          target: source,
          ws: true,
          changeOrigin: false,
          secure: false,
        },
        "/login": {
          target: source,
          ws: true,
          changeOrigin: false,
          secure: false,
        },
        "/logout": {
          target: source,
          ws: true,
          changeOrigin: false,
          secure: false,
        },
        "/media": {
          target: source,
          ws: true,
          changeOrigin: false,
          secure: false,
        },
      },
    },

此外，source定义为const source = "https://backend:5000"

那么，为什么会出现此错误，我该如何解决？提前致谢！

Answer 1

Quasar 内嵌了 webpack DevServer，默认只监听 localhost 接口。但是，在 Docker 上下文中，每个容器都有自己的 localhost，如果某物仅侦听 localhost，则无法从其自己的容器外部访问它。

在您的 Quasar 配置中，您需要将 host 属性更改为特殊的 0.0.0.0“无处不在”地址：

devServer: {
  host: '0.0.0.0', // <-- add this
  https: true,
  ...
}

如果您在 Docker 文件中进行此更改，可能是通过 COPY 面向生产的配置文件代替正常配置，请不要忘记删除 volumes: 块在 docker-compose.yml 中隐藏所有 Docker 文件的工作。

Quasar 和 webpack devServer ECONNREFUSED on docker compose

Quasar and webpack devServer ECONNREFUSED on docker compose

docker

webpack

quasar

docker-compose

webpack-dev-server