1

I got a nextjs app with a couple static pages in a bucket being hosted on cloudfront and I ran into an interesting error. The pages are in s3 but if I refresh on a page other than index.html, cloudfront will still throw a 403 error.

If I add an error page for index.html with a 200 response cloudfront will load the home page while nextjs keeps the current page path. Since it's statically generated I don't think it's hot reloading back to the current page, and I don't know what else I should do to fix this

cloudfront and bucket configuration Error page bucket content

page behavior here's the home page About page About page when refreshed (it loaded the home page) About page when refreshed (it loaded the home page)

Note: I'd like to achieve this without having bucket set to public access and through an OAI, does anyone know what might be the cause?

roninMo
  • 111
  • 1
  • 14
  • Give the [CRA deployment docs](https://create-react-app.dev/docs/deployment/#s3-and-cloudfront) a thorough read through to see if it helps you get your setup/configuration correct. – Drew Reese Apr 18 '22 at 16:49
  • @DrewReese it's configured fine, and also this is for a nextjs application not a create react app. And I think this is an error with cloudfront not reading my statically generated pages, but don't know why. The bucket policy is configured through origin access identity and I know it's working because cloudfront has access to my page, but if I refresh the page outside of index.html, it will throw a 403 error. The root of the problem is that cloudfront isn't recognizing all my other pages in s3, and I wanna know what needs to be fixed – roninMo Apr 18 '22 at 17:06
  • 1
    @roninMo This sounds like something the `trailingSlash` option in `next.config.js` would solve. Does [this previous answer](https://stackoverflow.com/questions/63591544/next-js-how-to-make-links-work-with-exported-sites-when-hosted-on-aws-cloudfron/63609112#63609112) help your situation? – Mark G Apr 18 '22 at 17:46
  • I tried that but we're not allowed public access buckets on aws and you're only allowed to configure an OAI on the cdk s3OriginConfig, not a [https://docs.aws.amazon.com/cdk/api/v1/docs/@aws-cdk_aws-cloudfront.CustomOriginConfig.html](custom origin config), And I'd like to build this purely from cdk, so I'm back at square one again – roninMo Apr 21 '22 at 21:53
  • @MarkG I also just tried doing this manually and it still throws that error whenever I refresh the page. Do you have any other suggestions, what do you recommend? – roninMo Apr 22 '22 at 14:38
  • @roninMo I'm not familiar with AWS, but does [this comment thread](https://stackoverflow.com/questions/69776999/how-to-setup-cloudfront-s3-to-point-to-index-html-for-every-route/69779378#comment123349006_69779378) give you any ideas? – Mark G Apr 22 '22 at 15:36
  • It's okay I've tried a couple solutions already, but this would remove some of our websites security. Amazon buckets are no longer publically accessible, so you must connect it to a cloudfront instance to connect to the bucket url or just make the bucket publicly accessible. Cloudfront is like hosted zones that cache your website to lessen the load times across the globe, but it takes a moment to configure how its done. I've tried connecting to both the origin routes as well as the website url to s3, and got 403s on the first and 504 on the second, I'll let you know what I find in a moment – roninMo Apr 22 '22 at 15:44

0 Answers0