Make Docker host ports configurable in development mode

[christian2022]

First Check

• I added a very descriptive title here.
• I used the GitHub search to find a similar question and didn't find it.
• I searched in the documentation/README.
• I already searched in Google "How to do X" and didn't find any information.
• I already read and followed all the tutorial in the docs/README and didn't find an answer.

Commit to Help

• I commit to help with one of those options 👆

Example Code

# docker-compose.override.yml
services:

  # Local services are available on their ports, but also available on:
  # http://api.localhost.tiangolo.com: backend
  # http://dashboard.localhost.tiangolo.com: frontend
  # etc. To enable it, update .env, set:
  # DOMAIN=localhost.tiangolo.com
  proxy:
    image: traefik:3.0
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
    ports:
      - "80:80"
      - "8090:8080"
    # Duplicate the command from docker-compose.yml to add --api.insecure=true
    command:
      # Enable Docker in Traefik, so that it reads labels from Docker services
      - --providers.docker
      # Add a constraint to only use services with the label for this stack
      - --providers.docker.constraints=Label(`traefik.constraint-label`, `traefik-public`)
      # Do not expose all Docker services, only the ones explicitly exposed
      - --providers.docker.exposedbydefault=false
      # Create an entrypoint "http" listening on port 80
      - --entrypoints.http.address=:80
      # Create an entrypoint "https" listening on port 443
      - --entrypoints.https.address=:443
      # Enable the access log, with HTTP requests
      - --accesslog
      # Enable the Traefik log, for configurations and errors
      - --log
      # Enable debug logging for local development
      - --log.level=DEBUG
      # Enable the Dashboard and API
      - --api
      # Enable the Dashboard and API in insecure mode for local development
      - --api.insecure=true
    labels:
      # Enable Traefik for this service, to make it available in the public network
      - traefik.enable=true
      - traefik.constraint-label=traefik-public
      # Dummy https-redirect middleware that doesn't really redirect, only to
      # allow running it locally
      - traefik.http.middlewares.https-redirect.contenttype.autodetect=false
    networks:
      - traefik-public
      - default

  db:
    restart: "no"
    ports:
      - "5432:5432"

  adminer:
    restart: "no"
    ports:
      - "8080:8080"

  backend:
    restart: "no"
    ports:
      - "${BACKEND_HOST_PORT:-8000}:8000"  # MODIFIED
    build:
      context: ./backend
    # command: sleep infinity  # Infinite loop to keep container alive doing nothing
    command:
      - fastapi
      - run
      - --reload
      - "app/main.py"
    develop:
      watch:
        - path: ./backend
          action: sync
          target: /app
          ignore:
            - ./backend/.venv
            - .venv
        - path: ./backend/pyproject.toml
          action: rebuild
    # TODO: remove once coverage is done locally
    volumes:
      - ./backend/htmlcov:/app/htmlcov
    environment:
      SMTP_HOST: "mailcatcher"
      SMTP_PORT: "1025"
      SMTP_TLS: "false"
      EMAILS_FROM_EMAIL: "noreply@example.com"

  mailcatcher:
    image: schickling/mailcatcher
    ports:
      - "1080:1080"
      - "1025:1025"

  frontend:
    restart: "no"
    ports:
      - "5173:80"
    build:
      context: ./frontend
      args:
        - VITE_API_URL=http://localhost:${BACKEND_HOST_PORT:-8000}  # MODIFIED
        - NODE_ENV=development

  playwright:
    build:
      context: ./frontend
      dockerfile: Dockerfile.playwright
      args:
        - VITE_API_URL=http://backend:8000
        - NODE_ENV=production
    ipc: host
    depends_on:
      - backend
      - mailcatcher
    env_file:
      - .env
    environment:
      - VITE_API_URL=http://backend:8000
      - MAILCATCHER_HOST=http://mailcatcher:1080
      # For the reports when run locally
      - PLAYWRIGHT_HTML_HOST=0.0.0.0
      - CI=${CI}
    volumes:
      - ./frontend/blob-report:/app/blob-report
      - ./frontend/test-results:/app/test-results
    ports:
      - 9323:9323

networks:
  traefik-public:
    # For local dev, don't expect an external Traefik network
    external: false

Description

On my dev machine, port 8000 is already busy, so I was trying to introduce an optional environment variable BACKEND_HOST_PORT, which defaults to 8000.
I assumed that changing the two lines tagged with # MODIFIED like above should be sufficient.
But after docker compose watch I get Cross-Origin error in the console of the browser and I see it tries to access http://localhost:8000/api/v1/users/me
So it looks like I missed something. Maybe similar modifications for the other host ports, which might be occupied as well, might make sense as well.

Operating System

Windows

Operating System Details

Windows 10, Docker Desktop 4.34.3, Firefox 131.0.3

Python Version

local: 3.11.9, but backend is based on 3.10

Additional Context

No response

[christian2022]

Ok, I see: docker compose watch is not sufficient after the changes to docker-compose.override.yml. I need to docker compose build and then it works with my changes.
Sorry for the noise - but maybe another newbie might find my changes helpful.