docker compose 上的 Quasar 和 webpack devServer ECONNREFUSED

如何解决docker compose 上的 Quasar 和 webpack devServer ECONNREFUSED

我正在尝试通过 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"

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

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

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

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

解决方法

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

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

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

如果您在 Dockerfile 中进行此更改，也许通过COPY面向生产的配置文件代替正常配置，请不要忘记删除 volumes: 块1}} 隐藏了所有 Dockerfile 的工作。