Make your blog faster (part 4)

Part 3 of this series made us deal with users, groups, and permissions. Then we created a bucket, kind of container for your data to save to. We are not finished yet: now comes the connection between the bucket, provided by the Simple Storage Service (S3), and CloudFront, the web interface for all these data. This link is done by clicking “Create Distribution” within the CloudFront section of the AWS console. In the last part I’ve left you alone with a lot of options; now we finally create this distribution. Note: this is a web distribution (in contrast to a rtmp distribution which is used for streaming data).

And these are the configuration settings in the Create Distribution dialog:

Origin Domain Name: just click into this field and select your S3 bucket that you’ve created some time ago.
Origin Path: optional. Leave it empty.
Origin ID: the origin’s name. Use the default value.

The rest of the „Default Cache Behavior Settings“ can be left at their default values. We might come back to here, though. But for now it’s okay.

You should spend some time on the „Distribution Settings“ section. The Price Class „Use All Edge Locations“ might guarantee „best performance“ (your content is spread all over Amazon’s data centres across the globe), but it’s also the most expensive one. If you are content with „US and Europe“ then choose that.

Alternate Domain Names: if you are able to set up your own DNS then you might find this useful. Amazon will host your content under a rather technical domain name and the path to your images will look like http://d111111abcdef8.cloudfront.net/images/image.jpg (or so). Much nicer is a domain like http://images.yourdomain.com/images/image.jpg, but you will have to create that subdomain on your own. If you’re using a shared host, then most likely cPanel is your friend. We will configure this, soon.

This very site makes use of alternate domain names. I specified following names in the „Alternate Domain Names (CNAMEs)“ field:

images.eclecticimaging.com
jsprebody.eclecticimaging.com
jsbody.eclecticimaging.com
jshead.eclecticimaging.com
css.eclecticimaging.com

Use names that are suitable to your own needs, and, of course, use your own domain name. At first I planned to have only one name (images), but the W3 Total Cache WordPress plugin was suggesting names for your site’s images, stylesheets, scripts, and more, so I entered as many names as the plugin asked for. The excellent AWS documentation covers this topic in much more detail.

Hit the Create Distribution button and your CloudFront Distribution is being created. It takes a while until the state switches to „Enabled“. Have a look at the domain name column: this is the DNS entry you will have to set up the CNAMEs for.

If you are using a shared host with cPanel then defining a set of CNAME records works as follows:

Start the Simple Zone Editor, and enter the name of your CNAME (for example, images.yourdomain.com), and its corresponding name at AWS (that’s the name displayed in the Domain Name column of the CloudFront Distributions Dialogue from above):

For eclecticimaging this resulted in following list of user-defined records:

Now do a DNS query of your website. I’m using the common dig tool. If you don’t have one at hand, you may use a website like digwebinterface.com, which will suit our needs, too. The examples here show the results for eclecticimaging.com, you will, of course, have to take your own domain.

$>dig www.eclecticimaging.com

; <<>> DiG 9.8.3-P1 <<>> www.eclecticimaging.com
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 40748 ;; flags: qr rd ra; QUERY: 1, ANSWER: 2, AUTHORITY: 0, ADDITIONAL: 0 ;; QUESTION SECTION: ;www.eclecticimaging.com. IN A ;; ANSWER SECTION: www.eclecticimaging.com. 14399 IN CNAME eclecticimaging.com. eclecticimaging.com. 14399 IN A 108.175.157.44 ;; Query time: 84 msec ;; SERVER: 8.8.8.8#53(8.8.8.8) ;; WHEN: Mon Dec 29 00:35:40 2014 ;; MSG SIZE rcvd: 71

and then try your one of your CNAMEs:

$>dig images.eclecticimaging.com

; <<>> DiG 9.8.3-P1 <<>> images.eclecticimaging.com
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 3408 ;; flags: qr rd ra; QUERY: 1, ANSWER: 9, AUTHORITY: 0, ADDITIONAL: 0 ;; QUESTION SECTION: ;images.eclecticimaging.com. IN A ;; ANSWER SECTION: images.eclecticimaging.com. 14399 IN CNAME d2is4kg8hdn7hp.cloudfront.net. d2is4kg8hdn7hp.cloudfront.net. 59 IN A 54.230.46.88 d2is4kg8hdn7hp.cloudfront.net. 59 IN A 54.230.45.169 d2is4kg8hdn7hp.cloudfront.net. 59 IN A 54.230.44.173 d2is4kg8hdn7hp.cloudfront.net. 59 IN A 54.230.46.54 d2is4kg8hdn7hp.cloudfront.net. 59 IN A 54.230.45.145 d2is4kg8hdn7hp.cloudfront.net. 59 IN A 54.230.44.179 d2is4kg8hdn7hp.cloudfront.net. 59 IN A 54.192.47.56 d2is4kg8hdn7hp.cloudfront.net. 59 IN A 54.192.46.134 ;; Query time: 117 msec ;; SERVER: 8.8.8.8#53(8.8.8.8) ;; WHEN: Mon Dec 29 00:36:29 2014 ;; MSG SIZE rcvd: 215

Looks good! When all your CNAMEs are working, then your Amazon CloudFront is listening. That means we’re almost done with our W3 Total Cache configuration. Let's do this, then we can call it a day:

Back to WordPress-> Performance -> CDN -> Configuration: enter the name of your newly created bucket. If you click on the „Create bucket & distribution“ button you will receive an error message that this bucket already exists, so there’s no need to do that.


You are now prompted for the location (you already know that from S3). Change it or not, then hit the „Create bucket“ button. The automatic detection of SSL support is okay, don’t change that.

Now enter the DNS information we’ve done some minutes ago:

Again, these are the records for this very domain. You will have to use your own data.

This should be working now! We were very careful and acting cautiously when setting up these many parameters, so the result of hitting the „Test S3 upload & CloudFront distribution“ button should tell you:

Press „Save all settings“ and have a cup of coffee / tea / bottle of beer. You deserved it!

W3 Total Cache tells you what’s the next point on your schedule:

You can do this step by step. Depending on the amount of data this will take a while. You may start the copy process and let the servers do their work: this all happens autonomously. In the end the files of your website and the contents of the S3 bucket are synchronized. W3 Total Cache will update any newly created / modified / deleted information on your website with the bucket's content.

And that's it! In a perfect world, because there are a few issues you might encounter under certain circumstances. We will go through these in the next part. Until then, enjoy your very own Content Delivery Network!