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

时间:2019-08-05 09:17:28

标签: reactjs nginx reverse-proxy create-react-app nginx-config

我在具有身份验证服务的VM上托管了一个nginx,该身份验证服务公开了一个简单的登录页面,并将一些其他服务托管在辅助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来反向代理所有资源。

resource1resource2resourcen和auth系统访问/ static文件夹以获取CSS,JS等...

我已经做了一个“变通办法”来检索正确的静态文件夹,如下所示:

    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端或应用程序端使用此方法有任何想法?

谢谢

0 个答案:

没有答案