Ad

Proxying Multiple Create-react-app Static Folders With Nginx

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

Ad

Answer

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 $uriwill contain the base path.

Ad
source: stackoverflow.com
Ad