Angular 应用程序的 Nginx 反向代理

如何解决Angular 应用程序的 Nginx 反向代理

我使用 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 都可用并正常工作，因为它们的路径由 location 参数指示与控制器中的相同。在 url "/" 上运行的 Angular 应用程序也可以工作，但问题在于 "sample-app1" 和 "sample-app2"。当我输入网址以转到这些应用程序时，我收到类似于以下内容的错误：

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

我怀疑通向应用程序的 URL 包含附加元素 (/projects/sample-app1)，其默认索引路径只是“/”。所以我将不得不重写以删除 URL 的冗余部分，但怎么做呢？到目前为止，我的尝试还没有成功，我尝试了与 StackOverflow 和 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;
       }
   }

}

解决方法

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

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;
}

,

解决方案的一部分是用户的响应：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