Proxying multiple create-react-app static folders with Nginx

Question

I have a nginx hosted on a VM with an authentication service that expose a simple login page and some other services hosted onto a secondary VM (create-react-app builds served through serve -s build). If the user tries to access a protected resource gets promped the login page.

The architecture is as follow:

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

I have correctly configured nginx to reverse proxy all the resources.

resource1, resource2, resourcen and auth system access to a /static folder to take css, js, etc...

I have done a "workaround" to retrieve the correct static folder that is as follow:

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

Seemed to work fine until I faced this situation: trying to access /resource1 without authentication: The user is requesting /resource1 but the login page is prompted, nginx is proxying static files onto the other vm while they are on its file system, this results in a 404 error.

To mitigate this issue I thought to change the static folder name into something specific (e.g. for resource1, put static_r1) but I found that is not straightforward (see this link).

Do you have any ideas on how this can be approached nginx side or application side?

Thanks

Answer 1

After some experience and the updates made to the create-react-app I learned that you can use an environment variable when you build your package that is PUBLIC_URL=basepath.

This will make the index.html (the entrypoint of the React SPA) look for static files inside /basepath/static, hence by setting this variable the job is done.

The only thing you need to be aware of is the actual path on the websever, for example: if you use the nginx directive try_files $uri it will actually look inside $root_dir/basepath since the $uri will contain the base path.