How to serve static files (CSS, ...) with multiples Express app + NGINX as reverse proxy server

Question

Context
I'm runnig multiples nodesJS/Express app on the same server with the same IP adress. I use Nginx to reverse proxy those apps and redirect it to subfolder adress (and not subdomain, i don't want to).
ex : http://123.0.0.1:8000 => http://monsite.com/Site1

Problem
My assets files (css, images, ...) do not load, I have a 404 error on those static files when the page loads. It happens only when I access the site via the proxy redirect http://monsite.com/Site1 and not when I use the IP adress : http://123.0.0.1:8000

I don't have this problem if a use the reverse proxy location from the root in the nginx conf : location / { but I want to access the site from a subfolder adress

My integration
Tree files:

var/www/html
          |Site1/
          |   |server.js
          |   |Views/
          |   |   |index.pug
          |   |Public/
          |   |   |Css/
          |   |   |   |Style.css
          |Site2/
          |....

nodejs server code

const PORT = 8000;
const HOSTNAME = 'www.monsite.com';

// Dependencies.
const express = require('express');
const http = require('http');

// Initialization.
var app = express();
var server = http.Server(app);

app.set('port', PORT);
app.set('view engine', 'pug');
app.set('views','Views');

app.use(express.static('Public'));

app.use('/', (request, response) => {
    response.render('index');
});

server.listen(PORT, HOSTNAME, function() {
    console.log(`STARTING SERVER ON PORT ${PORT}`);
});

index pug code

doctype html

html
  head
    title Site 1
    link(rel="stylesheet" href="/Css/style.css")

  body
    p Hello

nginx conf

server {
        listen 80;
        listen [::]:80;
        root /var/www/html;
        index index.html index.htm index.nginx-debian.html index.php;
        server_name www.monsite.com;

        location / {
                #Reserved for another site
        }

        location /Site1/ {
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header HOST $http_host;
                proxy_set_header X-NginX-Proxy true;

                proxy_redirect off;
                proxy_pass http://123.0.0.1:8000/;
        }
}

PS : I tried almost all the solutions and code I found searching for this problem and nothing worked, that's why I'm asking directly here. Thank you.

lefuturiste · Accepted Answer · 2020-05-05 11:32:04Z

1

I think the issue is with the url in the link tag to load the css, the url is invalid because the url is actually /Site1/Css/style.css.

answered May 5, 2020 at 11:32

lefuturiste

871 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to serve static files (CSS, ...) with multiples Express app + NGINX as reverse proxy server

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related