Nuxt.js: Problem with routing on different layout on cloudfront

Created on 5 Jan 2018 · 6Comments · Source: nuxt/nuxt.js

Hello everyone,
we are currently experiencing some routing problem using AWS S3 and AWS Cloudfront. We have main layout(customer, guess) and an admin layout(management). The main layout routing is working fine using https://domain.xyz/* but the problem occurs when we navigate to the admin page using https://domain.xyz/admin it just redirects us to the /index.html because we have a "Custom Error Response" for 403. We are currently stuck on this problem, anyone who had the same issues and solved it? Thank you so much

_{This question is available on Nuxt.js community (#c2177)}

Source

aindong

Most helpful comment

@aindong @gabrielaandb

So I think what may solve your issue(s) is not having CloudFront be a cache to an S3 bucket but instead be a cache for an S3 website. By default when setting up a distribution it will auto-fill in your S3 buckets for you. Very handy. However, that is more of a direct S3 bucket cache, so you will get 403/404 errors on key paths.

To fix this I manually replaced the auto-fill origin domain name with the full S3 website URL.

abc.xyz.s3-website-us-east-1.amazonaws.com
vs.
abc.xyz.s3.amazonaws.com

You may also want to enable Query forwarding on the behavior. Some of my testing shows that isn't necessary, some shows it helps.

Soabirw on 24 Jan 2018

👍4 ❤3 🎉1

All 6 comments

I'm having the same issue. Did you find a solution @aindong ?

gabrielaandb on 20 Jan 2018

Seeing the same thing, but not even dealing with any sort of layout adjustments. Generate works just fine on the S3 bucket. But soon as you try to go to any sub page you will get the no key error. I've tried a variety of things to have it load in the various index.html files, but then there are other breaking issues.

I'd rather not just keep it on S3 as the performance just isn't where we want it to be. I'm not sure why CloudFront doesn't resolve a folder to auto look up index.html like S3, but that seems to be what needs to happen.

Soabirw on 24 Jan 2018

@aindong @gabrielaandb

To fix this I manually replaced the auto-fill origin domain name with the full S3 website URL.

abc.xyz.s3-website-us-east-1.amazonaws.com
vs.
abc.xyz.s3.amazonaws.com

You may also want to enable Query forwarding on the behavior. Some of my testing shows that isn't necessary, some shows it helps.

Soabirw on 24 Jan 2018

👍4 ❤3 🎉1

You just saved me a shitload of stress thank you a million times over @Soabirw