django - 使用 Docker 上传后端是 django 和前端是 Vue 的应用程序

Question

我正在开发一个使用这些技术的应用程序：

• Django 后端
• Vue JS 前端
• PostgreSQL 数据库
• Docker 作为容器
• Traefik 作为反向代理版本 1.7
• 雷迪斯。
• awscli

这是我用于 docker-compose 运行所有应用程序的production.yml文件：

version: '3'

volumes:
  production_postgres_data: {}
  production_postgres_data_backups: {}
  production_traefik: {}

services:
  django:
    build:
      context: .
      dockerfile: ./compose/production/django/Dockerfile
    image: goplus_backend_production_django
    depends_on:
      - postgres
      - redis
    env_file:
      - ./.envs/.production/.django
      - ./.envs/.production/.postgres
    command: /start
    volumes:
      - ./static:/static # adding static & media file for django
      - ./media:/media
  
  vue:
    build:
      context: /root/goplus_front/new_dashboard_v2
    container_name: new_dashboard_v2
    environment:
      - HOST=localhost
      - PORT=8080 
    ports:
      - "8080:8080"
    depends_on:
      - django

  postgres:
    build:
      context: .
      dockerfile: ./compose/production/postgres/Dockerfile
    image: goplus_backend_production_postgres
    volumes:
      - production_postgres_data:/var/lib/postgresql/data
      - production_postgres_data_backups:/backups
    env_file:
      - ./.envs/.production/.postgres
    ports:
      - "5432:5432"
  
  traefik:
    build:
      context: .
      dockerfile: ./compose/production/traefik/Dockerfile
    image: goplus_backend_production_traefik
    depends_on:
      - django
#    volumes:
     # - production_traefik:/etc/traefik/acme
    ports:
      - "0.0.0.0:80:80"
      - "0.0.0.0:443:443"

  redis:
    image: redis:5.0
  awscli:
    build:
      context: .
      dockerfile: ./compose/production/aws/Dockerfile
    env_file:
      - ./.envs/.production/.django
    volumes:
      - production_postgres_data_backups:/backups

到现在为止一切都很好，如果我使用IP:80我被重定向到 Django 应用程序（管理面板），如果我使用IP:8080我被重定向到 Vue 应用程序。
现在的问题是我想使用域名而不是 IP 地址，我购买了一个域名并添加了 SSL，如果我尝试访问 Django 应用程序它工作正常，但如果我尝试访问 Vue 应用程序则无法正常工作。这是traefik.toml的配置文件，负责将请求重定向到 Django 或 Vue：

logLevel = "INFO"
defaultEntryPoints = ["http", "https"]

# Entrypoints, http and https
[entryPoints]
  # http should be redirected to https
  [entryPoints.http]
  address = ":80"
  # https is the default
  [entryPoints.https]
  address = ":443"
    [entryPoints.https.tls]
      [[entryPoints.https.tls.certificates]]
      certFile = "/etc/certs/<crt_file_name>.crt"
      keyFile  = "/etc/certs/<crt_key_file_name>.key"

[file]
[backends]
  [backends.django]
    [backends.django.servers.server1]
      url = "http://django:5000"

  [backends.vue]
    [backends.vue.servers.server1]
      url = "http://vue:8080"

[frontends]
  [frontends.django]
    backend = "django"
    passHostHeader = true
    [frontends.django.headers]
      HostsProxyHeaders = ['X-CSRFToken']
    [frontends.django.routes.dr1]
      rule = "Host:<domain name>, <IP name>"

  [frontends.vue]
    backend = "vue"
    [frontends.vue.routes.dr1]
       rule = "Host:<domain name>;PathPrefixStrip:/dashboard"
    

因此，从该配置中，我希望如果有人尝试访问 Django 应用程序，他必须只使用完整域名，如果他想使用 Vue 应用程序，他必须使用DomainName/dashboard，它可以与 Django 应用程序一起正常工作，但我得到了 Vue 应用程序这些错误。 那么有什么帮助或建议来解决这个问题吗？

标签： djangodockervue.jstraefik