Proxying multiple create-react-app static folders with Nginx - reactjs

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.