Question

我正在使用traefik将有角度的应用程序部署到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

对于任何因相同问题而迷失方向的人，答案是使用以下参数构建我的角度应用程序（位于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，那么您将需要弄清楚如何在您的Web主机要解决的问题中利用X-Forwarded-Prefix（Traefik附加到代理请求中） /angular-app位。在我们的案例中，我们的ASP.NET Core Web主机插入了一块中间件来实现此目的。

使用Nginx在docker中运行的Angular应用的Traefik路径无法使用根路径工作

2 个答案: