Bad gateway for one of the two docker containers

Traefik Traefik v2
1

Hi all,

I'm trying to setup a Traefik container to act as a reverse proxy and load balancer for my Flask API container and my Vue frontend container on my dev environment. This setup will be duplicate in production. Without Traefik in front of the containers they work fine but when I add Traefik to the mix my Vue frontend returns a Bad Gateway error (502). The Flask API keeps on working.

My compose file looks like this:

version: '3.8'

services:
  api:
    build: ./api
    container_name: api
    command: flask run --host=0.0.0.0
    volumes:
      - ./api/:/usr/src/api/
    expose: 
      - 5000
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.flask.rule=Host(`flask.localhost`)"
    env_file:
      - ./api/.env
      - ./api/.flaskenv

  client:
    container_name: client
    build: ./client
    volumes:
      - ./client/:/usr/src/client/
      - /client/node_modules
    expose: 
      - 8000
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.vue.rule=Host(`vue.localhost`)"
    environment:
      - ./client/.env

  traefik:
    # The official v2 Traefik docker image
    image: traefik:v2.4
    ports:
      # The HTTP port
      - "80:80"
      # The Web UI (enabled by --api.insecure=true)
      - "8080:8080"
    volumes:
      # So that Traefik can listen to the Docker events
      - /var/run/docker.sock:/var/run/docker.sock:ro
      - ./traefik/traefik.dev.toml:/etc/traefik/traefik.toml

and my toml looks like this:

[entryPoints]
  [entryPoints.web]
    address = ":80"

[api]
  insecure = true
  dashboard = true

[log]
  level = "DEBUG"

[accessLog]

[providers]
  [providers.docker]
    exposedByDefault = false

How can I set this up so that the traffic to the frontend container does not return a bad gateway error? I've tried removing the expose port in order for Traefik to discover the containers automatically to see if that would help, but this just made this issue worse since no container was discovered at all.

Also, what would be the best way to instead of using subdomains use plain localhost (domain.com) for the frontend and localhost/api (domain.com/api) the backend?

Thanks!

2

Found the issue! In case of anyone running into the same issue when trying to use Vue within a Docker container behind Traefik, make sure to disable the host check as described here.

Also, make sure the loadbalancer label is set correctly, in my case like this:

version: '3.8'

services:
  api:
    container_name: api
    build: ./api
    command: flask run --host=0.0.0.0
    volumes:
      - ./api/:/usr/src/api/
    labels:
      - traefik.http.routers.flask.rule=Host(`flask.localhost`)
      - traefik.http.services.flask.loadbalancer.server.port=5000
    env_file:
      - ./api/.env
      - ./api/.flaskenv

  client:
    container_name: client
    build: ./client
    volumes:
      - ./client/:/usr/src/client/
      - /client/node_modules
    labels:
      - traefik.http.routers.client.rule=Host(`client.localhost`)
      - traefik.http.services.client.loadbalancer.server.port=8080
    environment:
      - ./client/.env

  traefik:
    image: traefik:v2.4
    ports:
      - "80:80"
      - "8080:8080"
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
      - ./traefik/traefik.dev.toml:/etc/traefik/traefik.toml
1 Like