How to manage relative CSS paths using NGINX in front of three node applications

We have several node applications that we are trying to proxy for NGINX. Each of these node applications was developed autonomously with all relative paths in html pointing to the document root directory /.

Is there a way to get nginx to help maintain these static CSS / JS files?

nginx.conf

worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; upstream app1 { server localhost:3001; } upstream app2 { server localhost:3002; } upstream app3 { server localhost:3003; } server { listen 8180; server_name localhost; location /app1 { proxy_pass http://app1/; } location /app2 { proxy_pass http://app2/; } location /app3 { proxy_pass http://app3/; } } } 

app1 index.html

  <html> <head> <title>Express</title> <link rel="stylesheet" href="/stylesheets/style.css"> </head> <body> <h1>Express</h1> <p>Welcome to Express</p> <p class="foo">A simple test to see if the app is served correctly</p> </body> </html> 

As you can see, the index.html of application 1 points to the relative path "/stylesheets/style.css". Nginx sets this as http://localhost:8180/app1 , so the path is not recognized after the html has been passed to the client.

I understand that I can change html in all three applications to use full paths that map to css: http://localhost:8180/app1/stylesheets/styles.css .

I'm just wondering if anyone has any advice on this. What is the right way to deal with this type of problem when serving multiple applications?

+5
source share
1 answer

I had a similar problem and I found this reddit thread . I have a node express application. By removing the leading slash in the href value (relative path instead of absolute path), he was able to build the correct path. Location settings in nginx:

 location /app1/ { proxy_pass http://localhost:3002/; alias /app1/client; } 

and <link rel="stylesheet" href="/css/theme.css"> browser will try to load mydomain.com/css/theme.css and crash (wrong path, nothing there), but with <link rel="stylesheet" href="css/theme.css"> browser will successfully load mydomain.com/app1/css/theme.css

+1
source

Source: https://habr.com/ru/post/1200423/


All Articles