时间戳

首页 > 解决方案 > Traefik Path to an Angular app running in docker with nginx won't work using the root path

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

问题描述

I am deploying an angular app to a docker server using traefik to handle the reverse proxies. I am trying to get it to work via the equivalent of the bellow link:

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

Using this link I am getting the following web console errors and a blank page.

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”.

I've got it to the point that if I manually type in

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

it works as expected, loading the angular app and all it's static content correctly.

I've tried different variations of Traefik labels Path/PathPrefix/PathPrefixStrip and some variations in the nginx.conf

Below is the relevant configuration, the angular app and Dockerfile are both fairly stock standard. I can provide more including the Traefik configuration if necessary.

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

标签： angulardockernginxtraefik

解决方案

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

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

并在 docker compose 文件中有以下标签

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

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

推荐阅读