☰

如何使用 nginx 在同一个域上运行多个 React 应用程序

tag-icon • tag-icon nginx
如何使用 nginx 在同一个域上运行多个 React 应用程序

我有两个 react.js 应用程序在两个不同的端口上运行。App1 在端口 3000 上，App2 在端口 3001 上。在其他所有情况下，App2 应提供服务http://localhost:8000/nest/dataviewer/2597/data/2490，App1 应提供服务。

我的 nginx 配置：

server {
        listen 8000;
        gzip on;
        gzip_types      text/plain application/xml;
        gzip_proxied    no-cache no-store private expired auth;
        gzip_min_length 1000;
        satisfy any;
        index index.html index.htm;
        location ~* (^nest/dataviewer) {
            proxy_pass  http://127.0.0.1:3001;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-for $remote_addr;
           #proxy_set_header X-Forwarded-Proto $scheme;
    }
    location ~*  {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-for $remote_addr;
    }
    }

使用上述配置，我无法运行app2 http://localhost:8000/nest/dataviewer/2597/data/2490：

这是我收到的警告，并且没有加载任何页面。

proxyConsole.js:56 Warning: [react-router] Location "/nest/dataviewer/2597/data/2490" did not match any routes

答案1

看起来你的问题是你的 react.js 应用程序没有路由来处理你发送的路径：

[react-router] 位置“/nest/dataviewer/2597/data/2490”与任何路由不匹配。

如果您希望它能够处理该路径，请检查您的应用。相反，或者应用需要不同的路径，请更新您的 location 和 proxy_pass 指令以发送预期的请求 URI。查看 Nginx proxy_pass 文档：http://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_pass

如果 proxy_pass 指令指定了 URI，那么当请求传递到服务器时，规范化请求 URI 中与位置匹配的部分将被指令中指定的 URI 替换：

假设您的应用需要“/2597/data/2490”。您可以尝试以下方法。代理传递上的尾部斜杠在这里至关重要，因为它将替换 /nest/dataviewer/，并最终将其删除。

location /nest/dataviewer/ {
    proxy_pass http://127.0.0.1:3001/;
}

注意，您需要将第二个位置替换为非正则表达式位置，因为匹配的正则表达式始终优先于任何前缀匹配。如果不这样做，所有请求都将由该location ~*块处理。

完整的解决方案可能如下所示：

server {
    listen 8000;
    gzip on;
    gzip_types      text/plain application/xml;
    gzip_proxied    no-cache no-store private expired auth;
    gzip_min_length 1000;
    satisfy any;
    index index.html index.htm;
    location /nest/dataviewer/ {
        proxy_pass  http://127.0.0.1:3001/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-for $remote_addr;
       #proxy_set_header X-Forwarded-Proto $scheme;
    }
    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-for $remote_addr;
    }
}

相关内容