Hiding Node app port numbers on one domain with nginx reverse proxy

Question

I'm still a relative beginner in nginx and hope to get some help and clarification on something I'm working on.

So say I have 2 Node apps, app1 and app2 .

I have a production server, but I'm trying to test this locally first.

Currently app1 listens on port 8000 and app2 listens on port 8001.

So currently, they are sitting at localhost:8000 and localhost:8001 , and would accessed in the production server as production.example.com:8000 and production.server.com:8001 .

My question is, how can I hide the port numbers and assign them to a specific URL?

I want the result to be accessible from localhost/app1 and localhost/app2 , and production.example.com/app1 and production.server.com/app2 in the production server.

I don't know what I'm getting wrong in the nginx.conf , so I hope someone can help me on this issue. These apps all have HTML forms, so I need them to post to production.example.com/app1 or something like production.example.com/app2/download . Their CSS breaks as well due to the location of the public folder in each app, since they are only in /public/css.css , not in app2/public/css.css .

I can change all of the form actions and router gets/posts, as well as the stylesheet references by adding /app1 and /app2 respectively in the Node apps, but that feels like I'm doing something wrong, as I shouldn't change any of my router info.

Here is my nginx.conf file:

Edit: So this is what I have right now:

server {
        # ...

        location /app1 {
                rewrite ^/app1$ / break;
                rewrite ^/app1/(.*) /$1 break;
                proxy_pass      http://127.0.0.1:8000;
        }

        location /app2 {
                rewrite ^/app2$ / break;
                rewrite ^/app2/(.*) /$1 break;
                proxy_pass      http://127.0.0.1:8001;
        }
}

And I still get the same issue where the node apps themselves are not using their contexts.

Answer 1

So, I have this same configuration with like 4-5 microservices. Here is the configuration that I use.

server {

    listen       80;
    server_name  localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;
    location /ifttt {
        rewrite ^/ifttt$ / break;
        rewrite ^/ifttt/(.*) /$1 break;
        proxy_pass http://127.0.0.1:8080;
    }
    location /actions {
        rewrite ^/actions$ / break;
        rewrite ^/actions/(.*) /$1 break;
        proxy_pass http://127.0.0.1:5000;
    }
    location /events {
        rewrite ^/events$ / break;
        rewrite ^/events/(.*) /$1 break;
        proxy_pass http://127.0.0.1:5050;
    }
    location / {
        proxy_pass http://127.0.0.1:8081;
    }
}

Hope it serves as a constructive reference. Let's take one,

location /actions {
    rewrite ^/actions$ / break;
    rewrite ^/actions/(.*) /$1 break;
    proxy_pass http://127.0.0.1:5000;
}

So, the first rewrite matches only localhost/actions and forwards it to http://127.0.0.1:5000 The second one matches localhost/actions/<anything> and forwards it to http://127.0.0.1:5000/<anything>

I think you're missing the slash ( / ) before the regex match.

Edit:

Using Your comment as reference

The index is at /app1/index
a page is at /app1/index/flashfireblast
and the navbar header needs to reference /app1/stylesheets/css.css

So, To address /app1/stylesheets/css.css from /app1/index/flashfireblast you need to add ../stylesheets/css.css as the stylesheet href.

For reference:
If current directory is /var/www
1) / : means Root. /
2) ./ : means Current Directory. /var/www
3) ../ : means Previous directory. /var/