Configure docker-compose for Traefik and React service in development

  docker, docker-compose, reactjs, traefik

I am trying to play with Traefik. In docker-compose, I created a service with a react. When I try to go to the front url specified in the rule, Trefik gives me 404. At the same time, the address for the container is strangely displayed in the dashboard. Unfortunately, Traffic doesn’t give me any logs to understand what’s going on. The only thing I can assume is that this is due to the associated ip addresses in the react container.

Local:            http://localhost:3000
On Your Network:  http://172.26.0.4:3000

There is my docker-compose.yml

version: '3.8'
services:
  traefik-proxy:
    image: traefik:v2.4
    container_name: traefik-playground
    ports:
      - '80:80'
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
      - ./traefik/traefik.yml:/traefik.yml:ro
      - ./traefik/data/log-access.log:/log-access.log
      - ./traefik/data/log-file.log:/log-file.log
      - ./traefik/data/acme.json:/acme.json
      - ./traefik/dynamic/:/dynamic/:ro

    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.traefik.rule=Host(`traefik.localhost`)"
      - "[email protected]"
    depends_on:
      - front
    networks:
      - web-net

front:
  build:
    context: .
    dockerfile: docker/frontend/development/Dockerfile
  volumes:
    - ./front:/usr/src/app
  container_name: front
  command: npm run start
  expose:
    - 3000
  labels:
    - "traefik.enable=true"
    - "traefik.http.routers.front.entrypoints=http"
    - "traerik.http.routers.front.rule=Host(`front.localhost`)"
  tty: true
  stdin_open: true
  networks:
    - web-net

networks:
  web-net:
    driver: bridge

But in dashboard I see front-traefik instead front.localhost
Traefik dashboard

Please do not kick too much)

Source: Docker Questions

LEAVE A COMMENT