First time using nginx.

What i have:
I have three apps running.

1. Public app: http://localhost:8080;
2. Admin app: http://localhost:1000;
3. Infra app: http://localhost:3000;

What i'm trying to do:
I want each app to use its respective resources (css, js, etc).

What i'm already doing:
In each app i'm already serving their respective static files.
So i have in Public and Admin apps this respective line of code:

this.express.use('/css',express.static(path.resolve(__dirname, 'css')));

When accessing each app directly (using its respective door) e.g (http://localhost:8080) their respective resources are being found and used.

What is going wrong: Wen accessing and app through the web server with the exception of the Public App (door 8080) their respective resources are not being loaded.

What i tried to do: Set up two additional locations for the infra app, but i don't know if this is the right course of action.

nginx config file:

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include mime.types;
    default_type application/octet-stream;
    sendfile on;
    keepalive_timeout 65;

    server {
        listen 80;
        server_name  localhost;

        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection keep-alive;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
        proxy_http_version 1.1;

        # PUBLIC
        location / {
            proxy_pass http://localhost:8080;
        }

        # ADMIN
        location /admin {
            proxy_pass http://localhost:1000;
        }

        # INFRA
        location /api {
            proxy_pass http://localhost:3000/api;
        }

        location /images {
            proxy_pass http://localhost:3000/images;
        }

        location /fonts {
            proxy_pass http://localhost:3000/fonts;
        }

        # ErrorPage
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

}

CodePudding user response：

Modify admin app to server the static files on /admin/css and /admin/js paths. Do the same with infra app, its static files will be served on /infra/css and /infra/js paths.

Admin App:

this.express.use('/admin/css',express.static(path.resolve(__dirname, 'css')));
this.express.use('/admin/js',express.static(path.resolve(__dirname, 'js')));

Infra App:

this.express.use('/infra/css',express.static(path.resolve(__dirname, 'css')));
this.express.use('/infra/js',express.static(path.resolve(__dirname, 'js')));

Modify the nginx file such that all paths starting with /admin will go to you admin app and all paths starting with /infra will go to infra app.

# PUBLIC
location / {
    proxy_pass http://localhost:8080/;     #note the trailing slash
}

# ADMIN
location /admin/ {                         #note the trailing slash
    proxy_pass http://localhost:1000/;     #note the trailing slash
}

# INFRA
location /infra/ {                         #note the trailing slash
    proxy_pass http://localhost:3000/;     #note the trailing slash
}

Let's say you're running nginx on default port i.e. 80 http://localhost/css will now load css of public app, http://localhost/infra/css will load css of infra app and http://localhost/admin/css will load the same for admin app.