I am trying to use Nginx to reverse proxy a node.js app on a sub-directory of my main website which is also reversed proxied.
The / reverse proxy works as expected however the second location does not load any assets...
I am using the below config:
location / {
proxy_pass http://192.168.1.104:3000/;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location /new/ {
proxy_pass http://192.168.1.65:3000/;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
This works in as much as when I go to the ./new url I can see the default page of the node.js app but no images, css or js assets are loaded.
When I check the browser console I can see loading errors that show that the browser is trying to load the assets from the / location...
Also the links shown on the page loaded at ./new also point to the / location so they also do not work...
I have been trying to work out how to resolve this and have seen that rewrite or return commands in the nginx.conf file can be used to redirect the browser but none of these seem to work to correct my issue... or I may be misunderstanding how to use them as I see a 'too many redirects' error page when trying to load from the ./new URL...
How can I resolve this?
You need to modify your app to prepend its root path to urls, nginx does not alter proxied content.