使用Nginx从同一服务器上服务多个Angular应用 [英] Serve multiple Angular apps from the same server with Nginx

问题描述

我正在从Nginx中的同一server块提供多个angular应用程序.因此，为了让用户直接浏览到我声明的某些自定义Angular路由，而不必浏览首页(避免访问404页面)，我将这些路由从nginx转发到每个有角度的应用程序的，我为每个location添加了try_files:

I'm serving multiple angular apps from the same server block in Nginx. So in order to let the user browse directly to certain custom Angular routes I've declared without having to go through the home page (and avoid the 404 page), I'm forwarding these routes from nginx to each angular app's index.html, I've added a try_files to each location:

server {
    listen 80;
    server_name website.com;

    # project1
    location / {
        alias /home/hakim/project1/dist/;
        try_files $uri /index.html;
    }

    # project2
    location /project2/ {
        alias /home/hakim/project2/dist/;
        try_files $uri /index.html;
    }

    # project3
    location /project3/ {
        alias /home/hakim/project3/dist/;
        try_files $uri /index.html;
    }
}

此解决方案避免了在使用Angular路线时出现404错误的问题，但是问题是当我浏览到/project2/或/project3/时，它会重定向到/project1/.显然这不是预期的，因为我希望每个位置都可以转发到适当项目的/project-i/index.html.

This solution avoids the 404 error when going to an Angular route, but the problem is that when I browse to /project2/ or /project3/ it redirects to the /project1/. That's obviously not what is expected, since I want to have each location to forward to the /project-i/index.html of the adequate project.

推荐答案

在单个域上拥有多个独立的应用程序通常是不安全的做法.

It is generally a bad security practice to have multiple independent apps on a single domain.

但是，我相信您在这里面临的是try_files工作方式的特殊性-根据

However, I believe what you're facing here is the peculiarity of the way that try_files works -- according to http://nginx.org/r/try_files,

如果未找到任何文件，则会进行内部重定向到最后一个参数中指定的uri.

If none of the files were found, an internal redirect to the uri specified in the last parameter is made.

有效地，这意味着，如果在/index.html规范之后会有一个额外的参数(即，基本上什么都没有)，那么您的代码将按预期工作；但是，由于缺少此类最终参数，因此在每种情况下都将所有内容重定向回/ location，就好像要发出GET /index.html HTTP/1.1请求一样(除了全部在内部完成)在nginx中).

Effectively, this means that if there would have been an extra parameter after your /index.html specification (i.e., basically, anything at all), then your code would have worked as you expected; however, due to the lack of any such final parameter, what happens in each case is that everything gets redirected back to the / location, as if a GET /index.html HTTP/1.1 request was to have been made (except it's all done internally within nginx).

因此，作为解决方案，您可以将内部重定向的路径固定为保留在相同的location(例如，/projectX/index.html)中，或者不使用路径，但使最后一个参数返回错误代码(例如=404，只要文件始终存在，就永远不会触发它.)

So, as a solution, you can either fix the path for the internal redirect to remain within the same location (e.g., /projectX/index.html), or leave the paths alone, but make the last parameter return an error code (e.g., =404, which should never be triggered as long as your file always exists).

• 例如，try_files $uri /projectX/index.html;

或者，try_files $uri /index.html =404;.

如:

location /projectX/ {
    alias /home/projectX/dist/;
    try_files $uri /projectX/index.html; # last param is internal redirect
}

或者:

location /projectX/ {
    alias /home/projectX/dist/;
    try_files $uri /index.html =404;
}

总而言之，请注意，/projectX/index.html只能用作最后一个参数，而/index.html只能用作非最终参数.

In summary, note well that /projectX/index.html would only work as the last parameter, and /index.html would only work as a non-final one.

这篇关于使用Nginx从同一服务器上服务多个Angular应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！