How can I properly setup basic fastapi with traefik reverse proxy?

Assume my current public IP is 101.15.14.71, I have a domain called example.com which I configured using cloudflare and I created multiple DNS entry pointing to my public ip.

Eg:

    1) new1.example.com - 101.15.14.71
    2) new2.example.com - 101.15.14.71
    3) new3.example.com - 101.15.14.71

Now, Here's my example project structure,

├── myapp
│   ├── app
│   │   └── main.py
│   ├── docker-compose.yml
│   └── Dockerfile
├── myapp1
│   ├── app
│   │   └── main.py
│   ├── docker-compose.yml
│   └── Dockerfile
└── traefik
    ├── acme.json
    ├── docker-compose.yml
    ├── traefik_dynamic.toml
    └── traefik.toml

Here I have two fastAPIs (i.e., myapp, myapp1)

Here's the example code I have in main.py in both myapp and myapp1, Its exactly same but return staement is different that's all

from fastapi import FastAPI
app = FastAPI()
@app.get("/")
def read_main():
    return {"message": "Hello world for my project myapp"}

Here's my Dockerfile for myapp and myapp1, here too both are exactly same but the only difference is I deploy myapp on 7777 and myapp1 on 7778 in different containers

FROM ubuntu:latest

ARG DEBIAN_FRONTEND=noninteractive
RUN apt update && apt upgrade -y
RUN apt install -y -q build-essential python3-pip python3-dev

# python dependencies
RUN pip3 install -U pip setuptools wheel
RUN pip3 install gunicorn fastapi uvloop httptools "uvicorn[standard]"

# copy required files
RUN bash -c 'mkdir -p /app'
COPY ./app /app


ENTRYPOINT /usr/local/bin/gunicorn \
    -b 0.0.0.0:7777 \ # this line I use for myapp dockerfile
    -b 0.0.0.0:7778 \ # this line I change for myapp1 dockerfile
    -w 1 \
    -k uvicorn.workers.UvicornWorker app.main:app \
    --chdir /app

Here's my docker-compose.yml file for myapp and myapp1, here also I have exactly same but only difference is I change the port,

services:
  myapp:  # I use this line for myapp docker-compose file
  myapp1: # I use this line for myapp1 docker-compose file
    build: .
    restart: always
    labels:
      - "traefik.enable=true"
      - "traefik.docker.network=traefik_public"

      - "traefik.backend=myapp" # I use this line for myapp docker-compose file
      - "traefik.backend=myapp1" # I use this line for myapp1 docker-compose file


      - "traefik.frontend.rule=Host:new2.example.com" # I use this for myapp compose file
      - "traefik.frontend.rule=Host:new3.example.com" # I use this for myapp1 compose file

      - "traefik.port=7777" # I use this line for myapp docker-compose file
      - "traefik.port=7778" # I use this line for myapp1 docker-compose file
    networks:
      - traefik_public

networks:
  traefik_public:
    external: true

Now coming to traefik folder,

  1. acme.json # I created it using nano acme.json command with nothing in it,
    but did chmod 600 acme.json for proper permissions.

  2. traefik_dynamic.toml

[http]
  [http.routers]
    [http.routers.route0]
      entryPoints = ["web"]
      middlewares = ["my-basic-auth"]
      service = "api@internal"
      rule = "Host(`new1.example.com`)"
      [http.routers.route0.tls]
        certResolver = "myresolver"

[http.middlewares.test-auth.basicAuth]
  users = [
    ["admin:your_encrypted_password"]
  ]
  1. traefik.toml
[entryPoints]
  [entryPoints.web]
    address = ":80"
    [entryPoints.web.http]
      [entryPoints.web.http.redirections]
        [entryPoints.web.http.redirections.entryPoint]
          to = "websecure"
          scheme = "https"

  [entryPoints.websecure]
    address = ":443"

[api]
  dashboard = true

[certificatesResolvers.myresolver.acme]
  email = "reallygoodtraefik@gmail.com"
  storage= "acme.json"
  [certificatesResolvers.myresolver.acme.httpChallenge]
    entryPoint = "web"

[providers]
  [providers.docker]
    watch = true
    network = "web"
  [providers.file]
    filename = "traefik_dynamic.toml"
  1. docker-compose.yml
services:
  traefik:
    image: traefik:latest
    ports:
      - 80:80
      - 443:443
      - 8080:8080
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
      - ./traefik.toml:/traefik.toml
      - ./acme.json:/acme.json
      - ./traefik_dynamic.toml:/traefik_dynamic.toml
    networks:
      - web

networks:
  web:

These are the details about my files, what I am trying to achieve here is,

I want to setup traefik and traefik dashboard with basic authentication, and I deploy two of my fastapi services,

  • myapp 7777, I need to access this app via https://new2.example.com
  • myapp1 7778, I need to access this app via https://new3.example.com
  • traefik dashboard, I need to access this via https://new1.example.com

All of these should be https and also has certification autorenew enabled.

I got all these from online articles for latest version of traefik. But the problem is this is not working. I used docker-compose to build and deploy the traefik and I open the api dashboard. It is asking for password and user (basic auth I setup) I entered my user details I setup in traefik_dynamic.toml but its not working.

First of all is what am I doing possible or not? If its possible can someone help on understand where I went wrong. Please help me correcting mistakes in my configuration. I am really interested to learn more about this but there's no proper online articles which helps.

can anyone help out?