Nginx反向代理Angular应用程序

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部分，但如何做呢？ 我迄今为止尝试过的方法都没有成功，我已经从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;
       }
   }

}

- Krzysztofz01

Answer 1

解决方案的一部分在于用户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配置文件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。

- Krzysztofz01

---

很好，我正好也遇到了这个问题，我会记下来以备后用。:) - BruneX

Answer 2

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

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

---

据我所理解，我应该设置ng build --base-href = / projects / sample-app1 /来针对“sample-app1”使一切正常工作？如果我说错了，请纠正我的话。 - Krzysztofz01

如果不是 Angular 路由中的某个路径，您必须设置您希望部署应用程序的所有路径。 - Esmaeil Mazahery

还是不行，也许我应该对 Angular 应用的 nginx.conf 进行一些更改？ - Krzysztofz01

将路径添加到nginx的proxy_pass。 - Esmaeil Mazahery