时间戳

首页 > 解决方案 > nginx 2 个不同应用程序的位置（反应和角度）

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

问题描述

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

/var/www/example.com/example/web <- 反应

/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它时，它会将我重定向到反应应用程序而不是角度应用程序。

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

标签： angularreactjsnginxnginx-locationnginx-config

解决方案

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

一种解决方案是将 Angular 应用程序放入adminreact 应用程序文件夹的文件夹中：

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 将在其中查找它的文件夹中缺少 angular 应用程序索引文件将是 nginx HTTP 500 错误的原因，因为无限重定向到/admin/index.htmlURI。

推荐阅读