Use Amazon S3 & Firefox To Serve Static Files

Hosting services have gotten a lot better in recent times, more storage, more bandwidth, cheaper prices. But there is only so far that regular hosting will go. When I first launched PSDTUTS, despite being on a great webhost with some big specs, we ran into both bandwidth and file serving problems when our tutorials (each containing dozens of heavy images) would land on Digg. And then a friend recommended I try using Amazon’s Simple Storage Service (aka S3).

It turned out to be really easy to use S3 like a giant, unlimited host, and I’ve been using it ever since for high-access, or heavy files like podcasts for FreelanceSwitch, images for blogs, and even for sending files to clients. In this tutorial I’ll show you how with just Firefox you can turn S3 into your own personal content delivery network.
It’s super simple, even I could do it!

Step 1

The first thing you are going to need is an account. So do the following:

1. Log in to your regular Amazon.com account (or if you don’t have one, create one!)
2. Go to Amazon.com/AWS (AWS = Amazon Web Services)
3. Using your Amazon account, Create an AWS account by following the prompts
4. When you’ve created your AWS account (shown below) you’ll see a list of web services that you might be interested in. Choose "Amazon Simple Storage Service"

Step 2

Now before you can do anything with S3 you have to Sign Up For This Web Service. (I know there’s a lot of signing up to do!)

You’ll need to provide a credit card so that Amazon can bill you for bandwidth, storage and processing. The rates are low, something like $.15 p/gb transferred.

Although you might be thinking that your webhost provides bandwith at a much cheaper rate, this probably isn’t really the case. For example a company like Dreamhost will offer you literally terrabytes of bandwidth for just a few dollars a month. However if you try to hit their servers quickly to make use of this bandwidth (e.g. during a Digg, or when you just sent a newsletter out about a download file), you’re unlikely to get either a quick download, or even a download at all. In my experience webhosts count on the fact that there are a lot of factors that ensure it’s highly unlikely you’ll ever use that bandwidth.

In the time I’ve used S3 – about 8 months now – I’ve hit it with some pretty large spikes of traffic. The biggest was a day when we had 150,000 visitors in a single day on a tutorial with a total of 3mb of images. So that day alone it served up 450gb of data, and didn’t even bat an eyelash. I’m sure in the scheme of things there are much bigger users too.

So it’s pretty safe, and it’s pretty cheap. Meanwhiles Amazon should really be paying me money for all this promotion :-)

Step 3

So anyway once you’ve signed up, click on the "Your Web Services Account" button and a little menu appears. This is where you control your account, check on your activity (ie. bill) and so on.

Click on "AWS Access Identifiers"

Step 4

Now you’ll get two numbers, your access key ID and your secret access key. Needless to say you want to keep these very safe!

Copy the two numbers out into a text editor so we have them on hand, because we’ll need them in a second.

Step 5

Next we’re going to need our Firefox Extension. If you’re not using Firefox … well you’re on your own :-) I know for example you can use Transmit on a Mac to log in to your S3 account. Presumably on Windows there is something similar (if anyone knows … please do leave a comment).

So we’re going to use the S3Fox extension from RJonna

Visit the website and click on the link shown in the screenshot to download S3Fox.

Step 6

Once installed, your Firefox will restart and then you’ll see that you can now access S3Fox either from the bottom right of your browser window or from the Tools menu.

So go to Tools > S3 Organiser and you should have a tab appear showing your S3Fox window. It’s really similar to an FTP program and hence super easy to use. There are a couple of differences though.

So click on Manage Accounts and create an account with your Access Key and Secret Key from earlier. Click Save.

Step 7

Once you’ve created an account you’ll get a blank area on the right hand side. The first thing you need to do is create a Bucket. A Bucket is Amazon terminology for what amounts to a folder or directory of files. Bucket names have to be unique across the service, so for example you won’t be able to create a bucket called "Test" because I’m sure that was like the first bucket name to go.

Anyhow right click on the right hand side and choose "Create Directory", this will in fact create a Bucket because we’re in the root. Once you have a bucket created you can create directories inside. You can also have as many buckets as you wish.

You’ll be prompted for a name and the extension will show you a bunch of rules about bucket names. Weirdly the extension seems to interchange the words bucket, folder and directory.

Step 8

So I created a bucket named "nettuts" and then added two directories inside called "003_S3" and "s3demo". Then I have dragged an image over to upload to S3. The image is called s3image.jpg.

Now Right-Click on the file and choose Edit ACL. Before you can access your file you’re going to need to change its permissions, and that’s what this does.

You’ll be prompted to give Read/Write/Full Control by ticking or unticking some selections. You only want to give Read access here, so tick the boxes.

(Note on a Mac the extension has a weird bug that when you click on the ‘x’ it doesn’t immediately change to a tick, but when you click Save, all of a sudden it does. It’s confusing and hopefully will get fixed, but you get used to it)

Step 9

Now once you have set permissions, Right Click again and choose Copy URL to Clipboard. The URL For my image is:

http://d2o0t5hpnwv4c1.cloudfront.net/003_S3/s3demo/s3image.jpg

As you can see the first part of the URL is the bucket name, then the domain, then the folders and finally the file name.

That’s It!

And that’s it, here’s the image that I placed on S3. Right click and view its location to see! (Actually all the images in this tutorial are on S3 :-)

Of course if you want to do all this dynamically with PHP or Ruby, that’s a whole other kettle of fish, and hopefully one we’ll cover here in future. You can also get WordPress and other app plugins that connect up to S3.