traefik doesn't automatically redirect https with react

Question

I have a wedding application with reactjs, nestjs and traefik. My domain from hostinger. I'm having some problems with https auto-redirect. I don't know why the traefik middleware works fine with the url api.xxx.net. But it doesn't work with react client. When I enter xxx.net, this leads to the hostinger's default http page. Try changing it to https and the site works with ssl let enscrypt. Please help me what am I misconfiguring in docker-compose or hostinger installation problem ?. Tks for your help !

My DNS record: CNAME www 0 xxx.net 14400 A @ 0 my_server_ip 14400 A api 0 my_server_ip 14400

Here is my docker-compose.yml.

version: "3.9"

services:
  reverse-proxy:
    image: traefik:v2.4
    container_name: "traefik"
    command:
      - "--api.insecure=true"
      - "--providers.docker=true"
      - "--providers.docker.exposedbydefault=false"
      - "--entrypoints.websecure.address=:443"
      - "--entrypoints.web.address=:80"
      - "--entrypoints.web.http.redirections.entryPoint.to=websecure"
      - "--entrypoints.web.http.redirections.entryPoint.scheme=https"
      - "--entrypoints.web.http.redirections.entrypoint.permanent=true"
      - "--certificatesresolvers.myresolver.acme.tlschallenge=true"
      - "[email protected]"
      - "--certificatesresolvers.myresolver.acme.storage=/letsencrypt/acme.json"
    ports:
      - "443:443"
      - "80:80"
      - "8080:8080"
    volumes:
      - "./letsencrypt:/letsencrypt"
      - "/var/run/docker.sock:/var/run/docker.sock:ro"
  client:
    env_file:
      "./client/.env"
    build:
      context: client
      dockerfile: ./Dockerfile
    image: wedding_client
    container_name: wedding-client-container
    ports:
      - "3000:3000"
    restart: always
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.wedding-client-container.rule=Host(`xxx.com`)"
      - "traefik.http.routers.wedding-client-container.entrypoints=websecure"
      - "traefik.http.routers.wedding-client-container.tls.certresolver=myresolver"
      - "traefik.http.middlewares.redirect-to-https.redirectscheme.scheme=https"
      - "traefik.http.routers.redirs.rule=hostregexp(`{host:.+}`)"
      - "traefik.http.routers.redirs.entrypoints=web"
      - "traefik.http.routers.redirs.middlewares=redirect-to-https"
  server:
    env_file:
      "./server/.env"
    build:
      context: server
      dockerfile: ./Dockerfile
    image: wedding_server
    container_name: wedding-server-container
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.wedding-server-container.rule=Host(`api.xxx.com`)"
      - "traefik.http.routers.wedding-server-container.entrypoints=websecure"
      - "traefik.http.routers.wedding-server-container.tls.certresolver=myresolver"
      - "traefik.http.middlewares.redirect-to-https.redirectscheme.scheme=https"
      - "traefik.http.routers.redirs.rule=hostregexp(`{host:.+}`)"
      - "traefik.http.routers.redirs.entrypoints=web"
      - "traefik.http.routers.redirs.middlewares=redirect-to-https"
    ports:
      - "5001:5001"
    restart: always

Answer 1

Here is my solution:

version: "3.9"

services:
  reverse-proxy:
    image: traefik:v2.8
    container_name: "traefik"
    command:
      - "--api.insecure=true"
      - "--providers.docker=true"
      - "--providers.docker.exposedbydefault=false"
      - "--entrypoints.websecure.address=:443"
      - "--entrypoints.web.address=:80"
      - "--entrypoints.web.http.redirections.entryPoint.to=websecure"
      - "--entrypoints.web.http.redirections.entryPoint.scheme=https"
      - "--entrypoints.web.http.redirections.entrypoint.permanent=true"
      - "--certificatesresolvers.myresolver.acme.tlschallenge=true"
      - "[email protected]"
      - "--certificatesresolvers.myresolver.acme.storage=/letsencrypt/acme.json"
    ports:
      - "443:443"
      - "80:80"
      - "8080:8080"
    restart: always
    volumes:
      - "./letsencrypt:/letsencrypt"
      - "/var/run/docker.sock:/var/run/docker.sock:ro"
  client:
    env_file:
      "./client/.env"
    image: thanhdeveloper/wedding_client:latest
    container_name: wedding-client-container
    ports:
      - "3000:3000"
    restart: always
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.wedding-client-container.rule=Host(`nhuthanhwedding.com`)"
      - "traefik.http.routers.wedding-client-container.entrypoints=websecure"
      - "traefik.http.routers.wedding-client-container.tls.certresolver=myresolver"
      - "traefik.http.middlewares.redirect-to-https.redirectscheme.scheme=https"
      - "traefik.http.routers.redirs.rule=hostregexp(`{host:.+}`)"
      - "traefik.http.routers.redirs.entrypoints=web"
      - "traefik.http.routers.redirs.middlewares=redirect-to-https"
  server:
    env_file:
      "./server/.env"
    image: thanhdeveloper/wedding_server:latest
    container_name: wedding-server-container
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.wedding-server-container.rule=Host(`gateway.nhuthanhwedding.com`)"
      - "traefik.http.routers.wedding-server-container.entrypoints=websecure"
      - "traefik.http.routers.wedding-server-container.tls.certresolver=myresolver"
      - "traefik.http.middlewares.redirect-to-https.redirectscheme.scheme=https"
      - "traefik.http.routers.redirs.rule=hostregexp(`{host:.+}`)"
      - "traefik.http.routers.redirs.entrypoints=web"
      - "traefik.http.routers.redirs.middlewares=redirect-to-https"
    ports:
      - "5001:5001"
    restart: always