使用 nginx 在 docker 中运行的 Angular 应用程序的 Traefik 路径无法使用根路径

Question

我正在使用 traefik 将 Angular 应用程序部署到 docker 服务器来处理反向代理。我正试图通过相当于下面的链接让它工作：

https://server.url.com/angular-app

使用此链接，我收到以下 Web 控制台错误和空白页。

Loading failed for the <script> with source “https://server.url.com/runtime.33696abb3e1f13aa52cf.js”. angular-app:17:1
Loading failed for the <script> with source “https://server.url.com/polyfills.b8a0220c9c0a3ba034f8.js”. angular-app:17:1
Loading failed for the <script> with source “https://server.url.com/scripts.806effac119676237f10.js”. angular-app:17:1
Loading failed for the <script> with source “https://server.url.com/main.14b7034556d5690ee2bb.js”.

我已经明白了，如果我手动输入

https://server.url.com/angular-app/index.html

它按预期工作，正确加载 Angular 应用程序及其所有静态内容。

我尝试了 Traefik 标签 Path/PathPrefix/PathPrefixStrip 的不同变体以及 nginx.conf 中的一些变体

以下是相关配置，angular app 和 Dockerfile 都是相当标准的。如有必要，我可以提供更多，包括 Traefik 配置。

nginx.conf

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    server {
        listen 80;
        server_name  localhost;

        root   /usr/share/nginx/html;
        index  index.html index.htm;
        include /etc/nginx/mime.types;

        gzip on;
        gzip_min_length 1000;
        gzip_proxied expired no-cache no-store private auth;
        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

docker-compose.yml

version: '3'

services:
  api:
    ... 
    labels:
      - "traefik.backend=data-mosaic-api"
      - "traefik.frontend.rule=PathPrefixStrip:/data-mosaic-api"
      - "traefik.docker.network=dev_network"
      - "traefik.enable=true"
      - "traefik.port=8080"

  angular-ui:
    ...
    labels:
      - "traefik.backend=data-mosaic-new"
      - "traefik.frontend.rule=PathPrefixStrip:/angular-app;PathPrefix:=/angular-app"
      - "traefik.frontend.passHostHeader"
      - "traefik.docker.network=dev_network"
      - "traefik.enable=true"
      - "traefik.frontend.priority=1000"
      - "traefik.port=80"
networks:
  dev_network:
    external: true

Answer 1

对于遇到相同问题的人来说，答案是使用以下参数构建我的 Angular 应用程序（位于 package.json 中）

"build": "ng build --prod --base-href /angular-app/"

并且在 docker compose 文件中有如下标签

- "traefik.frontend.rule=PathPrefixStrip:/angular-app;PathPrefix:/angular-app"

前端应用程序的关键主题需要了解它们被部署到的路径，但这通常可以通过环境变量或脚本参数来处理。

Answer 2

看起来您正在为~/angular-app/ 提供您的路径，但您由 Angular 生成的标记正在输出回域根目录。建议您查看在 index.html 中使用 <base href="./" /> 并可能需要相应地修复其他设置以确保所有路径都以相对路径输出。

您的 index.html 应该只在 polyfills.b8a0220c9c0a3ba034f8.js（等）而不是像现在这样的 /polyfills.b8a0220c9c0a3ba034f8.js 输出脚本。

此外，如果您在应用程序的任何位置输出绝对 URL，那么您需要弄清楚如何在您的网络主机解析@987654326 时使用X-Forwarded-Prefix（Traefik 附加到代理请求） @ 少量。在我们的例子中，我们的 ASP.NET Core Web 主机插入了一个中间件来执行此操作。