Nginx – Reverse proxy application and its static files with Nginx

nginxreverse-proxystatic-contentstatic-filesweb-applications

I am trying to do something that seems to me very simple but I must be stupid or miss something very obvious because I cannot figure it out.

I want to access the multiple web applications running on my server with a unique prefix for each one of them:

http://mywebserver/app1 -> localhost:9001
http://mywebserver/app2 -> localhost:9002
...

From what I understood, I need to configure Nginx as a reverse proxy, so I did that:

server {
listen 80;
server_name mywebserver;

  location /app1{
    proxy_set_header    Host $host;
    proxy_set_header    X-Real-IP $remote_addr;
    proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header    X-Forwarded-Proto $scheme;
    proxy_pass          http://127.0.0.1:9001/;
  }
  ...
}

This configuration allows me to access the homepage of the application at http://mywebserver/app1, but the static content is not loaded.

When I open the console of my browser, I can see that it is trying to get the resources from http://mywebserver/static/custom/index.js and not something like http://mywebserver/app1/static/custom/index.js.

I tried to add a root directive in the location block to serve the static but it is not taken into account since the static content request is made on / and not on /app1.

How to fix this? Is there something obvious I am missing or I did I completely misunderstood the concept of reverse proxy?

Thank you.

Best Answer

The suggestion from @sikian did the trick, I changed the location declaration from location /app1 { ... } to location /app1/ { ... }.

The static files were served without error in the console, and the application seems to be fully working.