NGINX Cache Busting CSS JS URL Rewrite

Question

I'm new to NGINX and trying to set up a portfolio. I've gotten my site working with the exception of a few errors that I noticed through Google Chrome DevTools.

I notice that javascript files aren't loading and have the incorrect path. For example, it tries to load http://site/assets/js/site.1617886701.js but the actual file is http://site/assets/js/site.js

Likewise with a css file I have: It tries to load http://site/assets/css/templates/home..css (for some reason it adds an extra .?) when it should be loading this file: http://site/assets/css/templates/home.css

This is my NGINX config file:

server {
listen 80;
listen [::]:80;
root /var/www/html/;
index index.php index.html index.htm;
server_name site wwww.site.com;

client_max_body_size 100M;

location / {
    try_files $uri $uri/ /index.php?$uri&$args;    
}


location ~ \.php$ {
 include snippets/fastcgi-php.conf;
 fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
     fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
     include /etc/nginx/fastcgi_params;
}
location /assets {
   rewrite uikit.min.(\d+).js uikit.min.js permanent;
   rewrite uikit-icons.min.(\d+).js uikit-icons.min.js permanent;
   rewrite uikit.app.min.(\d+).css uikit.app.min.css permanent;
   try_files $uri =404;
   expires max;
   access_log off;
   add_header Pragma public;
   add_header Cache-Control "public, must-revalidate, proxy-revalidate";
 }
}

From my googling online it says something about cache busting. Some people have suggested matching the file names in the NGINX config file which I'm not sure how to do or to change the paths to match the hexadecimal versions which I also don't know where to begin.

I would really appreciate any help from the pros! Thanks so much

Danila Vershinin · Accepted Answer · 2021-04-09 14:54:00Z

2

For example, it tries to load http://site/assets/js/site.1617886701.js but the actual file is http://site/assets/js/site.js

It is not NGINX, it's your web application, which constructs such cache-busting URLs, which expect extra configuration on the side of NGINX.

The way to deal with it, is a rewrite in NGINX:

rewrite ^(.+)\.(\d+)\.(css|js)$ $1.$3 last;

This will rewrite, e.g. any /some/<foo>.<digits>.js to /some/<foo>.js.

It tries to load http://site/assets/css/templates/home..css

Obviously, a bug in your web application's code. Shouldn't be attempted to be fixed in NGINX.

answered Apr 9, 2021 at 14:54

Danila Vershinin

10.1k2 gold badges34 silver badges40 bronze badges

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

Collectives™ on Stack Overflow

NGINX Cache Busting CSS JS URL Rewrite

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