Grow your CSS skills. Land your dream job.

How To Set Up and Host A Publicly-Accessible File on Amazon S3 (Simple Storage Service)

Published by Chris Coyier

usings3.png

One of the many good suggestions I got for hosting these video files was to use the Amazon S3 (Simple Storage Service). I had heard about this before, but didn't know much about it. Nothing like trial by fire to figure something out quickly...

 

Step 1: Sign up for Amazon Web Services

Simple enough. Go here to do this. There are other different web services Amazon offers. The one we are using here is the Simple Storage Service). You will get a chance to see the rates on this page, but just for kicks, here they are:

Storage
$0.15 per GB-Month of storage used

Data Transfer
$0.10 per GB - all data transfer in
$0.18 per GB - first 10 TB / month data transfer out
$0.16 per GB - next 40 TB / month data transfer out
$0.13 per GB - data transfer out / month over 50 TB

Requests
$0.01 per 1,000 PUT or LIST requests
$0.01 per 10,000 GET and all other requests*

That basically reads: "Super cheap bandwidth for sale!"

 

Get your Access Key ID and Secret Access Key

Click the little yellow dropdown graphic and select AWS Access Identifiers. You will see a graphic like this. Click the show button to show your secret access key.

accessstuff.png

This is basically your "User Name" and "Password" for logging into this service. One of the weird things about this is that Amazon provides no way to access this service themselves. Nor do they provide any information on third party tools in which to use, at least that I could find.

 

Download a Third Party Tool

The best way I've found is to use Transmit from Panic. It is their flagship FTP tool, which it's great for, and it offers Amazon S3 as one of the regular server types so it's super easy to use for this.

usingtransmit.jpg

If you aren't on a mac, there are other tools to connect to Amazon S3. The first tool I tried was actually Bucket Explorer and also did a fine job, just wasn't quite as nice as using my already loved Transmit.

Connect, and Create a Bucket

Once you get connected, you'll need to create a bucket (basically just a directory, to keep you organized) in which to upload your file. Buckets are "globally unique" meaning that the name of your bucket cannot be the same as anyone elses in the world. So if you want your bucket to be called "images", too bad =) -- try something like the name of your website or your last name.

newbucket1.jpg

 

Upload your file(s)

This should be a pretty easy thing to do no matter what tool you are using. In the case of transmit, just double click your new bucket open and then drag files either directly from the finder or from the left-hand navigational pane into the right area.

 

Making the files public

Now that your file is uploaded, you need to do this step to make it actually publicly accessible. Since I was using this to embed video on a web page, this was a must. I forgot to do this once, and the video just didn't work. Took me a few minutes of head scratching to realize I forgot to make it publicly accessible.

In the case of Transmit, right click on the file and go to "Get Info".

getinfotransmit.png

This is where you need to change the Permissions for the Read setting to World. Now your file should be link-able. But what is the URL for that file?

 

Getting the URL for your hosted file

Again, in the case of Transmit, this is really easy. Just right click the file and go to "Copy Path".

copypath.png

Or, you can just create the URL yourself. It's very easy to figure out:

http://s3.amazonaws.com/YOUR-BUCKET-NAME/YOUR-FILE-NAME

Embed your video

If you are using this to host video like I am, now you can link directly to this file from your embed code.

<EMBED src="http://s3.amazonaws.com/YOUR-BUCKET-NAME/YOUR-FILE-NAME" width="800" height="461" autoplay="false" controller="true" cache="true" loop="false" bgcolor="#000000" pluginspage='http://www.apple.com/quicktime/download/'></EMBED>

One of the little scary things about doing it this way is you are exposing that link for all to see. In case someone was out there trying to poach your content, they could link directly to this and use your bandwidth. I guess you'll have to monitor your Amazon S3 statistics to see that. Hopefully they can show you that kind of information, I haven't dug into this that far yet.

Good luck!

Comments

  1. Andrew M.
    Permalink to comment#

    Wow, I didn’t know it was that easy.

  2. Permalink to comment#

    I personally use S3Safe for uploading files to S3 while on a PC. You can find out a tiny bit more about it here. Technically, this is just the ‘trial’ version, but after contacting the company we’ve learned that there currently is no for-pay version, so it’s all the same version for now.

    I would also point out that there’s another valid way of formatting the S3 URL:

    http://YOUR-BUCKET-NAME.s3.amazonaws.com/YOUR-FILE-NAME

    Some people might prefer that option, as it puts your bucket name first and foremost, making it look a little bit more like a ‘local’ URL if you’ve named your bucket something similar to your website.

    Great tips!

  3. Angela
    Permalink to comment#

    Thanks very much for these great videos.

    I learnt a few new tricks and like your “nice and clean code” practice.

  4. Andrew M.
    Permalink to comment#

    @CSSnewbie and @Chris

    Another way to “brand” or make a url look like it’s coming from your server is to create a CNAME DNS record based off your bucket.

    YOUR-SUB-DOMAIN CNAME YOUR-BUCKET-NAME.s3.amazonaws.com

    If css-tricks.com were to do it with MediaTemple’s DNS control:
    videos.css-tricks.com CNAME css-tricks-video.s3.amazonaws.com

    So now you have

    http://videos.css-tricks.com/VideoCast-3.mov

    Instead of

    http://s3.amazonaws.com/css-tricks-video/VideoCast-3.mov

    Or

    http://css-tricks-video.s3.amazonaws.com/VideoCast-3.mov

  5. @CSSnewbie: I didn’t know about the alternate way to format the S3 URL. That’s awesome, I think I like that better since, like you said, it makes it seem a bit more like a local (trustable) URL.

    @Andrew M.: Now that is extra smart. I gotta look into doing that. I’m gonna wait and see if Amazon S3 is ultimately right for me, but if I stick with it I’m absolutely going to do that.

  6. There’s an optional Step 9, which is to turn on logging and hook up a reporting tool so that you can get web stats for your S3 files.

    Here’s a how-to article if you want to do it yourself…
    http://www.expatsoftware.com/articles/2007/11/roll-your-own-web-stats-for-amazon-s3.html

    …and a link to a service (mine, for full disclosure) that will do it for you:
    http://www.s3stat.com/

  7. Chris

    Cool for Mac users!

    …ahhhh, whatabout Windows?

  8. Rohan
    Permalink to comment#

    How can I allow my rest of the team to login into bucket and they can upload files there, and get embed url? I want to make it limited to my team mates. As they also upload thousands of photos.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".