TransWikia.com

Magento 2: How to set up varnish cache with out CSS and JS file

Magento Asked by devHarry on December 21, 2021

I have the varnish cache set up and working fast for me, but the only issue is i can’t clean the CSS and JS cache. If and only if I restart the varnish cache.

So I am looking for a solution that can config the vcl file that help me to cache with

Here is the file i am currently using

vcl 4.0;

import std;
# The minimal Varnish version is 4.0
# For SSL offloading, pass the following header in your proxy server or load balancer: 'X-Forwarded-Proto: https'

backend default {
    .host = "127.0.0.1";
    .port = "8080";
}

acl purge {
    "127.0.0.1";
}

sub vcl_recv {
    if (req.method == "PURGE") {
        if (client.ip !~ purge) {
            return (synth(405, "Method not allowed"));
        }
        if (!req.http.X-Magento-Tags-Pattern) {
            return (purge);
        }
        if (req.http.host && req.http.host != "") {
            ban("obj.http.X-Host ~ " + req.http.host + " && obj.http.X-Magento-Tags ~ " + req.http.X-Magento-Tags-Pattern);
        } else {
            ban("obj.http.X-Magento-Tags ~ " + req.http.X-Magento-Tags-Pattern);
        }        
        return (synth(200, "Purged"));
    }

    if (req.method != "GET" &&
        req.method != "HEAD" &&
        req.method != "PUT" &&
        req.method != "POST" &&
        req.method != "TRACE" &&
        req.method != "OPTIONS" &&
        req.method != "DELETE") {
          /* Non-RFC2616 or CONNECT which is weird. */
          return (pipe);
    }

    # We only deal with GET and HEAD by default
    if (req.method != "GET" && req.method != "HEAD") {
        return (pass);
    }

    # Bypass shopping cart, checkout
    if (req.url ~ "/checkout") {
        return (pass);
    }

    # normalize url in case of leading HTTP scheme and domain
    set req.url = regsub(req.url, "^http[s]?://", "");

    # collect all cookies
    std.collect(req.http.Cookie);

    # Remove Google gclid parameters to minimize the cache objects
    set req.url = regsuball(req.url,"?gclid=[^&]+$",""); # strips when QS = "?gclid=AAA"
    set req.url = regsuball(req.url,"?gclid=[^&]+&","?"); # strips when QS = "?gclid=AAA&foo=bar"
    set req.url = regsuball(req.url,"&gclid=[^&]+",""); # strips when QS = "?foo=bar&gclid=AAA" or QS = "?foo=bar&gclid=AAA&bar=baz"

    # static files are always cacheable. remove SSL flag and cookie
        if (req.url ~ "^/(pub/)?(media|static)/.*.(ico|jpg|jpeg|png|gif|tiff|bmp|mp3|ogg|svg|swf|woff|woff2|eot|ttf|otf)$") {

        unset req.http.Https;
        unset req.http.X-Forwarded-Proto;
        unset req.http.Cookie;
        unset req.http.css;
        unset req.http.js;
    }

    return (hash);
}

sub vcl_hash {
    if (req.http.cookie ~ "X-Magento-Vary=") {
        hash_data(regsub(req.http.cookie, "^.*?X-Magento-Vary=([^;]+);*.*$", "1"));
    }

    # For multi site configurations to not cache each other's content
    if (req.http.host) {
        hash_data(req.http.host);
    } else {
        hash_data(server.ip);
    }

    # To make sure http users don't see ssl warning
    if (req.http.X-Forwarded-Proto) {
        hash_data(req.http.X-Forwarded-Proto);
    }

}

