How do I serve index.html in subfolders with S3/Cloudfront?

Question

Got a bucket called www.foo.site. In that site there's a landing page, an about page and some pages in a few bar/* folders. Each bar/* has an index.html page: bar/a/index.html, bar/b/index.html etc.

The landing page is running fine (meaning www.foo.site will load when I browse to it) but the /about/index.html page and /bar/index.html pages aren't getting served when I click on my about links etc. If I curl the URLs I get 404. I've tried setting the origin path and origin domain name separately:

First try:

domain name: www.foo.site.s3.amazonaws.com
origin path: (blank)

Second try:

domain name: s3-us-west-1.amazonaws.com
origin path: www.foo.site

Default document is index.html for both.

Neither one worked. All of the S3 pages mentioned above are directly browsable. Meaning https://s3-us-west-1.amazonaws.com/www.foo.site/bar/index.html loads the expected html.

This must be some Cloudfront setting I'm missing. Possibly something in my DNS records? Is it possible to serve html files in S3 "folders" via Cloudfront?

Answer 1

Here are a couple of resources that are helpful when serving index.html from S3 implicitly via https://domain/folder/ rather than having to explicitly use https://domain/folder/index.html:

• Serving index pages from a non-root location via CloudFront
• Serving index pages from a non-root location via CloudFront (now unavailable)
• Implementing Default Indexes in CloudFront Origins Using Lambda@Edge

The key thing when configuring your CloudFront distribution is:

do not configure a default root object for your CloudFront distribution

If you configure index.html as the default root object then https://domain/ will correctly serve https://domain/index.html but no subfolder reference such as https://domain/folder/ will work.

It's also important to not use the dropdown in Cloudfront when connecting the CF distribution to the S3 bucket. You need to use the URL for the S3 static site instead.