nginx 2个位置，用于不同的应用程序（反应和角度）

Question

我有一个React应用程序和一个在Angular中构建的管理仪表板：

/ var / www / example.com / example / web

/ var / www / example.com / example / admin

这是我的Nginx配置：

server {

   server_name example.com;
   index index.html index.htm;

   # React
   location / {
        root /var/www/example.com/example/web/build;
        try_files $uri $uri/ /index.html;
   }

   # Admin
   location /admin {
        root /var/www/example.com/example/admin/dist;
        try_files $uri $uri/ /index.html;
   }
}

当我导航到example.com/admin时，它会将我重定向到react应用程序，而不是角度应用程序。

我知道这可能已经被问过很多了，但是我整天都在试图解决这个问题，但运气不好：（

Answer 1

发生此现象的原因是try_files指令的最后一个参数必须是URI或HTTP错误代码。在您的情况下，通过处理请求try_files，第二个http://example.com/admin指令的结果URI将为try_files，接下来将使用第一个位置块进行处理，并导致您对应用程序做出反应。

一种解决方案是将有角度的应用程序放入react application文件夹的/index.html文件夹中（另请参见admin：]

this question

这样，第二个

server {

   server_name example.com;
   index index.html index.htm;
   # React folder
   root /var/www/example.com/example/web/build;

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

   # Admin
   location /admin {
        # angular app must be in the /var/www/example.com/example/web/build/admin folder
        try_files $uri $uri/ /admin/index.html;
   }
}

指令的结果URI将是try_files，这将导致您到达角度应用程序索引文件。

第二种解决方案是对第二个位置块使用/admin/index.html指令：

alias

[请注意，alias请求的结果URI为

server {

   server_name example.com;
   index index.html index.htm;

   # React
   location / {
        root /var/www/example.com/example/web/build;
        try_files $uri $uri/ /index.html;
   }

   # Admin
   location /admin {
        alias /var/www/example.com/example/admin/dist;
        try_files $uri $uri/ /admin/index.html;
   }
}

，仍将由第二个位置块处理并与文件http://example.com/admin一起提供（如果我使用/admin/index.html指令而不是/var/www/example.com/example/admin/dist/index.html ，位置前缀root将添加到路径中，并在alias文件夹中搜索索引文件）。

[在两种情况下，nginx将在其中寻找文件夹的目录中都没有角度应用程序索引文件，这是nginx HTTP 500错误的原因，因为无限重定向到/admin URI。