Amazon CloudFront – How To Setup CloudFront To Work With S3
Assuming you run a high trafficked website or blog and you ran into these following problems:
- Slow content serving – Contents (htmls, images, download files) are serving at extremely slow speed, especially during traffic spikes
- Paid, and unused – You are paying you web host more than what you are actually utilizing. That means, you are probably paying for a web hosting package with 50Gb of web space and 1Tb of bandwidth, but you are barely using half of them.
- Messy files/folders – The web account is in a mess. Images folders, download-able item folders are not properly organized.
All these can be easily solved with Amazon CloudFront. CloudFront is a new service launched by Amazon, powered by cloud computing technology. Using Amazon S3 as storage, CloudFront serves on top of the buckets and deliver contents at a much higher speed with lower latency. Click here to read more.
If you are already using Amazon S3 to serve files for websites, CloudFront is really something you should check out. We’ll now guide you through setting up CloudFront to serve web files.
-
First and Formost
Get an Amazon S3 account (read here), then sign-up for an Amazon CloudFront service. Check your email to make sure the service is activated for you.
-
Create Distribution
Applications you use to manage Amazon S3 buckets might varies, but we’ll try to stick to a free tool – S3 Firefox, a S3 file manager with CloudFront supported. Get connected to your account with S3 Firefox, right click on the bucket name (assuming files and folders inside here are/will be web accessible) and choose Manage Distributions.
Distribution is an unique URL of sort that you can use to reference a file. You’ll get a better picture once it’s created. Click on Create Distribution to create your first distribution for the bucket.
Once you’ve created, you’ll noticed a new Domain Name: XXXXX.cloudfront.net is being created for you. Status will turn from InProgress to Deployed when it’s done. You can also click on the Refresh button to update the status.
If you previous has this following asset:
- https://assets.hongkiat.com/uploads/folder1/imageA.jpg, it now can be accessed with the URL
- http://XXXXX.cloudfront.net/folder1/imageA.jpg
You still can serve files with the first URL but the latter one is CloudFront powered, and it’s way faster.
-
Create CNAME
Distribution URL starts with http://XXXXX.cloudfront.net/ and we don’t think there’s any way to decide what goes before .cloudfront.net. However, to make the URL simplier, nice and easier to remember, we can use CNAME to map this URL to whatever we want. This requires access to web hosting control panels. In this example, we’ll show you how to map:
- http://XXXXX.cloudfront.net/ to
- https://assets.hongkiat.com/uploads/
If you are unfamiliar with CNAMEs, we suggest that you ask your web host to do it for you. You’ll entere something similar to this, with your own distribution URL of course.
This might take 24 hours to propagate, but in the mean time, filled up the CNAME in S3 Firefox.
Once it’s properly propagated (you can test with pinging the URL), you can serving files using https://assets.hongkiat.com/uploads/*.
-
Performance Comparison
We all know how fast and efficient Amazon S3 serve files, but we thought you should see a comparison after CloudFront is being implemented on top of the serving so you’ll know each and every penny spend is worthwhile. To do a fair compare of the loading speed differences, we took a blog content, load it twice; once with images hosted under hongkiat.s3.amazonaws.com, another time with images under static.hongkiat.com (CloudFront) and monitor it with Pingdom Tools. Click on images for larger view.
hongkiat.s3.amazonaws.com – 41 images loaded at 6.5 sec.
static.hongkiat.com (CloudFront)- 41 images loaded at 3.5 sec.
