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

Question

我正在使用 traefik 将 angular 应用程序部署到 docker 服务器以处理反向代理。我试图通过相当于波纹管 link:

的方式让它工作

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

使用此 link 我收到以下 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 应用程序和 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-app/ 提供您的路径，但由 Angular 生成的标记正在输出回域根。建议您考虑在 index.html 中使用 <base href="./" /> 并且可能需要相应地修复其他设置以确保所有路径都使用相对路径输出。

您应该达到 index.html 应该只输出 polyfills.b8a0220c9c0a3ba034f8.js（等）而不是 /polyfills.b8a0220c9c0a3ba034f8.js 的地步，就像现在可能是这样。

此外，如果你在应用程序的任何地方输出绝对 URL，那么你需要弄清楚如何利用 X-Forwarded-Prefix（Traefik 附加到代理请求）无论您的虚拟主机是什么来解析 /angular-app 位。在我们的例子中，我们的 ASP.NET 核心网络主机插入了一个中间件来执行此操作。

Answer 2

对于遇到同样问题的任何人，答案是使用以下参数构建我的 angular 应用程序（在 package.json 中）

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

并且在 docker 撰写文件中有以下标签

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

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

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

Traefik Path to an Angular app running in docker with nginx won't work using the root path

nginx

docker

traefik

angular

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