Angular 应用程序在域上返回 404，尽管使用 Traefik 在 Docker 容器中运行良好

Question

我是一名初学者，正在使用 Docker、Traefik 和 GitHub Actions 为 Java Angular Web 应用程序设置持续部署管道。我已经使用 Portainer 在 VPS (Debian 12) 上成功部署了我的应用程序，并配置 Traefik 通过 Let's Encrypt 管理 HTTPS。

我通过 Cloudflare 购买了一个域名，一切似乎都设置正确。我的 Traefik 设置处理 HTTP 到 HTTPS 的重定向，并且我可以通过 HTTPS 访问我的服务器。但是，当我将 Angular 应用程序部署到域时，即使该应用程序在 Docker 容器内运行良好，我仍然会收到 404 错误。

这是我的配置：

1. Traefik 堆栈：

services:
  traefik:
    image: traefik:v2.5
    command:
      - "--api.insecure=true"
      - "--api.dashboard=true"
      - "--providers.docker=true"
      - "--entrypoints.web.address=:80"
      - "--entrypoints.websecure.address=:443"
      - "--certificatesresolvers.myresolver.acme.dnschallenge=true"
      - "--certificatesresolvers.myresolver.acme.dnschallenge.provider=cloudflare"
      - "--certificatesresolvers.myresolver.acme.email=[e-mail]"
      - "--certificatesresolvers.myresolver.acme.storage=/letsencrypt/acme.json"
    ports:
      - "80:80"
      - "443:443"
      - "8080:8080"
    environment:
      - [email protected]
      - CF_API_KEY=${CLOUDFLARE_TOKEN}
    volumes:
      - "traefik-certificates:/letsencrypt"
      - "/var/run/docker.sock:/var/run/docker.sock"
    networks:
      - web
    restart: always

networks:
  web:
    external: true

volumes:
  traefik-certificates:

2. Angular 应用程序堆栈：

services:
  front:
    image: mydockerimage:latest
    container_name: angular-front
    restart: unless-stopped
    networks:
      - web
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.angular.rule=Host(`exemple.com`)"
      - "traefik.http.routers.angular.entrypoints=web"
      - "traefik.http.services.angular.loadbalancer.server.port=80"
  watchtower:
    container_name: watchtower
    image: containrrr/watchtower
    environment:
      - WATCHTOWER_CLEANUP=true
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
    command: --interval 60 angular-front

networks:
  web:
    external: true

3. 云耀：

• DNS： 一条记录：指向我的 VPS IP（通过 Cloudflare 代理） AAAA 记录：域的 IPv6 地址（通过 Cloudflare 代理） CNAME 记录：指向根域的 www 子域（通过 Cloudflare 代理）

-SSL/TLS： 完整（不严格）

4. 测试和结果：

• 在 Angular 容器内运行 curl http://localhost:80 返回正确的 HTML 内容，表明应用程序正在按预期运行。

• 通过 https://exemple.com 访问域会导致 404 错误。

预期结果： 我希望看到我的 Angular 应用程序在我的域上运行。

实际结果： 尝试通过域访问应用程序时，我始终收到 404 错误。

什么可能导致此 404 错误？如何解决？由于我是新手，因此我很感激任何简单的建议。

Answer 1

您的角度容器似乎使用 traefik 入口点

web

，这是端口 80 上的纯 HTTP。

所以 http://exemple.com/ 应该可以工作。要使安全 HTTPS 正常工作，请更改服务的入口点：

    labels:
      - "traefik.http.routers.angular.entrypoints=websecure"