Traefik, Django, Angular, Docker - смешанный контент

Я пытаюсь настроить Traefik для обслуживания моего Django API через HTTPS, но не раскрывать его для внешней сети/мира.

Мой docker-compose:

---
version: "3.6"

services:
  backend_prod:
    image: $BACKEND_IMAGE
    restart: always
    environment:
      - DJANGO_SECRET_KEY=$DJANGO_SECRET_KEY
      - DATABASE_ENGINE=$DATABASE_ENGINE
      - DATABASE_NAME=$DATABASE_NAME 
      - DATABASE_USER=$DATABASE_USER 
      - DATABASE_PASSWORD=$DATABASE_PASSWORD 
      - DATABASE_HOST=$DATABASE_HOST
      - DATABASE_PORT=$DATABASE_PORT
      - PRODUCTION=TRUE
    security_opt:
      - no-new-privileges:true
    container_name: backend_prod
    networks:
      - traefik_default

  calendar_frontend_prod:
    image: $FRONTEND_IMAGE
    restart: always
    security_opt:
      - no-new-privileges:true
    container_name: frontend_prod
    environment:
      - PRODUCTION=TRUE
    networks:
      - traefik_default
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.frontend.entrypoints=webs"
      - "traefik.http.routers.frontend.rule=Host(`mywebsite.org`)"
      - "traefik.http.routers.frontend.tls.certresolver=letsencrypt"
      - "traefik.http.services.frontend.loadbalancer.server.port=4200"
      - "traefik.http.services.frontend.loadbalancer.server.scheme=http"


networks:
  traefik_default:
    external: true

Внутри моих файлов фронтенда я настроил его следующим образом:

export const environment = {
  production: true,
  apiUrl: 'http://backend_prod'
};

После этого, когда я зашел на сайт mywebsite.org и посмотрел на сетевые возможности, я увидел:

polyfills.js:1 Mixed Content: The page at 'https://mywebsite.org/auth/login' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://backend_prod/api/users/login'. This request has been blocked; the content must be served over HTTPS.

Я пытался добавить в сервис backend_prod следующие строки:

      - "traefik.enable=true"
      - "traefik.http.routers.backend_prod.entrypoints=webs"
      - "traefik.http.routers.backend_prod.rule=Host(`be.localhost`)"
      - "traefik.http.services.backend_prod.loadbalancer.server.port=80"
      - "traefik.http.services.backend_prod.loadbalancer.server.scheme=http"

но затем я получил от frontend ошибку: https//be.localhost Connection Refused.

Как я могу решить эту проблему?

Вернуться на верх