AWS S3 Websites cloud

I’ve’ setup an S3 bucket for hosting media related to this blog and since the content of this media is by definition public, I wanted a simple way for everyone to publicly list the content of that directory similar to that of Apache Options +Indexes.

My initial thoughts were immediately focused on the AWS SDK for JavaScript which was released not too long ago. But then I came across this article where a simple javascript and jquery script is used and finally ended up using the excellent github project s3-bucket-listing.

Setup was simple – make sure you replace media.hatim.eu with {your-bucket-name}:

  • Created a bucket in eu-west-1 called media.hatim.eu and enabled static website hosting.
  • Used the AWS Policy generator to create a bucket policy to allow everyone to run s3:GetObject on arn:aws:s3:::media.hatim.eu/* and applied to my bucket.
  • Added a simple CORS policy like this:
1
2
3
4
5
6
7
<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
   <AllowedHeader>*</AllowedHeader>
 </CORSRule>
</CORSConfiguration>
  • Added a route53 CNAME record for media.hatim.eu to media.hatim.eu.s3-website-eu-west-1.amazonaws.com.
  • Copied list.js from the github repo into the root of the bucket.
  • Created an index.html file and added following code before uploading it to the root of the bucket:
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
</head>
<body>
  <div id="listing"></div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script type="text/javascript">
      var BUCKET_URL = 'http://media.hatim.eu.s3-eu-west-1.amazonaws.com';
      var S3BL_IGNORE_PATH = true;
  </script>
  <script src="/list.js"></script>
</body>
</html>

Now anyone can just go to media.hatim.eu and see a completely browsable directory structure and be able to find the right asset. This can be really handy if you are using s3 to host binaries or builds that can benefit from being browsable.

S3 Directory Listing

Comments