Angular 个应用的 Nginx 反向代理

Question

我使用 Nginx 创建了一个反向代理，它在各种应用程序（ASP.NET API 和 Angular 应用程序）中重定向。

反向代理nginx.conf（最重要的设置）：

...
server {
    listen 80;
    server_name localhost 127.0.0.1;

    location /projects/sample-app1/api {
        proxy_pass http://sample-app1-api:80;
    }

    location /projects/sample-app1 {
        # Angular app
        proxy_pass http://sample-app1:80;
    }

    location /projects/sample-app2 {
        # Angular app 
        proxy_pass http://sample-app2:80;
    }

    location /api {
        proxy_pass http://random-api:80;
    }

    location / {
        proxy_pass http://personal-app:80;
    }
}

所有 API 都可用并正常工作，因为位置参数指示的路径与控制器中的路径相同。在 url“/”上运行的 Angular 应用程序也可以工作，但问题出在“sample-app1”和“sample-app2”上。当我键入 url 转到这些应用程序时，我收到类似于以下内容的错误：

Uncaught SyntaxError: Unexpected token < main.d6f56a1….bundle.js:1

我怀疑通向应用程序的 URL 包含其他元素 (/projects/sample-app1)，并且其默认索引路径只是“/”。所以我必须重写以删除 URL 的冗余部分，但该怎么做呢？到目前为止，我的尝试没有成功，我尝试了与 Whosebug 和 Github.

上其他线程不同的方法

Angular 应用 nginx.conf:

events{}
http {
   include /etc/nginx/mime.types;

   server {
       listen 80;
       server_name localhost;
       root /usr/share/nginx/html;
       index index.html;

       location / {
           try_files $uri $uri/ /index.html;
       }
   }

}

Answer 1

启动构建时必须指定子文件夹的路径：

ng build --base-href=/subfolder/

在调试模式下你可以添加额外的参数

ng serve -o --host 0.0.0.0 --port 4200 --disable-host-check --base-href=/subfolder/

nginx 配置

location /subfolder {
        proxy_pass http://app:80/subfolder;
}

Answer 2

部分解决方案是用户的响应：Esmaeil Mazahery，但必须采取更多步骤。

首先，我更改了 Angular 应用程序 Dockerfile（传递了额外的构建参数，例如：base-href 和 deploy-url）

RUN npm run ng build -- --prod --base-href /projects/sample-app1/ --deploy-url /projects/sample-app1/

然后，我从

更改了反向代理nginx.conf配置

location /projects/sample-app1 {
    # Angular app
    proxy_pass http://sample-app1:80;
}

至：

location /projects/sample-app1 {
    # Angular app
    proxy_pass http://sample-app1:80/;
}

如果末尾没有斜杠，重定向将无法正常工作。

nginx 重定向的匹配顺序也很重要。因此，在地址 /projects/sample-app1 和 /projects/sample-app2 之前，我放置了符号 ^~，这会导致先获取给定的位置。这个 nginx 本地化模拟工具也被证明非常有用：Nginx location match tester

Angular 个应用的 Nginx 反向代理

Nginx reverse proxy for Angular apps

nginx

docker

angular

nginx-reverse-proxy