node.jsexpressnginx

Configure Nginx and Express to correctly serve static files


I currently have a django project already running on a server. It is directly served at https://server.com. The Django app is running perfectly fine. I want to add a Node.js web application to be served at https://server.com/nodeapp.

I have the following nginx configuration:

server {
    server_name server.com;

    location / {
            proxy_pass http://unix:/run/gunicorn.sock;
    }

    location /static {
            expires -1;
            alias /home/user/django/static;
    }

    location /nodeapp {
            proxy_pass http://localhost:8001/;
            proxy_set_header Host $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

My Node application uses Express and Parcel, and the server index.js file:

import express from 'express';

const app = express()
const port = 8001
const __dirname = import.meta.dirname;

app.use('/', express.static('dist'));

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    next();
});

app.listen(port, () => {
    console.log(`Listening on port ${port}`)
})

Parcel is correctly building the app inside the dist folder. When I'm connecting to https://server.com/nodeapp I have access to the root index.html file but all my static files can't be found because they are looking at https://server.com/ instead of https://server.com/nodeapp. I think I need to configure Nginx in some way but I don't know how.


Solution

  • The problem is that you have written some client-side code (which you haven't shared) which assumes it will be deployed to the path /.

    Then you've deployed it to the path /nodeapp.

    Now all the URLs inside your client side code are asking for /something but the server can't find them because they live at /nodeapp/something and it returns 404 errors instead.


    There are a number of different approaches you could take to resolve this, but since you have another proxy deployed to / already, the best approachs to choose from are likely to be