6

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!

Andrew_Sparrow
  • 141
  • 8
  • your server is online? nuxt generate will generate a static files for you, but you need run npm start to use your application. I don't think I understood your question very well. – Henrique Van Klaveren Dec 14 '19 at 15:16
  • @HenriqueVanKlaveren yes, it is online for sure. When I try to request any non root URLs manually, CloudFront can't look up into folder for index.html file. I have found exactly the same issue (but with not Nuxt) [here](https://stackoverflow.com/questions/15309113/amazon-cloudfront-doesnt-respect-my-s3-website-buckets-index-html-rules?rq=1). It is what I am trying to overcome. I will try proposed solution from the link above and I will give a response on it as soon as possible. – Andrew_Sparrow Dec 14 '19 at 22:52

1 Answers1

7

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!

Andrew_Sparrow
  • 141
  • 8