index.html files not being returned on anything that isn't the home page on static site

0

Hi all. So I sort of convinced myself to set up my static site in a more secure way. It's causing some headache.

Basic setup

I'm using an S3 bucket with Cloudfront in front with a certificate and am also using Route 53.

Changes from my normal setup

  • Static website hosting is turned off on the bucket
  • Block all public access is On
  • Bucket policy is only allowing my cloudfront distribution to fetch the objects

Distribution settings (that may be relevant)

  • Origin access control settings is turned on
  • Origin access control has the appropriate OAC attached
  • Alternate domain names is set to my domain (this fixes a 403 error)
  • Default root object is set to index.html (this causes the root domain to return this file without showing the index.html in the url, however it doesn't work for any other locations like /about/)

Is something like this necessary or is there something simpler I can do to cause the proper redirects? My main concerns is to not add any additional latency or impact the performance of the site.

Let me know if you need more info. Thanks.

1回答
1
承認された回答

Hello.

CloudFront uses the requested URL to access your origin.
In other words, in this case, the access is "s3-domain/about/" and if this continues, "index.html" will not be loaded.
You should see that if you request "/about/index.html" it will be loaded.
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/distribution-web-values-specify.html#DownloadDistValuesOriginPath

If you want CloudFront to request your content from a directory in your origin, enter the directory path, beginning with a slash (/). CloudFront appends the directory path to the value of Origin domain, for example, cf-origin.example.com/production/images. Do not add a slash (/) at the end of the path.

So, in order for "index.html" to be loaded when accessed with "/about/", you need to rewrite the URL using CloudFront Functions etc. as shown in the document you shared.
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/example-function-add-index.html

As far as I can see from this AWS blog, it doesn't seem to have a big impact on performance.
https://aws.amazon.com/jp/blogs/aws/introducing-cloudfront-functions-run-your-code-at-the-edge-with-low-latency-at-any-scale/

profile picture
エキスパート
回答済み 1ヶ月前
AWS
サポートエンジニア
レビュー済み 1ヶ月前
  • Alrighty.

    I'm unfamiliar with Cloudfront functions. Do I just create the function, add that code in, set cache behavior to default, publish, associate it with the distribution? Seems simple, but let me know if I am misunderstanding it.

    Edit: Testing it now and it works!

ログインしていません。 ログイン 回答を投稿する。

優れた回答とは、質問に明確に答え、建設的なフィードバックを提供し、質問者の専門分野におけるスキルの向上を促すものです。

質問に答えるためのガイドライン