Set up a CloudFront CDN for an S3 Bucket

in this video i'm going to show you how to set up a cdn to serve up files from your s3 bucket using a cloudfront distribution [Music] so this means that files in your s3 bucket will get distributed globally so that when users make a request for a file it gets to them in a much quicker time with much lower latency and first i'm going to show you how to set up the cloudfront distribution as the cdn and then i'm going to show you how to integrate that into a node application and i'm gonna be picking up where i left off in my last video where i had an s3 bucket set up for this website called instasam which is just an instagram clone so if you haven't already watched that video i suggest you watch that video because then the code examples will make a little bit more sense so right now i have no post but if i go to create a new post and upload an image here when i submit this my web app is going to make a post request to create a new post and upload the image into an s3 bucket i have here so if i refresh this bucket i should see that it now has one object in here and if i go back to the web app we can see that it is requesting this image from the s3 bucket so here is the url to get the image from the bucket this big long signed url here but before we set up a cloudfront distribution i want to first check the performance of getting an image from the s3 bucket so i'm just going to paste the s3 image url in here and this website is going to try and get the image from s3 from clients all around the world and we can see that the closer we are to the s3 bucket the quicker we can actually get the first byte of the image but as we get further away the latency increases a lot to a point where if you're in singapore just to get the first bite of that image would take almost a second so the point of setting up a cloudfront distribution is to try and minimize all of these times so that it takes the least amount of time as possible for anyone to get the file regardless of where they are in the world so once we set up the cloudfront distribution we can run this test again and see the difference between requesting just from an s3 bucket and from a cloudfront distribution so like i said i already have this app set up and i set it up in a previous video so if you haven't watched that video yet i recommend you check that out but right now i just have the images being stored in an s3 bucket and all of the files in the bucket are private and the only way to access them is through a signed url so you already need to have an s3 bucket set up where you are storing the images then the next thing we need to do is head over to cloudfront to set up a distribution for this s3 bucket so i'm going to open up cloudfront here and i already have one distribution set up for a different project so i'm going to create a new distribution for this project and as soon as we go to create a new distribution the first thing we can do is set up the origin domain and for this we're going to select the s3 bucket that already exists so for my project it's for that instasam app so i'm going to select that s3 bucket just make sure you select the s3 bucket where you are storing the files that you want to be associated with this cloudfront distribution then we can leave these settings as the default settings and when we get to bucket access here we want to select yes use oai which stands for origin access identity and this allows us to keep the s3 bucket private and only allow access to the files through cloudfront so no one will be able to directly request a file from the s3 bucket they'll always have to go through cloudfront and then for this we can just select create new oai and just click create there and then that will autofill in there that will all be done for us and then we want this to update the bucket policy for us too so this will all just automatically set up the permissions so that we can't access things through s3 we can only access it through cloudfront and that being said we'll still be able to upload files directly to the s3 bucket that will be necessary it's just that when users go to access the files publicly over the internet they'll have to go through cloudfront we don't need to add a custom header we could enable origin shield but that increased the cost so i'm going to leave that as no for the default cache behavior we want to redirect http to https we'll leave the allowed http methods as get and head since this is just for getting files we don't need people to be able to do anything else and then for restrict viewer access if we select yes we can set up signed urls for our cloudfront distribution but this requires us to do a few extra steps like creating public and private keys and setting all of that up so i'm not going to cover that in this video but in my next video i will go over restricting viewer access and setting up signed urls for cloudfront so if you haven't already make sure you're subscribed and hit that bell icon so you're notified when i post that video for the caching policy we're going to leave this as the default policy which caches files for 24 hours and i'll talk a little bit more about that later on in the video we don't need to add anything for these settings here we're not going to associate any lambda functions here then for the location we're just going to leave this as all locations which is generally what you'll want to do because you want to be able to offer the lower latency to anyone in the world no matter where they're located these settings here allow us to get more fine-grained control over which ip addresses can access which files which we don't really need for the cdn we could add a custom domain name here which i cover in a separate video but i'm not going to do that for this because it is just the url of the images and not the url people will be visiting and typing into the browser so we can leave all of this as the default settings for everything here uh and that's it we can create the distribution and this can take a few minutes to set up because it is setting up the cloudfront distribution globally we'll give this a few minutes while it says deploying we'll wait for this to be deployed and then we'll come back and see how to use this in our web applications so my cloudfront distribution is now all set up and this is the domain name to the actual distribution so if i want to get a file from cloudfront i can just go to https followed by that url slash the object name as i stored it in the s3 bucket so if i go back to my s3 bucket here and just copy over this object name for the only image i have here i should now be able to see this image served up here but instead of coming from the s3 bucket it comes from the cloudfront distribution so if i go back to that performance test and use this url instead of the s3 bucket and i'm going to open up a new tab here so we can see it side by side so i'll paste in the cloudfront url this time and hit test the first time we request this image we actually don't see amazing times they're kind of similar to the times we saw before but if i make this request again that image has now been cached in all of the edge locations globally so the time it takes to get the first byte of this image from the cloudfront distribution is now in such a small amount of milliseconds it's just crazy compared to what we had with the s3 bucket example so this is the benefit of using a cdn we significantly reduce the amount of time it takes for anyone to request one of our files for our web apps so now let's see how we can use the cloudfront distribution in our node server instead of getting the files directly from the s3 bucket so i am going to just copy the cloudfront url here because i'm going to need that in my server i'm going to head over to my backing code that i have from my previous video and if i scroll down to where we're getting the post from the database right here i have an array of posts and each post has an image name and that's the name that appears in the s3 bucket so just this random string here and when i want to create an s3 bucket url i use this get signed url method to generate the url that then gets sent down to the client and that's what's being used to actually request the image here and if we look at the network requests i should be able to see that the image object has this image url property that is the url that's generated from that method there so now instead of using this s3 method to get the signed url given the image name what i need to do is basically just take that cloudfront distribution url and append the image name onto let's see image name onto the end of that so that is going to create that url that url that i just used here where it's the cloudfront distribution then it's just slash the image name that appears in the s3 bucket so by doing this i'm just going to add this to the post as the image url and delete my s3 stuff just the domain name of the cloudfront distribution followed by the image name now that i have that and i send that back to the client my react app that i have set up here should now start requesting my images from the cloudfront distribution so let's see here it gets the post then it goes to get the image and i can see that the image url here is just from the cloudfront distribution so getting the images is working and if i take a look at the code again to create a new post there's a bunch of code here and part of it is just sending that file to the s3 bucket and all of this was covered in the previous video and this still stays the same we still put the file into the s3 bucket but when we get the file back we're always going to get it from the cloudfront distribution so just to prove this i'm going to create a new post here and select a different file and this is still being sent to the s3 bucket so if i go back to the s3 bucket and refresh i should be able to see the brand new file here i now have two files in my web app i can see that i'm viewing the files here but instead of getting this image from s3 it's coming from the cloudfront distribution so posting an image still stays the same we still put it into the s3 bucket but we're getting it from cloudfront which makes it much much faster every time we want to get a file and remember we always want our reads to be quicker than our rights because let's take an app like instagram for example someone really famous with millions of followers will post an image just once and that can take a little bit of time that's fine but then if millions of people are trying to view those files we want it to be as quick as possible for each of those people we want that to be really efficient so that's why making a get request to get a file through a cdn is so important because it really reduces the latency at the point that we need it the most but one thing to note here is that the urls of the images are not signed they will always remain the same url so once someone has access to the url it's going to remain the same forever and this can potentially be a bad thing for security reasons or just because you don't want any person or bot or service to be able to request images whenever they want from your cdn so i will be covering how to sign a cloudfront url in my next video so again make sure you're subscribed make sure you hit that bell icon so you can watch that video when i release it but for now what happens when i go to delete a post so before i do that i am just going to copy this url and show that i can request this in the browser here so this is the image that i uploaded to s3 and i'm requesting it through cloudfront uh and this still exists in my s3 bucket it's one of these images and it still exists in my database uh but right now what i want to do is delete this image so i'm going to delete that which deletes it from my database and should delete it from my s3 bucket here it no longer exists but if i refresh this cloudfront url just hit enter here i still have access to this image although it was deleted from s3 it still exists in cloudfront's cache and this will exist for 24 hours the cache doesn't get updated for 24 hours maybe you're okay with the url still being valid even though the image has been deleted but if you wanted to update the cache make sure that when you delete an image or update an image those changes are immediately seen in cloudfront then we need to do an extra step we need to invalidate the cache for that image and that is something that i'm also going to cover in a future video so make sure you stay tuned for that one as well [Music]

Channel: Sam Meech-Ward

Views: 37,532

Keywords: content delivery network, aws cloudfront, amazon cloudfront, aws s3, aws cloudfront tutorial, s3 bucket, cloudfront s3 static website, content delivery network explained, amazon s3, content delivery network aws, content delivery network (cdn), aws s3 bucket tutorial, aws s3 bucket, upload images to s3 nodejs, upload images to s3 react, upload files to s3 bucket nodejs, node js cdn, amazon s3 cdn

Id: kbI7kRWAU-w

Length: 11min 49sec (709 seconds)

Published: Mon Aug 01 2022