不同应用程序的 nginx 2 个位置（反应和 angular）

Question

我有一个 React 应用程序和一个内置于 Angular 中的管理仪表板：

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

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

这是我的 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 应用程序而不是 angular 应用程序。

我知道这个问题以前可能被问过很多次，但我一整天都在尝试解决这个问题，但没有成功:(

Answer 1

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

一种解决方案是将angular应用程序放入react应用程序文件夹的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，它会引导您到 angular 应用程序索引文件。

第二种解决方案是对第二个位置块使用 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 将在其中查找它的文件夹中缺少 angular 应用程序索引文件将是 nginx HTTP 500 错误的原因，因为无限重定向到 /admin/index.html URI。

不同应用程序的 nginx 2 个位置（反应和 angular）

nginx 2 locations for different apps (react and angular)

angular

reactjs

nginx

nginx-location

nginx-config