Node.js Express NGINX : static file paths break with name spaced proxy_pass

Question

So I was accessing my server at domain.com:3333 but just switched it it to domain.com/nodeapp using upstream and proxy pass in my nginx config. The redirect works just fine, but now the links to static files being used my index.html (/styles/style.css & socket.io/socket.io.ks) are broken and all that displays is raw html.

From index.js

app.get('/nodeapp', function(req,res){
 res.sendFile(path.join(__dirname, '/views', 'index.html'));
});

app.use('/styles', express.static(path.join(__dirname, '/views/styles')));

From index.html

<link rel="stylesheet" type="text/css" href="styles/style.css">
<script src="socket.io/socket.io.js"></script>

From .../nginx/sites-enabled/default

upstream nodeapp{
  server localhost:3333 fail_timeout=0;
}

server{
....

    location /nodeapp{
      proxy_pass http://nodeapp;
    }

....
}

How can I re-establish the link?

Note that in my index.js before the switch the first line shown was app.get('/', function(req,res){

Answer 1

So, this was kind of tricky to figure out, but painfully simple.

location /socket.io {
    proxy_pass http://nodeapp;
}

location /styles {
    proxy_pass http://nodeapp;
}

The paths that index.html links to must be set as locations in the nginx conf that prox_pass to the node server.

Answer 2

Add a trailing slash to your location and to the proxy_pass target and let your original index.js untouched. Your links however should point to /nodeapp/{something} in index.html.

location /nodeapp/ {
    proxy_pass http://nodeapp/;
}