How to set up index.html in cloudfront as a root objest if it is not in a root folder?

Question

Hello. I am getting all the time an error:

> Code: NoSuchKey
Message: The specified key does not exist.
Key: index.html

We are using Next Js to build our app and publish on cloudfront. 
But the problem is that ./next folder (main folder for the build artefact) has no any index.html in its root.
This file index.html is in ./next/server/pages/ folder after build is done and in ./standalone/.next/server/pages/index.html
So, how to setup index.html with the path as a root object in cloudfront to be able to load it after typing of our root domain (without any extra /path/and/so/on/index.html?
I tried to do it in cloudfront cache behavior or s3 properties but it does not work.
Any ideas?
Thanks.

Answer

Hi,

Do you really need to expose all these folders instead of only `/pages/`? If not, I would suggest to either do not upload them to S3 during the deployment or/and use `Origin path` set.

![CloudFront Origin path](/media/postImages/original/IMbwrdPsAJSZ2BuWKpa3CQHA)

Answer

Hi,

You can use cloudfront function to re-write the URL and fullfill your requirement. 
Please take a look at the following links for more detailed information.

https://github.com/aws-samples/amazon-cloudfront-functions/tree/main/url-rewrite-single-page-apps

https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/example-function-add-index.html

Hope this helps.

How to set up index.html in cloudfront as a root objest if it is not in a root folder?

相關內容