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.