website icon indicating copy to clipboard operation
website copied to clipboard

Incoherent bug happening for nuxt full static websites

Open oussj opened this issue 4 years ago • 2 comments

Hello everyone !

I encountered an issue that I solved after a long suffering.

The issue

I deployed a nuxt project to AWS by using the website component in the full static nuxt generate mode. I had incoherent results like if all the pages had only access to the payload that was generated for the "/" page.

I reproduced the issue here : https://d2xk172pvk6ejw.cloudfront.net/

To reproduce the bug :

  • go to the cloudfront distribution
  • go to Secondary page go back to Home page : you can see there are two different messages (an email for the homepage, a message with emojis for secondary)
  • now refresh the browser while being on the Secondary page => you get the email as on the home page.

You can find the code here : https://github.com/oussj/nuxt-full-static-serverless-website-issue

After looking a bit more, I understood that it was linked to this issue : https://github.com/nuxt/nuxt.js/issues/2506.

I understood it was linked to the fact that the cloudfront distribution is created with the s3 bucket url, and not the s3 website url. As you can see here in the source code

When I went to the AWS console and I manually changed the Origin Domain Name, everything was back to normal.

Suggestion

I suggest to always create the cloudfront distribution with the website url http://website-oecg92n.s3-website-us-east-1.amazonaws.com instead of http://website-oecg92n.s3.us-east-1.amazonaws.com

If this is not okay for some cloudfront reason (I'd be very interested to understand it), I'd suggest to add a boolean optional input static in serverless.yml

If static would be set to true, the cloudfront distribution would be created with the s3 website url and not the s3 bucket url.

I'd be happy to do the pull request!

oussj avatar Nov 26 '20 22:11 oussj

I found this explanation about the différent kinds of bucket urls. https://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteEndpoints.html#WebsiteRestEndpointDiff After reading it, I think it makes complete sense to use the website bucket url when creating the cloudfront distribution

oussj avatar Nov 27 '20 20:11 oussj

What do you think about the enhancement ?

oussj avatar Jan 11 '21 15:01 oussj