How to Switch Your Website to Amazon S3 and CloudFront For Static Items

I was looking to increase my experience working with large scalable websites, so I decided to switch all of my static items such as images over to Amazon S3 and CloudFront. S3 is Amazon’s storage service and CloudFront is their content delivery service. By doing this, I get to take advantage of the same infrastructure Amazon uses to run their websites.

From Amazon’s website:

This means that I get to upload my website’s images to Amazon’s S3. Then, when a user accesses this website, Amazon CloudFront delivers these images to the nearest edge location of that user. CloudFront stores these images in the edge’s cache until it expires.

The first thing you need to do is sign up. You can sign up for these services at the two links I provided above. The services are extremely cheap. This is the link for the S3 pricing and this is the link for the CloudFront pricing. After you have signed up, you need a way to interface with Amazon’s S3 service. I use Firefox, and there is a great add-on called S3Fox. You can download the add-on from Mozilla here. There are other programs you can use to interface with S3 and CloudFront. However, this how-to will focus on S3Fox. You can find similar tools from Amazon’s developer page here. Whatever tool you decide to use, this how-to should still be relevant. Once S3Fox is installed and the browser has been restarted, go to Tools » S3 Organizer in Firefox. You will be greeted to a message that says: “Click Manage Accounts to add the access key and secret code.” Simply click ‘Okay.’ Before we start, let’s go to the ‘Preferences’ setting and click the checkbox for ‘Use secure transfer (https).’ I do not like to have anything in my Firefox status bar, so I went ahead and unchecked ‘Display statusbar icon (needs a browser restart).’ After the ‘Preferences’ have been edited, click on ‘Manage Accounts’ at the top left of the application. After you click ‘Manage Accounts,’ you will see the ‘S3 Account Manager.’ You can name the account anything you want. I went with AaronSofaly.com. For the ‘Access Key’, you need to log in to your Amazon AWS account. Go to aws.amazon.com and then go to Your Account » Access Identifiers. After you sign in, you will see ‘Your Access Key ID’. You will have to click ‘Show’ in order to see ‘Your Secret Access Key’. These access keys are basically public and private key encryption. After you have entered your ‘Access Key’ and ‘Secret Key’ into the fields, go ahead and click ‘Add’. You will see your new account appear under ‘Account Name’ and you can now click ‘Close’. Now that we have linked our S3 account to S3Fox, we need to create a directory. Click the ‘Create Directory’ button in the top right of the application. This directory is what Amazon calls a ‘bucket’. The ‘bucket’ is the container for all directories and files contained within it. Your ‘bucket’ name must be unique across all of Amazon’s system. For example, your ‘bucket’ cannot be named ‘test’ because someone has already named their ‘bucket’ ‘test.’ I suggest you use your domain name as the ‘bucket’ name. Now that the ‘bucket’ is created, go ahead and create the folder structure you want your website to follow. Keep in mind, this folder structure will be the basis for the URLs of these static items. For example, this is my folder structure: Any images that are specific to my theme are in the ‘theme’ directory. The images for the individual posts go inside the ‘content’ folder with another directory named after the title of the post. Therefore, the URLs for the images in this post are: The folder structure is in place and we can now upload our items to the corresponding folders. Just click ‘Browse’ on the left hand column of the application and navigate to the folder of the item. Once you locate the item, click the ‘Upload’ button to upload it to the S3 service. The image is now uploaded to the S3 service, but we need to edit the ‘ACL’ setting to make the item readable for everyone. Right click the item after it has been uploaded to S3 and click ‘Edit ACL.’ On the ‘Manage ACLs’ screen, click the red ‘X’ under the ‘Read’ column for the ‘Everyone’ row. You must do this for every item you upload to S3; otherwise your visitors will not be able to see the item. Now that we have our items ready to go on the S3 service, we need to make them available for delivery via CloudFront. Right click your ‘bucket’ and choose ‘Manage Distributions.’ On the ‘Manage Distributions’ screen, within the ‘CNAME’ field, use this naming structure: For example, my ‘CNAME’ is:
Click ‘Create Distribution’ and Amazon will provide you with a CloudFront domain name. It takes a minute or so for the status to change to ‘Deployed.’ You can just hit the orange arrows to refresh the ‘Status.’ At this point, you could just use the URL that CloudFront provides you. My CloudFront URL is d3ahbdurwksiu3.cloudfront.net. So I could use this URL to link to my background image: We want a cleaner URL, and that is where the CNAME comes in. First, you need to create that sub domain you entered in the ‘CNAME’ field. My host uses cPanel. In cPanel, just go to Domains » Subdomains. Your host may be different. After the sub domain has been created, we need to create a CNAME alias. My host does not allow me to create my own CNAMEs, so I had to email their support department for the request. Your host may allow you to create your own CNAMEs. If they do, the command is similar to this: This CNAME alias allows me to use this URL: This CNAME URL is much cleaner and hides the fact that the images are being delivered by Amazon’s CloudFront. (My ‘s3’ sub domain doesn’t exactly hide the fact that it is delivered by Amazon’s web services because I named it ‘s3’. However, you could use ‘images’, ‘static’, or something other than ‘s3’). And that’s it! Have a question or comment? Go ahead and leave your feedback in the comments below. Aaron