6

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?

aamadmi
  • 2,680
  • 2
  • 18
  • 21
Esyt
  • 61
  • 1
  • 4
  • 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. – fuzzi Feb 22 '19 at 15:35
  • @fuzzi, it does not work for me as well because of CloudFront which doesn't support multiple index files, see https://stackoverflow.com/questions/24876252/s3-multiple-index-files – alex.dorokhov Jun 06 '19 at 18:45

1 Answers1

3

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

Ashan
  • 18,898
  • 4
  • 47
  • 67
  • 1
    When I use the URL with the trailing slash ,It downloads the index.html file instead of showing it ! – Esyt Aug 29 '17 at 01:38
  • Check the Content-Disposition header of index.html https://stackoverflow.com/q/18296875/1549165 – Ashan Aug 29 '17 at 01:41
  • 2
    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 – Esyt Aug 29 '17 at 02:05
  • 1
    You need to have the correct paths for css js and headers. Double check on the paths. It should work. – Ashan Aug 29 '17 at 02:10
  • I use the create react app so all the configuration for the css and js are automatic – Esyt Aug 29 '17 at 03:32
  • 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 ? – Ismapro Feb 03 '19 at 21:25
  • 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. – Nithin Kumar Biliya May 20 '20 at 14:19