使用 Nginx 代理多个 create-react-app 静态文件夹

Question

我有一个 nginx 托管在一个 VM 上，它有一个身份验证服务，可以公开一个简单的登录页面，还有一些其他服务托管在辅助 VM 上（通过 serve -s build 提供的 create-react-app 构建）。如果用户尝试访问受保护的资源，则会提示登录页面。

架构如下：

                                               +-------------------------------+
                                               |     Other VM                  |
                                               |                               |
                                               |  +-----------------------+    |
                                               |  |serve -s build -l 8000 |    |
                             +-------------------->    localhost:8000     |    |
                             | /resource1      |  |                       |    |
                             |                 |  +-----------------------+    |
                             |                 |                               |
            +----------+     |                 |                               |
            |          |     |                 |  +-----------------------+    |
  /static?  |  Linux   |     |                 |  |serve -s build -l 7000 |    |
+---------->+  nginx   +-----+-------------------->    localhost:7000     |    |
            | Auth sys |       /resource2      |  |                       |    |
            |          |                       |  +-----------------------+    |
            +----------+                       |                               |
                                               |              ●                |
                                               |              ●                |
                                               |              ●                |
                                               |                               |
                                               |                               |
                                               +-------------------------------+

我已经正确配置了 nginx 来反向代理所有资源。

resource1、resource2、resourcen 和 auth 系统访问 /static 文件夹以获取 css、js 等...

我已经 "workaround" 检索了正确的静态文件夹，如下所示：

    location /static {
        try_files $uri $uri/ =404;
        if ($http_referer ~ ^http://linuxhostname/resource1) {
            proxy_pass http://otherVMhostname:8000;
        }

        if ($http_referer ~ ^http://linuxhostname/resource2) {
            proxy_pass http://otherVMhostname:7000;
        }
    }

在遇到这种情况之前似乎工作正常：试图在没有身份验证的情况下访问 /resource1：用户正在请求 /resource1 但提示登录页面，nginx 将静态文件代理到另一个虚拟机上，而这些文件在其文件系统上，这会导致 404 错误。

为了缓解这个问题，我想将 static 文件夹名称更改为特定名称（例如，对于 resource1，输入 static_r1），但我发现并不简单（参见 this link）。

对于如何处理 nginx 端或应用程序端，您有什么想法吗？

谢谢

Answer 1

经过一些经验和对 create-react-app 的更新后，我了解到在构建 PUBLIC_URL=basepath.

包时可以使用环境变量

这将使 index.html（React SPA 的入口点）在 /basepath/static 中查找静态文件，因此通过设置此变量完成工作。

您唯一需要注意的是网络服务器上的实际路径，例如：如果您使用 nginx 指令 try_files $uri 它实际上会在 $root_dir/basepath 内部查找，因为 $uri 将包含基本路径。

使用 Nginx 代理多个 create-react-app 静态文件夹

Proxying multiple create-react-app static folders with Nginx

reverse-proxy

nginx

reactjs

create-react-app

nginx-config