website
website copied to clipboard
Incoherent bug happening for nuxt full static websites
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!
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
What do you think about the enhancement ?