Backend frontend integration

Traefik Traefik v2
,
1

Hello,

I have a web project, with backend and frontend. I try to containerize each part, and use traefik so that requests are redirected to frontend ; but if there is the '/api' prefix, it goes to backend. Here's my docker-compose :

services:
  fini-back:
    build: ./fini
    ports:
      - "3000:3000"
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.fini-front.rule=PathPrefix(`/api`)"

  fini-front:
    build: ./fini-front
    ports:
      - "3002:3000"
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.fini-front.rule=Host(`localhost`)"
      - "traefik.http.routers.fini-front.entrypoints=web"

  traefik:
    image: traefik:v2.10
    container_name: "traefik"
    command:
      - "--api.insecure=true"
      - "--providers.docker=true"
      - "--providers.docker.exposedbydefault=false"
      - "--entrypoints.web.address=:80"

    ports:
      - "80:80"
      - "8080:8080"
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock

I also have this traefik.yml :

providers:
  docker: {}

How do I achieve my goal ?

2

Check this simple Traefik example.

Use a Docker network, assign all services to it, don’t expose ports on the target services, enable all required labels on target services, use different router and service names in labels per target service.

When using LetsEncrypt, make sure to use Host() in rule for domain certificate, for backend use Host() && PathPrefix(), that’s longer, has higher priority and will be checked for match first.