如何使用 Nginx 在不同的 url 上运行两个 js 应用程序？

Question

我想在我的 Nginx 服务器上运行两个不同的 js 应用程序。我的问题是我想在端口 3000 上的主 URL / 上启用 React 应用程序，并在端口 1337 上启用不同的 js 应用程序。

当我在主 URL 上设置 React App 时，它可以正常工作，但是在不同 URL 上的任何应用程序（例如 /admin）加载第二个应用程序时都没有正确加载。我已经更改了路径，现在我在主 URL / 上有了我的第二个应用程序，它工作正常，但是当我在 /admin URL 上运行 React 应用程序时，它无法正确加载文件。

如何使用 Nginx 连接不同位置的两个 js 应用？我正在使用 react-react-app 和 create-strapi-app。您可以在 IP 上查看：http://51.178.80.233/ 和客户端：http://51.178.80.233/client

工作示例在每个位置没有两条 root 行。

我在sites-enabled/default 上的配置：

root /var/www/jozefrzadkosz-portfolio.pl;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        server_name _;

        location /client {
                # First attempt to serve request as file, then
                #as directory, then fall back to displaying a 404.
                root /var/www/jozefrzadkosz-portfolio.pl/client;
                proxy_pass http://localhost:3000; #whatever port your app runs on
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }

    location / {
        root /var/www/jozefrzadkosz-portfolio.pl/strapi;
        proxy_pass http://localhost:1337;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

Answer 1

以下是有关在某些 URI 前缀下代理应用程序的一些注意事项，例如，/admin/。

1. 使用正确的位置前缀和proxy_pass URL 参数。使用配置时

   location /admin {
       ...
       proxy_pass http://localhost:3000;
   }
   

   请求http://example.com/admin/some/path 将按原样传递给上游，即http://localhost:3000/admin/some/path，这可能是错误的。如果您希望将此请求作为 http://localhost:3000/some/path 传递给上游，则在指定上游地址时必须使用 URI 部分：

   location /admin/ {
       ...
       proxy_pass http://localhost:3000/;
   }
   

   查看this answer 了解有关此行为的更多详细信息。

2. 应用程序生成的所有 URL（用于资产、页面等）必须是相对的或包含 /admin 前缀。否则它们将不会在我们的位置块中被处理。这是一项重要的任务，取决于应用程序类型，请查看 this question 以了解 React 应用程序（官方文档 here）。不幸的是，我对 Strapi 应用程序一无所知。如果您不能影响应用程序 URL 生成机制，那么剩下的唯一方法是将响应正文中的 URL 替换为 ngx_http_sub_module（对我来说这看起来是一个非常丑陋的解决方案）。