How To Build An AWS CloudFront CDN

What is the purpose of building an AWS CloudFront CDN? First off what is a CDN?CDN stands for Content delivery network. A (CDN) – is a system of distributed servers (network) that deliver pages and other Web content to a user, based on the geographic locations of the user, the origin of the web page and the content delivery server. Amazon CloudFront is a global content delivery network (CDN) service that securely delivers data, videos, applications, and APIs to your viewers with low latency and high transfer speeds.  People will abandon a website that takes longer than three seconds to load. We live in a world where three seconds is too long!

giphy-downsized

The goal of any business is to have lightning fast content delivered to your customers. The great thing is if your edge location already has the content your users will see it immediately and I mean immediately. 

To get started read and create a free AWS account.

AWS CloudFront-is a web service that speeds up distribution of your static and dynamic web content, such as .html, .css, .php, and image files, to your users. CloudFront delivers your content through a worldwide network of data centers called edge locations.

AWS currently has over 82 edge locations globally across 23 countries.

Screen Shot 2017-08-22 at 3.33.41 PM

 

 

Login into your AWS Console > Services > S3 > +Create bucket.

I’m located in SoCal so I picked a location on the other side of the world. The new bucket I’m creating is called mysasebocloudfrontlist and the region is Asia Pacific(Tokyo). 

Screen Shot 2017-08-22 at 1.49.11 PM

I’m keeping all of the default properties for this bucket.

Screen Shot 2017-08-22 at 1.49.41 PM

Right now we aren’t changing any permissions.

Screen Shot 2017-08-22 at 1.52.00 PM

Once you’ve created your bucket go into your bucket and upload an image file.

Screen Shot 2017-08-22 at 1.53.56 PM

After you upload your image change the Manage public permissions to :

Grant public read access to this object(s)

Screen Shot 2017-08-22 at 1.55.46 PM

Click next and keep all the default settings for properties.

Screen Shot 2017-08-22 at 1.57.57 PM

Refresh your page and your image should now be in your bucket.

Screen Shot 2017-08-22 at 1.59.59 PM

If you click on your image link you should be able to view.

Screen Shot 2017-08-22 at 2.00.53 PM

Go back to your bucket.  We are going to use mysasebocloudfrontlist as our S3 bucket as our origin CloudFront Distribution.

Go to Services > CloudFront

Screen Shot 2017-08-22 at 2.06.32 PM.png

Click on Create Distribution to get started

There are two different options to select as your delivery method. Web or RTMP.  The most common is Web. Today we will be using Web. For your domain name if you click in the text box it will auto populate your buckets. I only have one bucket called mysasebocloudfrontlist.s3.amazonaws.cloud

Screen Shot 2017-08-22 at 2.10.06 PM

We want the url to use the CloudFront and not the S3 url. Change the Restricted Bucket Access and Grant Read Permissions on Bucket to Yes.

Screen Shot 2017-08-22 at 2.13.07 PM

Change the Viewer Protocol Policy to Redirect HTTP to HTTPS

Screen Shot 2017-08-22 at 2.22.28 PM

Keep the rest of the default settings and Create Distribution

You’ll see a private content message because we changed our restricted our url access.

Screen Shot 2017-08-22 at 2.29.03 PM.png

Click on the menu on the left side on Distributions. Your status should be Deployed and state is enabled.

Screen Shot 2017-08-22 at 2.49.59 PM

Click on your CloudFront distribution under the general tab to find your CloudFront domain name.

cloudfrontdomain

 

If you paste in the url you will get an Access denied message. This message is telling us that users don’t have permission to view this file.

Screen Shot 2017-08-22 at 3.03.01 PM

We need to go back to our AWS console to Services > S3 > mysasebocloudfrontlist bucket to view our original image link.

Screen Shot 2017-08-22 at 2.00.53 PM

If you replace the s3-ap-northeast-1.amazonaws.com/OfficalMSCLogo.png with your distribution CloudFront name you now can force users to your CloudFront CDN to view your file(s).

Screen Shot 2017-08-22 at 3.11.50 PM

Screen Shot 2017-08-22 at 3.25.12 PM.png

 

Congratulations you have built your first CloudFront CDN!

*Make sure you go back and disable and delete your CloudFront you built.

AWS Console > Services > CloudFront

Once your CloudFront state is disabled you can go in and delete.  It can take 15-30 minutes for your CloudFront to go into disabled status. DO NOT forget to go back and delete it or you will be charged.

Screen Shot 2017-08-22 at 4.11.44 PM

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s