nginx 2个不同应用程序的位置(反应和角度) [英] nginx 2 locations for different apps (react and angular)

问题描述

我有一个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应用程序，而不是有角度的应用程序.

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

解决方案

之所以会出现此现象，是因为 try_files 指令必须是URI或HTTP错误代码.在您的情况下，通过处理请求http://example.com/admin，第二个try_files指令的结果URI将为/index.html，接下来将使用第一个位置块进行处理，并使您对应用程序做出反应.

一种解决方案是将有角度的应用程序放入react application文件夹的admin文件夹中:

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

这样，第二个try_files指令的最终URI将是/admin/index.html，这将导致您进入角度应用程序索引文件.

第二种解决方案是使用 alias 指令对于第二个位置块:

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请求的最终URI将是/admin/index.html，它仍将由第二个位置块处理并与文件/var/www/example.com/example/admin/dist/index.html一起提供(如果我使用root指令而不是alias一个，位置前缀/admin将添加到路径中，并且在/var/www/example.com/example/admin/dist/admin文件夹中搜索索引文件.)

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

I have a React application and an admin dashboard which is built in Angular:

/var/www/example.com/example/web <- React

/var/www/example.com/example/admin <- Angular

This is my Nginx config:

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

When I navigate to example.com/admin it redirects me to the react application instead of the angular one.

I know this may have been asked a lot before but I've been trying to fix this all day with no luck :(

解决方案

This behavior occures because the last argument of try_files directive must be an URI or the HTTP error code. In your case, by processing request http://example.com/admin resulting URI of the second try_files directive will be /index.html, which is in next turn will be processed with first location block and leads you to react application.

One solution is to put angular application into the admin folder of the react application folder:

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

This way resulting URI of the second try_files directive will be /admin/index.html, which leads you to angular application index file.

The second solution is to use an alias directive for the second location block:

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

Note that resulting URI of the http://example.com/admin request will be /admin/index.html, which still will be processed by the second location block and served with the file /var/www/example.com/example/admin/dist/index.html (if I use root directive instead of alias one, location prefix /admin will be added to the path and the index file will be searched in the /var/www/example.com/example/admin/dist/admin folder).

In both cases the absence of angular app index file in the folder in which nginx will look for it would be the reason of nginx HTTP 500 error because of infinite redirection to /admin/index.html URI.

这篇关于nginx 2个不同应用程序的位置(反应和角度)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！