S3 static website index document

Question

I'm trying to upload my static website to my s3 bucket. I've managed to accomplish this. I've created my_bucket and then create a sub_bucket named test_folder and in that I uploaded all my css, html, js files.

It would look like this now:

 my_bucket/
  test_folder
    index.html

And I was able to view my index.html, horray! :D. But my question is in setting up the index document, since the index.html is located to a sub_bucket: test_folder/index.html when I try to save it, gave me The

IndexDocument Suffix is not well formed

Is it possible to link the index.html in a sub_bucket? If yes, how? If not, is there an alternative way to achieve this? I have here a screenshot link

Answer 1

i had this exact issue, what i did was to go to the my cloudfront distribution.

i clicked on origin, i chose my origin name and clicked on edit.

in my "origin path" i set the name of my root folder,

in my case this was what my path looked like "/folder-name"

Answer 2

Usually the index document is placed in the root folder (Virtual heirarchy, since S3 is a object storage and there is no folder concept here). However if you want to place your index document inside a different path (rather than root) like in your case, the URL which you call need to be changed as well.

Let's say the static website end point is as follows,

http://example-bucket.s3-website.Region.amazonaws.com

In order to make ur sub folder path work, you need to call following url,

http://example-bucket.s3-website.Region.amazonaws.com/test_folder/

You can call this with a trailing slash at the end or without it. if you exclude the trailing slash (test_folder) from the preceding URL, Amazon S3 first looks for an object test_folder in the bucket. If the test_folder object is not found, it searches for an index document, test_folder/index.html. If that document is found, Amazon S3 returns a 302 Found message and points to the test_folder/ key.

Please note that the name of the index document should be same in every path (root and any other sub paths).

For more details refer below documentation.

Configuring an index document

Answer 3

I have realized that I have visited this thread after an year looking to do the same thing again. Since no answer here mentions about using Custom Origin instead of S3 Origin which is the easiest of the solutions, I am going to post this here. This is suggested by 'D. Svanlund' in this AWS thread. After doing this you don't have to put / in the browser or in s3/cloudfront settings. Cheers!

Instead of using S3 Origin use Custom Origin in your cloudfront distribution Origins and Origin Groups settings tab.

You have to use your s3 bucket url ( myawesomebucket.s3-website-us-east-1.amazonaws.com ) in the Origin Domain Name field. You can find your S3 bucket url from the bucket Properties tab.

Also in my S3's Static website hosting settings I have put index.html in the Index document field.

Answer 4

Easiest way should be to use s3 with cloud front and set Origin Path to test_folder/index.html after selecting the bucket where that 'folder' exists.

Answer 5

The alternate way is If you are using(or use) cloudfront with S3, you can have

DefaultRootObject: test_folder/index.html

This way your cloudfront url https://yourdomain/ will return test_folder/index.html

Answer 6

I have been trying to do the same thing (serve static from s3) and reading this post made me realize that you need to place the index file (e.g. 'index.html') in the bucket outside of any folders.

I had my index document in a templates folder. I had read the documentation but I was so frustrated that I couldn't understand what it was really saying. Sometimes, the really stupid mistakes are the most difficult to troubleshoot. Hope this helps somebody.

Answer 7

try to fill index.html in the "Index Document" cell.

Answer 8

I also had this issue. Based on Michael's answer, I developed this work-around:

In the Amazon S3 bucket properties, set the Index Document: value to something arbitrary (I used 'index.htm' and didn't have a index.htm file present in the 'root' of the bucket. Then set the Error Document: value to wherever you want the user sent to (test_folder/index.html in your case).

Remember, any 404 error message on your site will be sent to the specified page. I know this is a horrible work around, but it seems to work for me. Any other suggestions gratefully accepted!

Answer 9

Though often used for different purposes, the index document was originally intended, conceptually, to be the "index" (directory listing or other content summary) of all of the files within each folder, so this configuration parameter specifies the index document to return for each folder in the entire bucket, if such a document exists within the folder... this isn't a single configuration "thing" for the bucket as a whole.

If your attempted configuration had been accepted by S3, it would have had the following impact, assuming a bucket name of "example.com":

browser address bar          file (object) actually returned
---------------------------  ------------------------------------
http://example.com           example.com/test/index.html
http://example.com/help      example.com/help/test/index.html
http://example.com/foo/test  example.com/foo/test/test/index.html

It seems very unlikely that this is what you actually intended.

However, but that is how index documents work... they are conceptually intended to be related to the other things at each level of the directory hierarchy, which of course could be the actual listing of files, or could be an "index" in a much more broad and vague and general sense of any "page," such as a landing page you want a visitor to see when they go to a specific "directory" on your site, which of course, in the modern web is not typically conceptualized as a "directory" but rather simply as a "page."

So the index document has to be immediately under the same / delimiter and can't contain an additional / within its own specification.

The index document for example.com has to be stored in example.com/index.html (assuming "index.html" is your chosen index filename) -- it has to be stored within the "directory" that it indexes, just like on a conventional web server, where, in some configurations, the web server will actually display a directory listing of files, with the "index" page replacing that directory listing in cases where the "index" page actually exists. Of course, S3 doesn't have default directory listing page functionality.

http://docs.aws.amazon.com/AmazonS3/latest/dev/IndexDocumentSupport.html

In contrast to the index document, the error document, if you configure it, is a global configuration that is used regardless of where, within the bucket, the 404 occurs, so slashes are supported in that entry. The AWS console prompts are light on hints as to the nature of the two entries, which are so different in their behavior that they arguably should be more separated, visually.

---

You'll note that "sub-bucket" isn't an actual term, for what you are describing, which is an object with delimiters in its key (path), which gives the appearance of being nested under a directory or folder.

For clarity, I have used the words "folder" and "directory" very casually all throughout this answer, with the conventional meaning... but for technical accuracy, I'll mention that S3 objects are not really stored internally in a hierarchical fashion "in directories." It appears this way, and for practical purposes, it works that way; however, it's actually the case that the / character, while close to being just another character in the object key, although it gets some special treatment as a delimiter because of its conventional use as a directory delimiter.Unlike some more conventional filesystems, the number of "files in each directory" does not pose any performance concern with S3 and doesn't need to be managed in the same way as is needed in a conventional filesystem when a large number of files exists, since S3 internally hashes the key ("path") of each object for its internal storage partitioning logic.