Why does using nginx as a reverse proxy break local links?

Question

I've just set up nginx as a reverse proxy, so some sites served from the box are served directly by it and others are forwarded to a Node.js server.

The site being served by Node.js, however, is displayed with no CSS or images, so I assume the links are somehow being broken, but don't know why.

The following is the only file in /etc/nginx/sites-enabled:

server {

    listen   80; ## listen for ipv4
    listen   [::]:80 default ipv6only=on; ## listen for ipv6

    server_name  dev.my.site;

    access_log  /var/log/nginx/localhost.access.log;

    location / {
            root   /var/www;
            index  index.html index.htm;
    }

    location /myNodeSite {
            proxy_pass http://127.0.0.1:8080/;
            proxy_redirect off;
            proxy_set_header Host $host;
    }
}

I had thought perhaps it was trying to find them in /var/www due to the first entry, but removing that doesn't seem to help.

Answer 1

Without more details this is just a guess, but on your frontend you've made your node.js available at /myNodeSite. If your node.js site returns something like this:

<img src="/images/myimage.png"/>

The client will request /images/myimage.png...which will not get directed to your node.js site, since it doesn't start with /myNodeSite. There are a few solutions:

• Make your node.js application(s) aware of the prefix you're using on the frontend so that they generate appropriate links. Always generate links via some sort of function that takes this into account, rather than statically encoding links.
• Implement some sort of rewriting feature on the frontend. I don't know nginx, but for Apache there's mod_proxy_html.

You may also be able to use exclusively relative links (no leading /) on your node.js site, but this implies a very flat site layout and is easy to break.