Load webpage faster using CloudFront (AWS cloud)

Load webpage faster using CloudFront (AWS cloud)


so in our previous video we get
successfully hosted a static webpage in s3 bucket so let’s go and check again so this is the URL which we get from s3
bucket. Now we do CDN , by using AWS cloud front. CDN is basically a
content delivery network and what it does basically is like these webpage is
located in Oregon US-west. So if I’m requesting it from
India or from China or South Korea so it will travel all the way from
Oregon to South Korea so the ping rate will be very high and the content delivery will
be a little late. So in order to be available, like my ping rate to be very fast also the download rates are. So I want the content to be
available across all the locations so for that we use content delivery network
for fast loading and for this we can use AWS cloud-front. so i’ll show you how
to use aws cloud front. this I already created onde AWS cloud front. So I will just go and create another so here we just give the
bucket name I’ll leave all this default and you just give create distribution so
we can see that this second one is the one which I just created and it’s
in progress and it takes nearly 15 to 20 minutes of time so if you go inside it
and I can see that price class means it will be distributed across the globe but
if you want only in US Canada and Europe or US Canada Europe Asia
location. Then for best performance you can select just here so it will be a little bit
costly. But its comes in of this free tire. Also currently I am using the free tire so I won’t be charged for that and here we need to give
this default index.html we can check here it is going to be index.html because our
s3 bucket is pointing the first page is index.html also this cloud-front works
apart from s3 with any other like if you have any server hosting your static file or any images or any videos so that also you can just use cloud-front with that, so you just need to change this origin name .That it.
So its still in progress so
you go with this cloud-front, so sorry this cloud-front. so it’s already
deployed. so I will go and ping this URL and this is the cloud-front URLs which
is the distributed URL. So if we go and hit this url it will show us the same webpage that
has been shown using the S3 so we can directly access S3 or directly access
the cloud front. if we access S3 it will not be the distributed one it will not
load so fast, but if we use this cloudfront it will load very fast because it is
available in the nearest location like I’m using from India so it will be
available like either in Mumbai or in Delhi or in Chennai location also while creating the distribution you
can just give means whether you want to restrict s3 direct access or not restrict bucket access edit it. Restrict bucket access. So we won’t be able to use this url directly. so every time we
need to go through this cloud-front url if you want to map this URL and give
your own domain name then you can just map it in Route-53 but there is one catch
regarding this cloud-front so I will just go and show you so if you go
and check I will change this html file it got uploaded now I can go and check This is the s3 url If I go and check the S3 url
I can see that it got
changed but you can go and check this cloud-front url which is the old one so for that we just
need to go and invalidate all the files which we have changed. so best way
invalidate is create invalidation create /* so it will invalidate all the files And if you just want to invalidate index.html then give /index.html So it started the invitation. it almost takes
like 15 – 20 mins time so every time you change this s3
files , like any static files on any web page or photos or videos so every time
you need to invalidate that file so all the files which are been cached in the edge location will be re-distributed again and it will create a new file of that and now you can see that it got
changed right so the nearby edge location redistribution is done It is
still taking time because it will invalidate all the files its completed so in order to delete or disable any of
the content cdn or cloud-front we just need to go and 1st disable it
And once it is disabled so you can see is for this origin is
different means this is directly pointing to s3 url and this I changed
to s3 domain name so this means that like we can give you own server
domain address so it will be do the content delivery of that so now we see
that the status has been deployed to it just go and hit this URL so you can see
the page loads very fine for sometimes this url may not work because it takes
time for the DNS to get resolve it may like few hours so I just left it for the
overnight and in the morning it was working fine for this DNS so it will
just show that 307 , status code with temporary redirection to s3 URL so
there is nowhere to debug or track it we just need to wait for some time that’s
all for this video thanks for watching

Author: Kevin Mason

1 thought on “Load webpage faster using CloudFront (AWS cloud)

Leave a Reply

Your email address will not be published. Required fields are marked *