NGINX Cache Busting /URL Rewrite Issues

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 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: 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;

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\d+).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

I’m no nginx user myself, but I have a plugin that does similar things. People told me how they made it work in nginx and I added it to the readme: GitHub - bvdputte/kirby-fingerprint: Cache-busting utility to fingerprint assets (JS/CSS) in Kirby 3

It might prove some value for you too?

1 Like