Traefik Путь к приложению Angular, запущенному в докере с nginx, не будет работать с использованием корневого пути - PullRequest
Новая
       5

Traefik Путь к приложению Angular, запущенному в докере с nginx, не будет работать с использованием корневого пути

0 голосов
/ 08 января 2019

Я внедряю угловое приложение на докер-сервер, используя traefik для обработки обратных прокси. Я пытаюсь заставить его работать через эквивалент ниже ссылки:

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

По этой ссылке я получаю следующие ошибки веб-консоли и пустую страницу. 

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

работает как положено, загружает угловое приложение и все статическое содержимое корректно.

Я пробовал разные варианты меток Traefik Path / PathPrefix / PathPrefixStrip и некоторые вариации в nginx.conf

Ниже приведена соответствующая конфигурация, угловое приложение и 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;
        }
    }
}

докер-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

Ответы [ 2 ]

0 голосов
/ 25 января 2019

Для всех, кто сталкивался с этой же проблемой, ответом было создать мое угловое приложение со следующими параметрами (это в package.json) 

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

И иметь следующую метку в файле составления Docker 

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

Ключевой темой, являющейся приложениями переднего плана, должно быть знание пути, по которому они развертываются, но обычно это можно сделать с помощью переменных среды или аргументов скрипта.

0 голосов
/ 08 января 2019

Похоже, вы обслуживаете свой путь на ~/angular-app/, но ваша разметка, генерируемая Angular, выводится обратно в корень домена. Предлагаем вам посмотреть на использование <base href="./" /> в вашем index.html и, возможно, потребуется исправить другие параметры соответствующим образом, чтобы обеспечить вывод всех путей с относительными путями.

Вы должны дойти до того, что ваш index.html должен выводить сценарии со значением polyfills.b8a0220c9c0a3ba034f8.js (и т. Д.) Вместо /polyfills.b8a0220c9c0a3ba034f8.js, как это, вероятно, происходит сейчас.

Кроме того, если вы выводите абсолютные URL-адреса в любом месте приложения, вам необходимо решить, как использовать X-Forwarded-Prefix (который Traefik добавляет к прокси-запросам) в любом веб-узле для разрешения /angular-app немного. В нашем случае наш веб-хост ASP.NET Core имеет подключенное промежуточное программное обеспечение для этого.

...