反应&nginx路由到子目录 [英] React & nginx routing to subdirectory

问题描述

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

Just started with using React. I have an app created with create-react-app which should be running on a sub-directory while making API calls to a different path.

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

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

When setting "homepage":"https://foo.example.com/analytics" in the client's package.json, all the resource paths seem to be correct (i.e. https://foo.example.com/analytics/static/...), but when checking networking no request to .../api/data shows up in my browser's networking inspector and the app doesn't properly spawn.

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

Using absolute paths in the App's API call (fetch('https://foo.example.com/api/data') instead of fetch('/api/data')) doesn't seem to help, either.

当我在 package.json 中设置 "homepage":"." 并更改 Nginx 配置以在服务器根目录上提供 react 构建目录时，应用程序作品.

When instead I set "homepage":"." in package.json and also change the Nginx config to serve the react build directory on server root, the app works.

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

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

However, in this case, the app is also available under https://foo.example.com, which is something I don't want.

我强烈怀疑这与路由有关，但不知道如何解决.所以任何帮助将不胜感激！

I strongly suspect this has to do with routing, but couldn't figure out how to fix it. So any help would be much appreciated!

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

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

I doubt it's the most straight forward solution, but the following setup works for me:

React 应用

在package.json中，在运行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 作为后备.因此，正则表达式解决方法.

My understanding is that the initial setup using try_files $uri was looking for files in the root directory /var/www/myapp/build for the full uri rather than only the path that follows /analytics. E.g. when requesting ../analytics/css/styles.css it would check if a file (or directory) is available under /var/www/mayapp/build/analytics/css/styles.css which doesn't exist, so it kept serving the index.html as fallback. Hence the regex workaround.

尽管如此，改进此解决方案的反馈仍然非常受欢迎.

Feedback to improve this solution still very welcome, though.

推荐答案

我也遇到了同样的问题.最后我能够使用官方文档和答案组合解决它:

I was struggling with the same problem. Finally I was able to solve it using official documentation and a combination of answers:

假设:

• 您的 React 应用基于 create-react-app 包(您使用的是 react-router-dom).
• 您正在使用 Nginx，而根路径正被另一个服务(甚至是另一个 React/Gatsby 应用程序，这是我的情况)使用.
• 您希望在子目录中部署 React 应用程序，并能够从该子目录提供 React 应用程序的所有静态数据.

• Your React App is based on create-react-app package (you are using react-router-dom).
• You are using Nginx and the root path is being used by another service (or even another React/Gatsby App which is my case).
• You want to deploy the React App on a subdirectory and be able to serve all statics of your React App from that subdirectory.

响应应用更改:

基于官方文档.>

1. 通过添加basename 更新您的BrowserRouter.示例:.
2. 在您的 package.json 上指定一个 homepage.示例:"homepage": "/webapp".
3. 如果您通过相对路径引用静态文件，则应将子目录添加到该引用中.示例:src="/static/logo/logo.png" 变为 src="/webapp/static/logo/logo.png".

1. Update your BrowserRouter by adding a basename. Example: <BrowserRouter history={history} basename="/webapp">.
2. Specify a homepage on your package.json. Example: "homepage": "/webapp".
3. If you are referencing a static file by it's relative path, you should add the subdirectory to that reference. Example: src="/static/logo/logo.png" becomes src="/webapp/static/logo/logo.png".

Nginx 变化:

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

这篇关于反应&nginx路由到子目录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！