Creating an Amazon CloudFront distribution with S3 on AWS: Tutorial

Amazon CloudFront is a content delivery web service. It integrates with other Amazon Web Services products to give developers and businesses an easy way to distribute content to end users with low latency, high data transfer speeds, and no minimum usage commitments.

Let us see what we will do in this post:

  1. We will create a new Amazon CloudFront distribution
  2. We will then use the CloudFront distribution to serve an image file
  3. The we will delete the CloudFront distribution when it is no longer required

Step 1: Store an image in S3 bucket

We will first upload an image into an S3 bucket. We will make that image publicly accessible.

Click on Create Bucket button as shown below:

Enter the details of the bucket. Make sure bucket name is unique

Modify the permissions of the bucket after creation. Click on Edit after going to Permissions Tab

Uncheck the Block all public access. All five boxes should now be unchecked. Click Save.
In the Edit public access settings for this bucket dialog box, type confirm and click Confirm to update the settings.

Then, Upload an image in the bucket

Make the image public accessible: Under Manage public permissions, select Grant public read access to this object(s)

You can test the image by on the S3 object URL generated to verify if it is publicly accessible

Step 2: Create an Amazon CloudFront Web Distribution

Go to Amazon CloudFront service in your AWS management console. Click on Create Distribution

Select a delivery method for your content page, in the Web section, click Get Started then configure:

Origin Domain Name: Select the S3 bucket you created

Scroll to the bottom of the page, then click Create Distribution

The Status column shows  In Progress for your distribution.

After Amazon CloudFront has created your distribution, the value of the Status column for your distribution will change to Deployed.

Take note of the Domain name mentioned in table for your distribution, copy it into notepad somewhere

Step 3: Create a Web page/HTML file with link to your cloudfront URL a shown below

Save as an .html file

Open the web page you just created in a browser to ensure that you can see your content.
The browser returns your page with the embedded image file, served from the edge location that Amazon CloudFront determined was appropriate to serve the object.

Thats it, now your image will copied int different edge locations and loaded faster.

You can further go ahead and delete the S3 bucket and CloudFront distribution if it is of no use.

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 )

Connecting to %s