Nginx multiple locations + static files

Question

Hello,

I am trying to create the following setup with nginx:

subdomain.test.com subdomain.test.com/admin

I want nginx to serve static files (js, css, images etc) and everything else by the application I have running on the give ports.

For test.com it works as expected, but for test.com/admin the javascript and css files (found under /dist) are loaded from /var/www/test/main (test.com’s root)

My confing looks like:

server {
 
        listen 80;
 
        index index.html index.htm;
 
        server_name subdomain.test.com;
		
		proxy_http_version 1.1;
		proxy_set_header Upgrade $http_upgrade;
		proxy_set_header Connection 'upgrade';
		proxy_set_header Host $host;
		proxy_cache_bypass $http_upgrade;
 
        location ~ ^/(app/|images/|img/|javascript/|js/|css/|dist/|media/|static/|robots.txt|humans.txt|favicon.ico) {
            root /var/www/test/main;
            access_log off;
            expires max;
        }
 
        location ~ / {
            proxy_pass http://localhost:232;
        }
 
        location ~ ^/admin/(app/|images/|img/|javascript/|js/|css/|dist/|media/|static/|robots.txt|humans.txt|favicon.ico) {
            root /var/www/test/admin;
            access_log off;
            expires max;
        }
		
		location ~ /admin {
            proxy_pass http://localhost:233;
            rewrite ^/admin.* /$1 break;
        }
}

Regards, kapa

Nugra · Answer

You could try my nginx configuration file Config model1:

# if you need to change from http to https
server {                                                                                                                                
    if ($host = yourhost.net) {                                                                                                   
        return 301 https://$host$request_uri;                                                                                           
    }                                                                                                                                                                                                                                             
                                                                                                                                        
        listen 80;                                                                                                                      
        listen [::]:80;                                                                                                                 
        server_name yourhost.net;                                                                                                 
        return 302 https://$server_name$request_uri;                                                                                                                                                                                                                           
}
# stuff here
server {
        listen 443 ssl http2;
        listen [::]:443 ssl http2;                                                                                                      
        server_name yourhost.net;                                                                                                 
        location / {
                alias /var/www/html/;
                try_files $uri $uri @fwdbackend;
        }
        location @fwdbackend {
                proxy_pass http://10.10.0.3:81;
                proxy_set_header Host $host;                                                                                            
                proxy_set_header X-Real-IP $remote_addr;                                                                                
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;                                                            
                proxy_set_header X-Forwarded-Proto $scheme;
                real_ip_header CF-Connecting-IP; # Cloudflare 
        }

Explanation: the nginx server access file on localhost at /var/www/html/ its using alias so when http://yourhost.net/assets/x.js will looking into /var/www/html/assets/x.js and when there’s no file match with the user request it’ll pass to @fwdbackend (which pass the user request to 10.10.0.3:81 [nodejs server])

Config model2"

server {
        listen 443 ssl http2;
        listen [::]:443 ssl http2;                                                                                                      
        server_name yourhost.net;                                                                                                 
        location /assets {
                alias /var/www/html/assets/;
                try_files $uri $uri =404;
        }
        location / {
                proxy_pass http://10.10.0.3:81;
                proxy_set_header Host $host;                                                                                            
                proxy_set_header X-Real-IP $remote_addr;                                                                                
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;                                                            
                proxy_set_header X-Forwarded-Proto $scheme;
                real_ip_header CF-Connecting-IP; # Cloudflare 
        }

savchenko · Answer

Hi, kapa. Did you find the solution for this problem?

Report this

Nginx multiple locations + static files

Become a contributor for community

DigitalOcean Documentation

Resources for startups and AI-native businesses

The developer cloud

Start building today