Vue + Django REST + traefik = 页面未找到

Question

我正在修改djangocookiecutter以满足我的要求。我有Vue+Django REST production.yml

version: '3'

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

services:
  vue:
    build:
      context: .
      dockerfile: ./compose/local/vue/Dockerfile
    image: lovelinkconnect_local_vue
    container_name: lovelinkconnect_local_vue
    depends_on:
      - django
    volumes:
      - ./vue-lovelinkconnect:/app:z
    environment:
      - BACKEND_URL:https://lovelinkconnect.com:443
#    ports:
#      - 5173:5173
    command: ['npm', 'run', 'dev', '--', '--host']

  django: &django
    build:
      context: .
      dockerfile: ./compose/production/django/Dockerfile
    image: lovelinkconnect_production_django
    depends_on:
      - postgres
      - redis
    env_file:
      - ./.envs/.production/.django
      - ./.envs/.production/.postgres
    command: /start

  postgres:
    build:
      context: .
      dockerfile: ./compose/production/postgres/Dockerfile
    image: lovelinkconnect_production_postgres
    volumes:
      - production_postgres_data:/var/lib/postgresql/data
      - production_postgres_data_backups:/backups
    env_file:
      - ./.envs/.production/.postgres

  traefik:
    build:
      context: .
      dockerfile: ./compose/production/traefik/Dockerfile
    image: lovelinkconnect_production_traefik
    depends_on:
      - django
      - vue
    volumes:
      - production_traefik:/etc/traefik/acme
    ports:
      - '0.0.0.0:80:80'
      - '0.0.0.0:443:443'
      - '0.0.0.0:5555:5555'

  redis:
    image: redis:6

  celeryworker:
    <<: *django
    image: lovelinkconnect_production_celeryworker
    command: /start-celeryworker

  celerybeat:
    <<: *django
    image: lovelinkconnect_production_celerybeat
    command: /start-celerybeat

  flower:
    <<: *django
    image: lovelinkconnect_production_flower
    command: /start-flower

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

traefik/Dockerfile

FROM traefik:2.10.5
RUN mkdir -p /etc/traefik/acme \
  && touch /etc/traefik/acme/acme.json \
  && chmod 600 /etc/traefik/acme/acme.json
COPY ./compose/production/traefik/traefik.yml /etc/traefik

traefik.yml

log:
  level: INFO

entryPoints:
  web:
    # http
    address: ':80'
    http:
      # https://docs.traefik.io/routing/entrypoints/#entrypoint
      redirections:
        entryPoint:
          to: web-secure

  web-secure:
    # https
    address: ':443'

  flower:
    address: ':5555'

certificatesResolvers:
  letsencrypt:
    # https://docs.traefik.io/master/https/acme/#lets-encrypt
    acme:
      email: '[email protected]'
      storage: /etc/traefik/acme/acme.json
      # https://docs.traefik.io/master/https/acme/#httpchallenge
      httpChallenge:
        entryPoint: web

http:
  routers:

    vue-secure-router:
      rule: 'Host(`lovelinkconnect.com/`) || Host(`www.lovelinkconnect.com`)'
      entryPoints:
        - web-secure
      service: vue
      tls:
        # https://docs.traefik.io/master/routing/routers/#certresolver
        certResolver: letsencrypt

    web-secure-router:
      rule: 'PathPrefix(`/api/`) && Host(`lovelinkconnect.com/`) || Host(`www.lovelinkconnect.com`)'
      entryPoints:
        - web-secure
      middlewares:
        - csrf
      service: django
      tls:
        # https://docs.traefik.io/master/routing/routers/#certresolver
        certResolver: letsencrypt

    flower-secure-router:
      rule: 'Host(`lovelinkconnect.com`)'
      entryPoints:
        - flower
      service: flower
      tls:
        # https://docs.traefik.io/master/routing/routers/#certresolver
        certResolver: letsencrypt

  middlewares:
    csrf:
      # https://docs.traefik.io/master/middlewares/headers/#hostsproxyheaders
      # https://docs.djangoproject.com/en/dev/ref/csrf/#ajax
      headers:
        hostsProxyHeaders: ['X-CSRFToken']

  services:
    django:
      loadBalancer:
        servers:
          - url: http://django:5000

    flower:
      loadBalancer:
        servers:
          - url: http://flower:5555

    vue:
      loadBalancer:
        servers:
          - url: http://vue:5173

providers:
  # https://docs.traefik.io/master/providers/file/
  file:
    filename: /etc/traefik/traefik.yml
    watch: true

当我浏览我的网站时。它返回404 page not found

问题：
如何解决我的问题？

Answer 1

/从域名中删除结尾斜杠。问题已解决。

    vue-secure-router:
      rule: 'Host(`lovelinkconnect.com`) || Host(`www.lovelinkconnect.com`)'
      entryPoints:
        - web-secure
      service: vue
      tls:
        # https://docs.traefik.io/master/routing/routers/#certresolver
        certResolver: letsencrypt

    web-secure-router:
      rule: 'PathPrefix(`/api/`) && Host(`lovelinkconnect.com`) || Host(`www.lovelinkconnect.com`)'
      entryPoints:
        - web-secure
      middlewares:
        - csrf
      service: django
      tls:
        # https://docs.traefik.io/master/routing/routers/#certresolver
        certResolver: letsencrypt