{"id":54271,"date":"2020-04-20T16:55:35","date_gmt":"2020-04-20T11:25:35","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=54271"},"modified":"2020-05-24T11:05:36","modified_gmt":"2020-05-24T05:35:36","slug":"clear-cloudfront-cache-purge-refresh-files","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2020\/04\/clear-cloudfront-cache-purge-refresh-files\/","title":{"rendered":"How to Clear Cloudfront Cache: Purge and Refresh Files"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">So how can you to clear\/flush Amazon Cloudfront cache and purge files to empty cache across the Amazon CDN? This will refresh files and update your website look and content. I use their amazingly fast CDN service and had some difficulty in finding a way to purge files. My blog would simply not refresh content cached in Cloudfront even after changing files. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">Here is the way so you don&#8217;t have to get stuck with flushing Cloudfront cache!<\/span><\/p>\n<h2>What is Amazon Cloudfront Caching<\/h2>\n<p><a href=\"https:\/\/aws.amazon.com\/cloudfront\/\" rel=\"noopener\">Cloudfront<\/a> is the content delivery network service of Amazon Web Services (AWS) which allows users to host files that can be accessed at the fastest speed from server nearest to them. Typically <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2020\/02\/best-free-jquery-cdn\/\">CDN<\/a>&#8216;s help to make <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2013\/05\/css-files-load-faster\/\">sites faster<\/a> as the content is delivered at a much faster speed from geographically nearby servers, rather than searching for that content from your webhosting server.<\/p>\n<p>I have been using Cloudflare CDN for quite some time but off and on over the years. Recently after switching to my <a href=\"https:\/\/www.quickonlinetips.com\/go\/a2hosting\">superfast A2 hosting<\/a>, I decided to use the Amazon Cloudfront CDN network to further speed up my website caching across the world.<\/p>\n<p>Now the initial setup might seem a little tedious for beginners &#8211; with first creating a bucket in S3 (which is the simple storage service of Amazon, where we <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2015\/02\/backup-websites-on-amazon-s3\/\">backup websites<\/a>) and then linking it to create a cloud distribution network with Cloudfront with bucket policy, etc. and after reading of many guides and manuals.<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-54319\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/cloudfront-distribution.png\" alt=\"cloudfront distribution\" width=\"688\" height=\"237\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/cloudfront-distribution.png 688w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/cloudfront-distribution-300x103.png 300w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/cloudfront-distribution-150x52.png 150w\" sizes=\"(max-width: 688px) 100vw, 688px\" \/><\/p>\n<h2>Purge Cloudfront Cache<\/h2>\n<p>However, I found it even more daunting than once I uploaded new versions of the images or CSS files they would simply <a href=\"https:\/\/www.quickonlinetips.com\/archives\/2011\/12\/force-browser-css-refresh\/\">fail to refresh<\/a> on our website.\u00a0 But then that is what the purpose of the CDN is that it will host the content and cache it across various worldwide servers.<\/p>\n<p>So how do you clear CloudFront cache and replace these old files to refresh the content that you uploaded in the S3 bucket?<\/p>\n<h2>Amazon Cloudfront Invalidation<\/h2>\n<p>So they call the processes to empty cache as Invalidation!<\/p>\n<p>I am not sure why they can&#8217;t use simple easy to understand language like clear cache or flush cache or purge files which would make it much more user-friendly and more easy to understand. There would be no need to write such an article if it was so easy to find.<\/p>\n<p>A huge advantage of this process is you can <em>invalidate particular files or folders<\/em> which you want to refresh or delete rather than press a single &#8216;clear cache button&#8217; and clear the entire S3 bucket across the network.<\/p>\n<p>For simple bloggers who hold a limited number of files such as theme logos, theme CSS files or maybe some social image sharing buttons it would not be much of a difference. But if someone is hosting a huge network of resources, then such a one-click power flush button would lead to usage of a lot of resources and maybe it is not required to simply refresh one file.<\/p>\n<h2>How to Refresh Cloudfront Cache?<\/h2>\n<p>Go to your Cloudfront distribution &gt; Click invalidations tab<\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-54320\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/cloudfront-cache-invalidation.png\" alt=\"cloudfront cache invalidation\" width=\"769\" height=\"198\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/cloudfront-cache-invalidation.png 769w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/cloudfront-cache-invalidation-300x77.png 300w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/cloudfront-cache-invalidation-150x39.png 150w\" sizes=\"(max-width: 769px) 100vw, 769px\" \/><\/p>\n<p>Type folder or a specific image which you want to invalidate<\/p>\n<p><img decoding=\"async\" class=\"border alignnone wp-image-54321 size-full\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/clear-cloudfront-cache.png\" alt=\"clear cloudfront cache\" width=\"544\" height=\"321\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/clear-cloudfront-cache.png 544w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/clear-cloudfront-cache-300x177.png 300w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/clear-cloudfront-cache-150x89.png 150w\" sizes=\"(max-width: 544px) 100vw, 544px\" \/><\/p>\n<p>That&#8217;s it&#8230; Cloudfront will invalidate this content and grab the fresh new files from the S3 bucket and then refresh and cache it across their networks.<\/p>\n<p>It also logs the history of past invalidations, so you can simply copy the request and do repeated cache purges if you want to keep refreshing particular files frequently.<\/p>\n<p><img decoding=\"async\" class=\"border alignnone wp-image-54322 size-full\" src=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/copy-cloudfront-invalidation.png\" alt=\"copy cloudfront invalidation\" width=\"352\" height=\"149\" srcset=\"https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/copy-cloudfront-invalidation.png 352w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/copy-cloudfront-invalidation-300x127.png 300w, https:\/\/www.quickonlinetips.com\/archives\/wp-content\/uploads\/copy-cloudfront-invalidation-150x63.png 150w\" sizes=\"(max-width: 352px) 100vw, 352px\" \/><\/p>\n<p>Test and see that the new files are working now.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>So how can you to clear\/flush Amazon Cloudfront cache and purge files to empty cache across the Amazon CDN? This&#8230;<\/p>\n","protected":false},"author":4,"featured_media":54319,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6],"tags":[49],"class_list":["post-54271","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging","tag-tutorials"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/54271","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=54271"}],"version-history":[{"count":0,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/54271\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/54319"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=54271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=54271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=54271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}