Directory Listing in S3 Static Website

Question

I have set up an S3 bucket to host static files.

When using the website endpoint (http://.s3-website-us-east-1.amazonaws.com/): it forces me to set an index file. When the file isn't found, it throws an error instead of listing directory contents.

When using the s3 endpoint (.s3.amazonaws.com): I get an XML listing of the files, but I need an HTML listing that users can click the link to the file.

I have tried setting the permissions of all files and the bucket itself to "List" for "Everyone" in the AWS Console, but still no luck.

I have also tried some of the javascript alternatives, but they either don't work under the website url (that redirects to the index file) or just don't work at all. As a last resort, a collapsible javascript listing would be better than nothing, but I haven't found a good one.

Is this possible? If so, do I need to change permissions, ACL or something else?

Wildee

Answer 1

I found s3browser, which allowed me to set up a directory on the main web site that allowed browsing of the s3 bucket. It worked very well and was very easy to set up.

Wildee

Can you point me to the documentation of how to do this? cheers – Stockman

So I am guessing that because this was the "correct" answer, no one has figured out a way to do this 100% on S3. This solution requires having another server to host the mini-app. – Alphard

Answer 2

I've created a simple bit of JS that creates a directory index in HTML style that you are looking for: https://github.com/rgrp/s3-bucket-listing

The README has specific instructions for handling Amazon S3 "website" buckets: https://github.com/rgrp/s3-bucket-listing#website-buckets

You can see a live example of the script in action on this s3 bucket (in website mode): http://data.openspending.org/

Obsolesce

@MerynStol i've add a link to a live example in the answer. Note that with a bit of css fu you could make it look nicer (my aim was to imitate the classic apache style directory listing ...) – Obsolesce

Answer 3

There is also this solution: https://github.com/caussourd/aws-s3-bucket-listing

Similar to https://github.com/rgrp/s3-bucket-listing but I couldn't make it work with Internet Explorer. So https://github.com/caussourd/aws-s3-bucket-listing works with IE and also add the possibility to order the files by names, size and date. On the downside, it doesn't follow folders: only the files at one level are displayed.

Bryner

Answer 4

This might solve your problem. Security settings for Everyone group: (you need the bucketexplorer.com software for this)

If you are sharing files of HTTP, you may or may not want people to be able to list the contents of a bucket (folder.) If you want the bucket contents to be listed when someone enters the bucket name (http://s3.amazonaws.com/bucket_name/), then edit the Access Control List and give the Everyone group the access level of Read (and do likewise with the contents of the bucket.) If you don’t want the bucket contents list-able but do want to share the file within it, disable Read access for the Everyone group for the bucket itself, and then enable Read access for the individual files within the bucket.

Willwilla

I have tried the s3.amazonaws.com/bucket_name method and it presents an XML list instead of an HTML list. – Wildee

Answer 5

I created a much simpler solution. Just place the index.html file in root of your folder and it will do the job. No configuration required. https://github.com/prabhatsharma/s3-directorylisting

Glycogen

Doesn't work if you map your bucket to a domain and then use https. I have no choice in these two things. – Ethnology

Answer 6

I had a similar problem and created a JavaScript-and-iframe solution that works pretty well for listing directories in S3 website files. You just have to drop a couple of .html files into the directory you want to list. You can find it here: https://github.com/adam-p/s3-file-list-page

Roarke

iFrame is a good idea. I ended up finding a program to do what I needed. I will post an answer. – Wildee

from the website: This iframe hack is probably obviated by the introduction (2012-09-01) of CORS support in S3. As such, I don't guarantee that the demo site will remain up and running. – Maybellemayberry

Answer 7

Using another approach base in pure JavaScript and AWS SDK JavaScript API. Not need PHP or other engine just pure web site (Apache or even IIS).

https://github.com/juvs/s3-bucket-browser

Not intent for deploy on your own bucket (for me, no make sense).

Using the new IAM Users from AWS you can provide more specific and secure access to your buckets. No need to publish your bucket to website and make all public.

If you want secure the access, you can use the conventional methods to authenticate users for your current web site.

Hope this help too!

Ephialtes

I like this one. Perhaps we can just upload the HTML/JS/CSS file to the S3 bucket which is served as a static web site. I will try this. – Jamestown

Answer 8

Here is official code from Amazon to accomplish just this:

AWS Samples - Public File Browser for Amazon S3

This AWS Samples code allows customers to create a simple PUBLIC file repository using Amazon S3 and Amazon CloudFront. This sample code deploys a website and a public files S3 bucket which can be loaded with any files they wish to publish publicly online.

Sorce