AWS CloudFront programmatic access results in AccessDenied with no explanation

user_10029354 0
Viewed 108

I am following this guide here to setup a static nuxtjs site on aws s3 with cloudfront cdn.

Every step of the guide has been successful. I am able to access my site's test image from the url. However, the final step of the guide for getting programmatic access to the CloudFront distribution is giving me the following error:

enter image description here

I have verified that the policy for the programmatic user is accurate:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:ListBucket"
            ],
            "Resource": [
                "arn:aws:s3:::bucket"
            ]
        },
        {
            "Effect": "Allow",
            "Action": [
                "s3:PutObject",
                "s3:PutObjectAcl",
                "s3:GetObject",
                "s3:GetObjectAcl",
                "s3:DeleteObject",
                "s3:ListMultipartUploadParts",
                "s3:AbortMultipartUpload"
            ],
            "Resource": [
                "arn:aws:s3:::bucket/*"
            ]
        },
        {
            "Effect": "Allow",
            "Action": [
                "cloudfront:CreateInvalidation",
                "cloudfront:GetInvalidation",
                "cloudfront:ListInvalidations",
                "cloudfront:UnknownOperation"
            ],
            "Resource": "*"
        }
    ]
}

Why would I get AccessDenied? I even tried opening up the actions to * for CloudFront/S3 and still got rejected for it. I have verified that my secret/access key matches the programmatic user with the policy as well.

Is there some way for me to get a more specific error message about what is going wrong?

UPDATE: The error appears to occur during one of the following operations in the gulpfile:

g = g.pipe(cloudfront(config));

// create a cache file to speed up consecutive uploads
g = g.pipe(publisher.cache());

// print upload updates to console
g = g.pipe(awspublish.reporter());

I suppose I'll comb through the aws publisher plugin looking for them. Perhaps the guide is outdated and forgot a permission.

nuxt.js gulp amazon-cloudfront amazon-web-services amazon-s3
1 Answers

Solved it. The guide for creating CDN/S3 that the NuxtJS guide relies on has you create a private bucket but the settings in their gulpfile are for a public-read bucket.

To solve this error you must simply add:

'x-amz-acl': 'private'

To the headers in your gulpfile.

Edit: I will also say that the article's reliance on another article is a source of confusion. The other article is for setting up a private bucket whose content can be accessed via CloudFront like a cdn. But I found it easier to just use the bucket specific options for hosting a static site (making it public).

user_100293540
Related