sub vcl_backend_response {
    set beresp.http.X-Host = bereq.http.host;

    if (beresp.http.content-type ~ "text") {
        set beresp.do_esi = true;
    }

    if (bereq.url ~ ".js$" || beresp.http.content-type ~ "text") {
        set beresp.do_gzip = true;
    }

    # cache only successfully responses and 404s
    if (beresp.status != 200 && beresp.status != 404) {
        set beresp.ttl = 0s;
        set beresp.uncacheable = true;
        return (deliver);
    } elsif (beresp.http.Cache-Control ~ "private") {
        set beresp.uncacheable = true;
        set beresp.ttl = 86400s;
        return (deliver);
    }

    if (beresp.http.X-Magento-Debug) {
        set beresp.http.X-Magento-Cache-Control = beresp.http.Cache-Control;
    }

    # validate if we need to cache it and prevent from setting cookie
    # images, css and js are cacheable by default so we have to remove cookie also
    if (beresp.ttl > 0s && (bereq.method == "GET" || bereq.method == "HEAD")) {
        unset beresp.http.set-cookie;
        unset beresp.http.set-css;
        unset beresp.http.set-js;
        if (bereq.url !~ ".(ico|jpg|jpeg|png|gif|tiff|bmp|gz|tgz|bz2|tbz|mp3|ogg|svg|swf|woff|woff2|eot|ttf|otf)(?|$)") {
            set beresp.http.Pragma = "no-cache";
            set beresp.http.Expires = "-1";
            set beresp.http.Cache-Control = "no-store, no-cache, must-revalidate, max-age=0";
            set beresp.grace = 1m;
        }
    }

   # "Microcache" for search
   if (bereq.url ~ "/catalogsearch") {
       set beresp.ttl = 30m;
   } 

   # If page is not cacheable then bypass varnish for 2 minutes as Hit-For-Pass
   if (beresp.ttl <= 0s ||
        beresp.http.Surrogate-control ~ "no-store" ||
        (!beresp.http.Surrogate-Control && beresp.http.Vary == "*")) {
        # Mark as Hit-For-Pass for the next 2 minutes
        set beresp.ttl = 120s;
        set beresp.uncacheable = true;
    }
    return (deliver);
}

sub vcl_deliver {
    if (resp.http.X-Magento-Debug) {
        if (resp.http.x-varnish ~ " ") {
            set resp.http.X-Magento-Cache-Debug = "HIT";
        } else {
            set resp.http.X-Magento-Cache-Debug = "MISS";
        }
    } else {
        unset resp.http.Age;
    }

    unset resp.http.X-Magento-Debug;
    unset resp.http.X-Magento-Tags;
    unset resp.http.X-Powered-By;
    unset resp.http.Server;
    unset resp.http.X-Varnish;
    unset resp.http.Via;
    unset resp.http.Link;
}

Thank you

4 Answers

There are 2 ways to do your thing.

1: Enabling static sign content by using the command below:

bin/magento config:set dev/static/sign 1;

2: Adding a configuration into your varnish VCL file.

sub vcl_recv {
    ...
    # Static files caching
    if (req.url ~ "^/(pub/)?(media|static)/") {
        # Static files should not be cached by default
        return (pass);

        # But if you use a few locales and don't use CDN you can enable caching static files by commenting previous line (#return (pass);) and uncommenting next 3 lines
        #unset req.http.Https;
        #unset req.http.X-Forwarded-Proto;
        #unset req.http.Cookie;
    }
    ...
}

Answered by MagEx Ditital on December 21, 2021

As others have posted you shouldn't need to clear these from the cache if properly configured. That being said, you can clear pages that match a url from the cache via the following command:

sudo varnishadm ban "req.url ~ ban_url"

This command will ban any url that CONTAINS the ban_url text. So for you you would want to run

sudo varnishadm ban "req.url ~ pub"

as this will clear all cache contain in the pub directory. Just be careful if you use it for something else because as mention it clears any url containing the text. If you want to clear ones that MATCH the text us a '=' instead of the '~'.

Hope this helps!

Answered by Daniel Black on December 21, 2021

You shouldn't need to clean CSS / JS cache from Varnish, provided that you have configured Magento 2 properly to "Sign Static Files" as mentioned here.

With that setting enabled, a Javascript or CSS file will have a deployment number inside its URL, e.g.

https://example.com/static/version1539285275/some.css

In that way, when you make changes to a CSS/JS file, running magento setup:static-content:deploy will result in different number used for URLs, effectively ensuring cache busting for browser cache. Then browsers will no longer request cached assets from Varnish, requesting different URLs.

Eventually when Varnish memory is filled up with the no-longer used cached CSS/JS responses, it will evict them from its cache automatically, using LRU mechanism.

Answered by Danila Vershinin on December 21, 2021

You need to run the below Magento command to set cache host after that you can flush the varnish cache from Magento.

php bin/magento setup:config:set --http-cache-hosts=127.0.0.1

If you run the below command, it will flush the varnish cache

php bin/magento cache:flush

Note: If you run the varnish other than 80 port, you must mention the port.

php bin/magento setup:config:set --http-cache-hosts=127.0.0.1:6081

Easy for your reference

Answered by Bilal Usean on December 21, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP