How to Cache Static Content with CloudFlare

so when I went over what I use to build this website I talked about how I used CloudFlare to cache the images because this sites kind of unique with a ton of static content so all these little tiles here are different images and in the backgrounds they're images and then also each one has a tooltip all right so if I hover over them each one of those is static text well in my case I'm storing it as JSON so what I have going on is I am using CloudFlare which is a CDN and it sits in front of my server and then when I request for example these images or the text for this tooltip it's going to go through CloudFlare servers and some of those requests are going to be cached and take some load off my servers so using something out like CloudFlare is great when you have content like this that's never going to change or that changes very infrequently so in this video I'm going to go over how you can do the same if you want to setup CloudFlare so let's start by just going over the analytics of classic well builds real quick and kind of show you what you could expect if you set something up like this so so far this is my analytics for setting this up I've had a total about 400,000 requests and so about half of them have been cached through CloudFlare roughly and the other half have gone through and hit my server and we're talk more about what this means by hitting my server and kind of outlined what it is a CDN does and how it works and then bandwidth wise about half the bandwidth has been cached so that's pretty neat alright so let's see how this actually works so I first want to just have a little dummy example here this is what it looks like when you have no CDN setup this is probably like regular what you're used to so what this is is you send a request and just goes directly to your server and then it comes back to the user then when you introduce something like clouds layer or CDN it looks something like this and this case is what's called a cache miss so I send a request to your server it goes to CloudFlare or the CDN first and then what CloudFlare does is it since the requests to the server to get the data that this dude requested stores it here then sends it back so then what happens is usually a cache miss happens on the very first time like a piece of data or an image is requested and you'll notice that we've kind of introduced a intermediate party now so like it went directly to the server and back but now it goes to the CDN to the server to the CD and back to here right so on cache misses it's actually slower usually now what happens though is after the CDN has made the request once usually it will cache it and so what happens is you can get cache hits after that so what happens is I make the request to the CDN the CDN looks it up and sees it has the content stored there and it just returns it here and so usually a request from the CDN back to the user is faster than a CDN to the server but also the other nice thing about this is you can take load off of your server and your server doesn't have to handle it the other nice thing about CloudFlare is they have a free tier that you can use and so that's what I'm using right now and so I can have cobbler kind of take out the load for other things that I may be paying for but anyway this server back here a good note about this is it can be anything so this could be an s3 bucket this could be a digital ocean server serving images or serving JSON data or whatever you want to serve or in my case it can be a Google cloud storage bucket so I'm storing images on Google cloud so let's start with this first one so this is if I was not using CloudFlare I could make a request to storage Google api's com and then this is my bucket name and I could just request this image so this is me going directly to the server so what do I do if I want to set up CloudFlare so I get this and this kind of interaction well the first thing that you're going to need is a custom domain so in my case my custom domain is classic well-built calm so this is something you're going to have to buy get something from Namecheap or Google Cloud domains or Google domains go to some registrar and purchase a domain after you do that you're gonna have to create a Google and a Google a CloudFlare account and in your CloudFlare account it'll walk you through this I believe but you need to point your name servers from your DNS or where you bought the domain to CloudFlare so what that allows you to do is now you can control your DNS settings in CloudFlare so all that means is you can basically point your custom domain to like for example Google Cloud or digitalocean and that sort of thing and it'll I believe it'll walk you through the steps when you first create your account so don't worry about if you don't know what name server it is it should tell you so once you have that you have a custom domain you pointed your name servers to CloudFlare you can now add dns settings to CloudFlare and so all you do is you basically point CloudFlare at your server so in my case I'm using Google Cloud Storage to store my images so what I have here is I added a I actually don't remember the scene name maybe I'm down here yep so I created a cname record so you can go to cname and I called it static is what I wanted my this is something you get to pick I wanted mind be static is the sub domain and then you pointed at where your servers at so my server was Google cloud bucket so I just said CDOT storage at Google api's I mean you'll notice there's this little cloud over here so this means that it's going to go through CloudFlare first and that's it so now CloudFlare actually will cache some things automatically that way that's all you have to setup and so you're pretty much done after that there are some more advanced things you can do so for example one thing that I did is if you go to page rules you can come over here and I created a page rule for all my subdomains and every URL and what I said here is I set the cache level to everything so I needed to do this so cloud in it or CloudFlare what cache some files as well as like JPEGs and PNG s and they also set the edge cache TTL to a month that means cloud layer is going to cache my files for up to a month and CloudFlare has like servers all over the world so that's what the edge caches are talking about so there's going to be servers that are closer to the end-user yep so that is that that I set up there and then what this looks like as an end product is instead of accessing my storage Google API is dot whatever I access static dot classic Wow builds calm right so notice the contents the exact same but the difference is now that I access this URL this static classic well bills.com goes through CloudFlare first and then cloud flavors gonna go fetch that content for me and again this is great for things that are static because what's going to happen is if I change what's on my server you'll notice that sometimes the CDN doesn't get the new content and it's gonna serve cache data and so that's why you want to only really do this when you have content that doesn't change very often or you have strategies in place to invalidate the data in the cache that's the other thing you can do in CloudFlare if you need to I think it's just under caching is yep you can purge the cache and kill everything inside of that if you mess something up so there's no worry about that also in the overview you can I use this a couple times you can turn on development mode to turn off cache if you need to but there you go that is how you can use caching or CloudFlare to kasher static content in conclusion you gotta get a custom domain you got to have a server that's serving something or using Google Cloud or s3 and then you point your DNS over to that server

Channel: Ben Awad

Views: 30,386

Keywords: Cache, CloudFlare, Static Content, Cache Static Content

Id: 6CMmL9iF_bA

Length: 8min 40sec (520 seconds)

Published: Thu Aug 01 2019