access denied on CloudFront website after setting bucketRegion

Describe the bug When I set the bucketRegion to ap-southeast-2, I got an access denied page when I visited the CloudFront URL.

To Reproduce Steps to reproduce the behavior:

1. Run npx create-next-app and change directory into the project folder
2. Add serverless.yml to the project folder
3. Run sls
4. Wait for the AWS CloudFront console to show the new distribution has finished deploying
5. Visit appUrl printed in terminal
6. Web browser shows a CloudFront access denied error page

serverless.yml contents:

nextTest:
  component: serverless-next.js
  inputs:
    bucketRegion: ap-southeast-2

Expected behavior The NextJS sample website should appear in the browser.

Work around I used the AWS CloudFront console to change the distribution origin from:

<bucket-name>.s3.amazonaws.com

to:

<bucket-name>.s3.ap-southeast-2.amazonaws.com

then waited for the distribution to deploy, and the sample website now comes up fine in the browser. The AWS docs also say this error clears by itself if you wait 24 hours after creating a new distribution pointing to an S3 bucket in a custom region.

The serverless-next.js README says 307 redirects may happen when you use a bucket with a different region, but the README doesn’t say anything about access denied errors happening in the first 24 hours.

[yellowtailfan]

Great, that does seem to be including the region in the CloudFront origin now, thanks!

[danielcondemarin]

@yellowtailfan this should be fixed in @sls-next/serverless-component@1.16.0-alpha.0. Could you try that? I’ll look at promoting it to stable this week.