Mea Vita: Carpe Diem: Using S3 to Serve Up an Entire Web Site: The 100% Solution

Wednesday, September 1, 2010

Using S3 to Serve Up an Entire Web Site: The 100% Solution

Ever since Amazon launched AWS four years ago I've been yearning for a way to use it to serve up an entire static website, including the index.html. Last month, Amazon made that possible by allowing a default root object to be assigned to a CloudFront distribution, which, in turn, can point to an index.html file in one of your S3 buckets.

Here's an example of it in action:
http://bio.joemoreno.com

Phase I
1. Create a bucket named web.yourdomain.com and load your static web pages into it. (Note that's web not www.)

2. Configure your domain's DNS so that the CNAME for web.yourdomain.com points to web.yourdomain.com.s3.amazonaws.com.

If you've configured the bucket correctly and the DNS has propagated then you should see your static website when visiting:
http://web.yourdomain.com/index.html

Phase II
1. Create a bucket named www.yourdomain.com.

2. Put a single object into the www.yourdomain.com bucket named index.html. This index.html object will be a static HTML web page that's a meta-refesh. It'll look something like this:


<html>
        <head>
                <meta HTTP-EQUIV="Refresh" CONTENT="0;URL=http://web.yourdomain.com/index.html">
                <title></title>
        </head>
        <body bgcolor=#FFFFFF>
        </body>
</html>

3. Configure a CloudFront distribution pointing to www.yourdomain.com.
Although you can use the web browser based AWS Management Console to set up the CloudFront distribution, you'll probably need a third party tool, such as Bucket Explorer, to configure the root object in step 5.

4. Configure your domain's DNS so that the CNAME for www.yourdomain.com points to your CloudFront distribution host name. (A CloudFront host name looks something like this: d1jlm9avypcmdg.cloudfront.net.)

5. Set the CloudFront distribution's root object to index.html which will be served up from the www.yourdomain.com bucket. (I used Bucket Explorer for this step.)

That's it!

It can take up to 15 minutes to create the CloudFront distribution and set its default root object. Your website should work fine once CloudFront reports that the distribution is Deployed and the DNS has propagated. How long it takes your domain's DNS to propagate depends on its TTL and negative caching time out. I recommend setting these as short as possible until everything is working correctly (I set mine to 60 seconds and then upped it to 24 hours once everything was up and running.)

Remember that you must set all of your objects in your S3 buckets to Public Read so that anyone can view your website.

2 comments:

Anonymous said...: Is the only reason you're redirecting to web.somedomain.com so you don't have to pay extra to have your site entirely in cloudfront?; February 24, 2011 at 5:02:00 AM PST
Joe Moreno said...: No, the redirect is because, until a couple weeks ago, only Cloudfront would let you define a root object (i.e. index.html).
My goal is to host an entire website on S3 or Cloudfront.; February 24, 2011 at 5:05:00 AM PST