Nginx reverse proxy 404 on static files

Question

I am looking to reverse proxy one url/path to different ports on an end point that represent different servers hosting their own web apps.

I have the proxy_pass working, but the static files fail because the resources are relative their instance.

I have for example - server_name = myproxy.com:

location /app1/{
    proxy_pass: http://192.168.1.1:8080/;
    proxy_set_header Host 192.168.1.1;
}
location /app2/{
    proxy_pass: http://192.168.1.1:8081/;
    proxy_set_header Host 192.168.1.2;
}
location /{
    proxy_pass: http://192.168.1.1:8080/;
    proxy_set_header Host 192.168.1.1;
}

The reverse-proxy works great as mentioned, except for the static files associated with the app2. App1 static files work fine, but App2 static files result in a 404. Which make sense, because App1 resource files are located at /assets/app1.css this works because I have a redirect for location / in place that resolves back to App1 but App2 resource files, which are totally different /assets/app2.css result in 404.

So, is there a way to rewrite App2 static requests from /assets/app2.css to their respective proxy location? something like:

location /app1/{
    proxy_pass: http://192.168.1.1:8080/;
    proxy_set_header Host 192.168.1.1;
}
location /app2/{
    proxy_pass: http://192.168.1.1:8081/;
    proxy_set_header Host 192.168.1.2;

    *rewrite app2 static urls frome /assets/* to /app2/assets/*
}
location /{
    proxy_pass: http://192.168.1.1:8080/;
    proxy_set_header Host 192.168.1.1;
}

Solution

When a file /assets/app1.css(App1) load by rules from location /app1/ then load as /assets/app1.css by rules from location /. App2 has same behavior, but you location / was configurate for App1, not for App2.

Your config must be:

location /app1/ {
    proxy_pass: http://192.168.1.1:8080/app1/;        
}

location /app2/ {
    proxy_pass: http://192.168.1.1:8081/app1/;      
}

Required: The alias app1 should be is same on proxy and upsteam servers. On upsteam server it may been symlink to original webroot application.

Or you can use different subdomain or ports....

server_name app1.localhost;
location / {
    proxy_pass: http://192.168.1.1:8081/;      
}

---

P.S.

I explored many manipulations with nginx config by proxy. Nginx doesn't work correctly with one rule:

location /app1/ {
    proxy_pass: http://192.168.1.1:8080/;        
}

For example: css and js files will be load - proxy_server/css ... - proxy_server/js ...

from request proxy_server/app1/index.html and you will get 404.

You can add location /css/ rule to config. But your app2 could use this location too. And you can't detect upstream server to proxy by him. You can use reffer to detect upsteam

 server {
    listen          80;

    if ($uri ~ app1/) {
      break;
    }

    if ($http_referer ~ app1/ ) {
      rewrite (.*) /app1/$1 redirect;
    }

    location /app1/ {
        proxy_pass http://192.168.1.1:8080/;
    }
}

but POST data will be destroy after redirect.

It would be great if it was necessary to adjust the configuration only to the proxy server by location. But it's a dream.

Comments

[Dmitry MiksIr]

Do you want to rewrite links in html body? If yes, try this nginx.org/en/docs/http/ngx_http_sub_module.html But check that your backend do not gzip files.

[abarraford]

thanks for the response. I ended up going the easier route, which was to open up multiple ports to Nginx, then I created a separate nginx configuration for each service. accessing app1 became server_url:8081 and accessing app2 became server_url:8080 and so on, letting me skip having to deal with any of these 404 errors. This works for me because this is supporting an internal only platform. It would not be ideal for something public facing.

[alayor]

@user3263752 could you share your config file content?

[abarraford]

I have one nginx.conf file that is the main conf file, this looks similar to the example conf here: nginx.com/resources/wiki/start/topics/examples/full, except I do not have any server blocks inside mine but I do have an include path/to/app/confs/*.conf. Now I can create any number of server block configurations inside separate conf files. Some might support WebSockets, some plain http, https, some with lua authentication . . . you name it, each of these subsequent conf files are associated with a specific back end service and routed separately by bound Nginx ports.