hosting multiple sites on S3 bucket serving index.html from directory path

Question

I'm new to using AWS S3. I want to know if it's possible to host multiple static websites in one bucket using the website route directing meta data option. I am planning to have multiple folders each with their own index.html, but how can I configure the bucket settings to route to each individual site when a user types the address.

For example by typing

http://<bucket-name>.s3-website-<AWS-region>.amazonaws.com/folder1 

will take them to website 1

and

http://<bucket-name>.s3-website-<AWS-region>.amazonaws.com/folder2 

will take them to website 2

If this is possible, is there any way to also achieve the configuration using the AWS CLI?

Primm

did you ever solve the issue? Reading the answer comments below, it sounds like it didn't work for you. If you did find a solution, could you share it, as I'm wondering a similar question. – Beutner

@fuzzi, it does not work for me as well because of CloudFront which doesn't support multiple index files, see https://mcmap.net/q/1915171/-s3-multiple-index-files – Lebanon

Answer 1

This is possible with a slight modification to the URL. You need to use the URLs as follows with the trailing slash to serve the index.html document inside folder1 and folder2.

http://<bucket-name>.s3-website-<AWS-region>.amazonaws.com/folder1/
http://<bucket-name>.s3-website-<AWS-region>.amazonaws.com/folder2/

If you create such a folder structure in your bucket, you must have an index document at each level. When a user specifies a URL that resembles a folder lookup, the presence or absence of a trailing slash determines the behavior of the website. For example, the following URL, with a trailing slash, returns the photos/index.html index document.

Reference: Index Document Support

Something

When I use the URL with the trailing slash ,It downloads the index.html file instead of showing it ! – Primm

Check the Content-Disposition header of index.html https://mcmap.net/q/237598/-amazon-s3-downloads-index-html-instead-of-serving/1549165 – Something

Thanks ,that is solved.Now it fails to load sources (css,Js,..) because it looks for them at the bucket root rather than in the associated folder? it just brings up a blank page – Primm

You need to have the correct paths for css js and headers. Double check on the paths. It should work. – Something

I use the create react app so all the configuration for the css and js are automatic – Primm

Thank you helpful for understanding a similar issue I have. When using Route53 for custom domain name the problem is still remaining. Have you seen similar behaviour ? – Reducer

how do we fix deep links issue when hosting multiple websites in this manner? And deep links which are accessible from client app routing will not work anymore. – Zeldazelde