mjhjmtu

I'm building an solution with multiple modules. Each module is a ReactJs app, and i trying config nginx to publish it on the same domain. For examples:

http://application-domain/auth
http://application-domain/admin
http://application-domain/dashboard
http://application-domain/sales

My public directory for nginx stay like this:


|---/var/www

|----/auth

|----/admin

|----/dashboard

|----/sales

where auth, admin, dashboard and sales are subfolders for each projects.

My nginx server conf:

server 
 listen 9000 default_server;
 listen [::]:9000 default_server;
 server_name localhost;

 index index.html;

 location / 
 root /var/www/auth;
 

 location /admin 
 root /var/www;
 

 location /dashboard 
 root /var/www;
 

 location /sales 
 root /var/www;
 

Each project's subfolder has the similar structure like this

The problem is when access http://application-domain/admin, for example, the aplication try to load the static files on root instead subfolder project

GET http://localhost:9000/static/js/main.6314dcaa.js net::ERR_ABORTED

the correct would be get files on admin sub folder like this:

GET http://localhost:9000/admin/static/js/main.6314dcaa.js

What's the better approach to correct nginx configuration for this ?

I think what you are trying to accomplish can be done by expanding the root section of each location like this:

 location /admin 
 root /var/www/admin;
 

 location /dashboard 
 root /var/www/dashboard;
 

 location /sales 
 root /var/www/sales;
 

But that would be the same as only having

location / 
 root /var/www/

Since a call to http://application-domain/admin would evaluate to /var/www/admin.

The first solution would hide anything else in /var/www/ as there is no location rule to access say http://application-domain/private.