Quasar和webpack-devServer ECONNREFUSED在docker上组成

Question

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

[HPM]尝试代理来自的请求/api/项目时出错0.0.0.0:8080至https://backend:5000(经济融合((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中进行了此更改，可能是通过COPY创建一个面向生产的配置文件来代替常规配置，请不要忘记删除docker-compose.yml中隐藏所有Dockerfile工作的volumes:块。