CloudFront can't find page of Nuxt.js static site after reloading

Question

I am new to deploying static sites. Searching for solution for about a while, I didn't find any useful information according to the problem I faced with.

Purpose: I want to run my generated Nuxt.js static site on CloudFront.

Problem:
Ran command nuxt generate

Got static files of site e.g:

-| dist/
----| about/
------| index.html
----| index.html

I configured properly CloudFront with all necessary options, loaded site to the S3 and connected it with CloudFront. It works fine in case I navigate the app without reloading the page and getting back to the previous page by browser facilities. Things go wrong when I try to request any path (apart from root '/', because CloudFront handles it correctly - image). Any time I try to request path for example http://domainname.com/about/ (with '/' or not at the end) I get XML error code which means that site page was not found.

<Error>
   <Code>NoSuchKey</Code>
   <Message>The specified key does not exist.</Message>
   <Key>about</Key>
   <RequestId>request-id-hash</RequestId>
   <HostId>
       host-id-hash
   </HostId>
</Error>

This is due to the reason that CloudFront waits from the client to request full path to the file.

For example: http://domainname.com/about/index.html will return page as expected.

Also, I have tried to generate files with subFolders: false option to achieve this:

-| dist/
----| about.html
----| index.html

But still went to the same problem: CloudFront wants full path to the requested file, so http://domainname.com/about won't return web page. It will send error code instead as previously.

How to make CloudFront understand that I want to get index.html file, when I request path to the folder where it is stored? Please, don't suggest Amazon Lambda or any other additional services to make it possible. It must be done just with CloudFront.

Could anybody help me with it? What am I doing wrong? I will be glad to any tips and suggestions!

Answer 1

As I expected, the issue was connected with CloudFront configs. I binded CloudFront to the S3 Bucket URL instead of S3 Website URL. The problem was not obvious at all! When you choose URL (to tell CloudFront from where to bring the data) Amazon suggests you only S3 Bucket URL in dropdown input. So I had to write down URL of my S3 Website manually and everything started to work like a clockwork!