Speed Up S3 Bucket by Using CloudFront

Jun 19, 2016

Fastness, is crucial whether it is development, replying email, or the application itself after the deployment.

In this article, I’m going to show you how to connect your S3 with your original domain by using AWS CloudFront–good for those who are thinking to start to use S3, or who are already using S3 but not CloudFront yet.

Of course it is possible to access your S3 bucket with its given endpoint. Nevertheless, with using your original domain you can improve your SEO and avoid unmemorable long domains provided by AWS.

Before I adapted CloudFront, what I did was to redirect users who request files under the specific directory, for example /v/~, to my S3 bucket on my web server. Although this can be done by adding a few lines of code in my configuration file, it is a double task for network handling–the requests have to be passed between the name server and my sever twice.

By using CloudFront, you can reduce the latency and make your server more focus on what it is designed to do, handle the application.

References for this article

1. Create an S3 Bucket

Go to S3 Management console and click "Create Bucket" button.

In the field of Bucket Name, please type the name for your new bucket. After creating a bucket, please open the properties panel of your new bucket, expand Permissions section and click "Add Bucket Policy."

In Bucket Policy Editor, please copy & paste following codes, and save it.

{
	"Version": "2012-10-17",
	"Id": "Policy1433277323061",
	"Statement": [
		{
			"Sid": "Stmt1433277316413",
			"Effect": "Allow",
			"Principal": "*",
			"Action": "s3:GetObject",
			"Resource": "arn:aws:s3:::bucketname/*"
		}
	]
}

Please do not forget to replace bucketname to the name of yours.

Note: Some resources tell you to change the type of Static Website Hosting to "Enable website hosting", however, this is unnecessary since what we just defined in bucket policy was to allow GET method on all files in the bucket. So, keep it "Do not enable website hosting."

For checking whether S3 and CloudFront are connected later, you might want to upload html file to the root of bucket. Just create a simple index.html saying something such as "Hello CloudFront."

2. Create a CloudFront Distribution

Next, go to AWS CloudFront Management Console and click "Create Distribution" button on top of the left.

On the Select a delivery method for your content page, for Web, choose "Get Started".

On the Create Distribution page, first click the Original Domain Name field. It pops up the list of buckets which are available, so please select the bucket you just created in Step 1. After select, it automatically fills the required fields.

Note: In the official document by AWS, it says "Do not select the name of your bucket from the list, such as example.com.s3.amazonaws.com", however, you can ignore this. (When I did as the document suggests, somehow the connection between S3 and CloudFront failed.)

Before submit the form, there is one field to be filled, and that is "Alternate Domain Names." This value is for a list of domains with which you access to your new distributions. It can be any domain, but I simply use such as cdn.example.com. So, please enter the domain name you prefer.

All settings looks like as follows:

Configration for CloundFront Distribution

If it is ok, please click "Create Distribution."

3. Setup DNS

The process of deploying CloudFront distribution might take about 10 minutes. So while it is proceeding, let’s update the DNS record. Go to the DNS record setting page of your Domain Name Service, and add a new record with following values:

type: CNAME
host: cdn (the subdomain of your Alternate Domain Name)
value: Domain Name of New CloudFront Distribution

(If you use Route 53, please refer to the AWS Official Documentation.)

Done

If the status of the new CloudFront Distribution is "Deployed", you are ready to go. Please visit the domain you created for CloudFront, and if you see the message you created in Step 2, your S3 and CloudFront are properly connecting.