Amplify publish causes AccessDenied error

Question

I deploy a simple web app to S3 via amplify publish. The hosting has Cloudfront enabled (I selected the PROD environment in amplify while setting up hosting) and I'm working in the eu-central-1 region. But whenever I try to access the Cloudfront URL, I receive an AccessDenied error.

I followed a tutorial at https://medium.com/quasar-framework/creating-a-quasar-framework-application-with-aws-amplify-services-part-1-4-9a795f38e16d an the only thing I did differently was the region (tutorial uses us-east-1 while I use eu-central-1).

The config of S3 and Cloudfront was done by amplify and so should be working in theory:

Cloudfront:

Origin Domain Name or Path: quasar-demo-hosting-bucket-dev.s3-eu-central-1.amazonaws.com (originally it was without the eu-central-1, but I added it manually after it didn't work).
Origin ID: hostingS3Bucket
Origin Type: S3 Origin

S3 Bucket Policy:

{
    "Version": "2012-10-17",
    "Id": "MyPolicy",
    "Statement": [
        {
            "Sid": "APIReadForGetBucketObjects",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity ********"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::quasar-demo-hosting-bucket-dev/*"
        }
    ]
}

Research showed me that Cloudfront can have temporary trouble to access S3 buckets in other regions. But I manually added the region to the origin in Cloudfront AND I have waited for 24h. I still get the "access denied".

I suspect this has something to do with the S3 bucket not being in the default us-east-1 region and amplify not setting up Cloudfront correctly in that case.

How can I get amplify to set the S3 bucket and Cloudfront up correctly so that I can access my website through the Cloudfront URL?

could you please share your configuration of S3 and Cloudfront distribution. — Raj Paliwal
I added the information to the question @RajPaliwal. Everything was automatically configured that way via amplify. The only thing I changed (after it didn't work) was to add the eu-central-1 part to the S3 path configured in Cloudfront. — morgler

Raj Paliwal Raj Paliwal · Accepted Answer · 2020-01-21T10:53:06

Thanks for the additional information.

your S3 Bucket Policy looks Ok.

Regarding Origin Domain name or Path, It is always S3 bucket appears in the drop down so no need to update it with region
However there is one setting missing in your Cloudfront Origin.
you need to select Restrict Bucket access to Yes

As per AWS documentation
If you want to require that users always access your Amazon S3 content using CloudFront URLs, not Amazon S3 URLs, click Yes. This is useful when you are using signed URLs or signed cookies to restrict access to your content. In the Help, see "Serving Private Content through CloudFront
Now create new Identity or select Existing Identity
Click on Create button to save Origin.

Amplify publish causes AccessDenied error

3 Answers