docker compose 上的 Quasar 和 webpack devServer ECONNREFUSED

Question

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

[HPM] 尝试代理请求 /api/projects 时发生错误 0.0.0.0:8080 到 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,
  ...
}

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