How to Install Amazon CloudFront and Why

Amazon CloudFront is one of the cheapest and best ways to boost your page speed times.

Your media files (images, files, etc) will be hosted on Amazon’s servers instead of yours. This saves bandwidth on your host. For example, when you receive too many hits on a large image, your host will have a surge of requests. This is especially bad when you’re on a cheaper shared hosting when you’re limited on how many requests you could have in a certain amount of time.

Depending on your traffic, Amazon CloudFront  will cost you anywhere from less than a dollar to maybe a few dollars. Last month I paid $3.50 for two high traffic domains. Don’t worry about any surprise costs even during high traffic. It’s really cheap. It’s one of the best investments you could have for your blog.

One of the coolest features is that the content is to the end-user depending where they viewing your site from. So someone from Thailand automatically be downloading your content from their Asia servers. The closer the user is to a server, the faster the content is downloaded. Other locations include United States, Europe, Asia (Tokyo), Asia (Singapore), and South America.

Another reason I chose to use a CDN (Content Delivery Network such as Amazon CloudFront) is because I can upload all images straight onto my website using WordPress instead of hosting images on Flickr or Smugmug and having to embed it. This also allows contributors to the website upload directly onto the website. Not only does Amazon have my files, but I also have them on my server. For example, http://artofbackpacking.com/wp-content/uploads/2011/07/http_links.jpg is the direct link to the image but Amazon will download and host my file to http://media.artofbackpacking.com/wp-content/uploads/2011/07/http_links.jpg automatically. If I choose to not use Amazon anymore, I don’t lose anything besides media.artofbackpacking.com location unless I decide to use another CDN service.

Amazon and W3 Total Cache automatically downloads everything you upload onto WordPress media section. You never have to do a single thing. All self-hosted images is redirected automatically while still keeping your original location as well.

So here’s how to set it up.

The guide is specifically for self-hosted WordPress.org users.

1. Sign up for Amazon Web Services. It’ll ask for your details. There is no cost for signing up.

2. Install W3 Total Cache plugin for WordPress. If you’re using any other cache plugin like WP Super Cache, you’ll need to uninstall it and use W3 Total Cache instead. In my opinion, it’s far superior. You may need to do extra required steps by W3 Total Cache. Follow the boxes shown above and click auto-install. Disable Preview Mode under Performance -> General Settings and make sure everything on your site still looks okay.

3. Enable CDN by going to Performance (on your sidebar) -> General Settings and select Amazon CloudFront. Save.

 

4. Go to Performance -> CDN. Under Configurations, we’ll be filling out some fields. Keep your WordPress page open and go to Amazon’s Security Credentials page. You should find your Access Key information there. If not, create a new access key with their link. The password for your access key is also provided by clicking on Show. Insert the information you got back into the CDN Configuration screen on WordPress.

5. Click Create Distribution. You’ll see a random characters filled in on Replace site’s hostname with: field. Click on Test CloudFront Distribution to make sure it works. Be sure to SAVE.

6. Sign in to the AWS Management Console. Click on the Amazon CloudFront tab. You should now see your created distribution. It might take some time for Amazon to download all of your content depending how many images you have.

 

BONUS GUIDE! Setting up a CNAME.

Right now you’ll see that all your images is being hosted on Amazon. You’ll notice that the location of the file has the address of Amazon instead of your website. Nothing wrong with that but it doesn’t look very good. It’s also not very good for your SEO. You’ll want the images to have your address and not someone else’s. Another reason is in case you’d like to switch to another CDN service — you’ll want to keep the address of all your images.

What we’re going to do is create a CNAME so instead of an Amazon address, you can have something similar like what I have on Art of Backpacking. All of my images is hosted on http://media.artofbackpacking.com. You could never tell I use Amazon.

This guide will be for users who use HostGator but many other hosts have a similar dashboard and you could probably follow along.

1. Go to your HostGator control panel. Then under Domains, click on Simple DNS Zone Editor. Select your domain.

2. Fill in the Add a CNAME Record fields. For NAME, you’ll want to create the domain you want to use. I use media.artofbackpacking.com. Feel free to use images, img, or whatever you feel like.

3. Fill in the CNAME field. To find what you need to put in here, go back to your AWS Management Console and go to your CloudFront panel. See where it says Domain Name? Mine says d2e5aqj1k9xwk4.cloudfront.net. Copy yours and insert that back into the CNAME field you were looking at earlier in your HostGator control panel. Click Add CNAME record.

4. Go back again to your AWS Management Console CloudFront panel. Click on your distribution and click EDIT. Under CNAMEs, put in the domain you put in earlier like media.artofbackpacking.com. Save (Yes, Edit button).

5. Now go back to your WordPress -> Performance  -> CDN. Go to the Replace site’s hostname with field and there should be a number 1. Enter the domain you picked. Mine being media.artofbackpacking.com. Don’t click Add CNAME for more records. Just click SAVE.

Optional: Maximize CDN usage by button. On the top of CDN page for W3 Total Cache, there’s a button that says importing attachments into the Media Library. Be careful with this. If you want, it’ll download all images hosted from other websites and upload them to your side and then onto Amazon. So images embedded using Flickr, uploads to your website and redirects it to Amazon as normal.

That’s it!

For personal support, please see the AOTB forums.