Enabling leverage caching on nginx causes panel problems

Adding leverage caching to my sites nginx configuration, e.g.,

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
   expires 30d;
}

causes problems in the panel as described in my thread here: Cannot edit, view or delete images/files in panel

Is there a way to disable the above directive for the panel? Does anyone running kirby3 on nginx have similar problems or a work-around?

Hm, not familiar with nginx rules, but someone else had the same unsolved issue: Undefined is not an object (evaluating 't.file.blueprint.name')

Wonder if it would help to modify the rule in a way to not affect panel paths?

Yes, it looks like the same problem. Basically it seems that access to (for example png, jpg etc) are blocked for certain paths - so you are right there

I get a 404 in the panel when I try to click on the of an image in the panel details
https://www.mydomain.com/api/pages/photography+trees/files/last-tree-standing.jpg

so maybe its some kind of rewrite / permission problem?

Hi

You can add a path to the url so you avoid caching assets from Kirby but only cache assets regarding your front-end.

For example:
location ~* ^/(assets|img)/.+\.(jpe?g|gif|png|css|js|ico|xml|svg|woff2?)(\?|$) { expires 30d; }

You need to adjust the “assets|img” so it matches your setup.

Hi Philip,

yes that’s a good idea, however it wouldn’t cache any uploaded images, which are served by kirby via the generated images in the media folder. If I follow your suggestion and change it to

location ~* ^/(assets|media)/.+.(jpe?g|gif|png|css|js|ico|xml|svg|woff2?)(?|$) {
  expires 30d;
}

then at least I can access the details of a particular image through the panel and no longer get an json error, even though then I don’t get a preview of the image. I guess more importantly, on the frontend the leverage caching then works…

So, finally, I managed to fix this problem, with the help of @Philip (see above) and this post (Nginix server config) by natropo.

Here my nginx configuration (note that the order of directives is important!)

    # removes trailing slashes (prevents SEO duplicate content issues)
    if (!-d $request_filename) {
        rewrite ^/(.+)/$ /$1 permanent;
    }
	
	# Don't hint these as folders
    rewrite ^/(content|kirby|site|vendor)\/?$ /error last;

    # Block content
    rewrite ^/content/(.*).(txt|md|mdown|markdown)$ /error last;

    # Block all files inside these folders from being accessed directly
    rewrite ^/(kirby|site|vendor)/(.*)$ /error last;

    # Block files in root;
    rewrite ^/(\.env|\.env\.example|composer\.json|composer\.lock|package.json|yarn.lock|mix-manifest\.json|webpack.mix.json|tailwind.js|readme\.md)$ /error last;
    
    #enable leverage caching
    location ~* ^/(assets|media|content)/.+.(jpe?g|gif|png|css|js|ico|xml|svg|woff2?)(?|$) {
		expires 30d;
		add_header Pragma public;
		add_header Cache-Control "public, must-revalidate, proxy-revalidate";
	}
    
	location / {
		try_files $uri $uri/ /index.php?$query_string;
	}
	
    #needed to avoid leverage caching causing problems in panel
	location ~ /media/ {
		try_files $uri $uri/ /index.php?$query_string;
	}

    #needed to avoid leverage caching causing problems in panel
	location ~ /api/ {
		try_files $uri $uri/ /index.php?$query_string;
	}

and here my gzip config in the main nginx.conf (not needed for this problem, but just adding it in case)

gzip on;
gzip_disable "msie6";

gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css text/xml text/javascript application/json application/x-javascript application/xml application/xml+rss application/javascript image/svg+xml application/x-font-ttf font/opentype;
2 Likes