Quasar and webpack devServer ECONNREFUSED on docker compose

Question

I am trying to develop an app through docker-compose. This app has three components: a frontend (built with the Quasar framework) and a backend (built with python/flask), and another API (not relevant here). The problem is: when I execute docker-compose up in my project's directory, the frontend runs perfectly (I'm able to access it via browser), but when I make a request to the backend (by clicking on a certain button in the front) I'm met with the following error in the terminal:

[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)

And I receive a 504 status code.

Here is my docker-compose.yml file:

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"

Here is the devServer object inside my quasar.conf.js file:

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

Futhermore, source is defined as const source = "https://backend:5000"

So, why am I getting this error and how should I solve it? Thanks in advance!

score 1 · Accepted Answer · answered May 23 '21 at 19:36

Quasar embeds the webpack DevServer, and this by default only listens on the localhost interface. In a Docker context, though, each container has its own localhost, and if something listens only to localhost then it won't be reachable from outside its own container.

In your Quasar configuration, you need to change the host property to be the special 0.0.0.0 "everywhere" address:

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

If you make this change in your Dockerfile, perhaps by COPYing a production-oriented configuration file in place of the normal configuration, don't forget to delete the volumes: blocks in the docker-compose.yml that hide all of the Dockerfiles' work.

strange - for me it works also without `host: '0.0.0.0'` – Kamil Kiełczewski Aug 26 '21 at 11:56 — Kamil Kiełczewski, Aug 26 '21 at 11:56

Quasar and webpack devServer ECONNREFUSED on docker compose

1 Answers1