使用nginx在docker中使用nginx运行的Angular应用程序的Traefik路径无法使用根路径工作 [英] Traefik Path to an Angular app running in docker with nginx won't work using the root path

问题描述

我正在使用traefik将有角度的应用程序部署到docker服务器，以处理反向代理.我正试图通过下面的波纹管链接使其工作:

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

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

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

如果手动输入

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

它可以按预期工作，可以正确加载angular应用程序及其所有静态内容.

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

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

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

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

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

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

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

推荐答案

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

For anyone who stumbled along this with the same issue the answer was to build my angular app with the following parameters (This is in package.json)

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

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

And have the following label in the docker compose file

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

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

The key theme being front end apps need to have knowledge of the path they are being deployed to, but this can usually be handled via environmental variables or script arguments.

这篇关于使用nginx在docker中使用nginx运行的Angular应用程序的Traefik路径无法使用根路径工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！