reactjs - React & nginx 路由到子目录

Question

刚开始使用 React。我有一个用 create-react-app 创建的应用程序应该在 sub-directory 上运行同时对不同的路径进行 API 调用。

react 应用程序:

服务器上的位置:/var/www/myapp/build
端点:https://foo.example.com/analytics
数据 API 端点: https://foo.example.com/api/data
Nginx 设置

    location /analytics {
           root /var/www/myapp/build;
           try_files $uri /index.html;
    }

设置时"homepage":"https://foo.example.com/analytics"在客户的package.json ，所有资源路径似乎都是正确的(即 https://foo.example.com/analytics/static/... )，但是在检查网络时没有对 .../api/data 的请求出现在我浏览器的网络检查器中，并且应用程序没有正确生成。

在 App's API call 中使用绝对路径( fetch('https://foo.example.com/api/data') 而不是 fetch('/api/data') )似乎也没有帮助。

相反，当我设置 "homepage":"."在 package.json并更改 Nginx 配置以在服务器根目录上提供 react 构建目录，该应用程序可以工作。

server {
        root /var/www/myapp/build;
}

但是，在这种情况下，该应用程序也可在 https://foo.example.com 下使用。 ，这是我不想要的。

我强烈怀疑这与路由有关，但无法弄清楚如何解决它。所以任何帮助将不胜感激!

--- 编辑/解决方案 ---

我怀疑这是最直接的解决方案，但以下设置对我有用:

react 应用

在 package.json , 设置 "homepage":"./analytics"运行前 npm run build
Nginx 配置:

    location =  /analytics {

            root /var/www/myapp/build;
            try_files /index.html =404;
    }

    location ~ ^/analytics(.*) {

            root /var/www/myapp/build;
            try_files $1 $1/ /index.html =404;
    }

我的理解是初始设置使用 try_files $uri正在寻找根目录中的文件 /var/www/myapp/build对于完整的 uri 而不仅仅是后面的路径 /analytics .例如请求时 ../analytics/css/styles.css它会检查文件(或目录)是否在 /var/www/mayapp/build/analytics/css/styles.css 下可用它不存在，所以它继续服务于 index.html作为后备。因此，正则表达式解决方法。

不过，改进此解决方案的反馈仍然非常受欢迎。

Answer 1

我正在努力解决同样的问题。最后，我能够使用官方文档和答案组合解决它:

假设:

你的 React 应用基于 create-react-app包(您正在使用 react-router-dom )。

您正在使用 Nginx 并且根路径正被另一个服务(甚至是另一个 React/Gatsby 应用程序，这是我的情况)使用。

您希望在子目录中部署 React App，并能够从该子目录提供 React App 的所有静态数据。

react 应用程序更改 :

基于 official documentation .

更新您的 BrowserRouter通过添加 basename .示例:<BrowserRouter history={history} basename="/webapp"> .

指定一个 homepage在您的 package.json .示例:"homepage": "/webapp" .

如果您通过相对路径引用静态文件，则应将子目录添加到该引用中。示例:src="/static/logo/logo.png"变成 src="/webapp/static/logo/logo.png" .

Nginx 变化 :

location ^~ /webapp {
   alias /var/www/myapp/build;
   try_files $uri $uri/ /webapp/index.html;
}