多个 React 应用程序的 Nginx 多个位置答案

【问题标题】：Nginx multiple locations for multiple React application多个 React 应用程序的 Nginx 多个位置
【发布时间】：2020-10-22 08:13:09
【问题描述】：

我有 2 个使用 React Router 的不同 React 应用程序。我的 Nginx conf 中有以下结构：

# This is to serve main React App    
location / {
      root /apps/www;
      index  index.html index.htm;
      try_files $uri /index.html;
    }

# This is to serve secondary React App
 location /report {
    root /apps/www/report;
    try_files $uri =404;
    }

我已将两个构建文件放在相应的根文件夹中。

但是，当我打开 https://hostname/report 时，它没有转到辅助 React 应用程序，而是转到主应用程序，由其 React 路由器处理，然后重定向到 NotFound 页面。

如何让 Nginx 位置处理到/apps/www/report 的路由？

【问题讨论】：

标签： reactjs nginx react-router

【解决方案1】：

您似乎错误地使用了root 指令（检查root 和alias nginx 指令之间的区别）。我认为您应该使用类似的配置

root /apps/www;
index index.html index.htm;
# This is to serve main React App    
location / {
    try_files $uri /index.html;
}
# This is to serve secondary React App
location /report {
    try_files $uri /report/index.html;
}

您可能还需要根据您的 /report 前缀重建您的第二个 React 应用程序，因为指向其资产的所有链接都应该使用此前缀生成（或者它们显然会与您的第一个应用程序一起提供）。以this文章为例。

【讨论】：