Search code examples
amazon-web-servicesamazon-s3amazon-cloudfront

Using CloudFront to serve static contents/ files stored in the S3 is not working

I am trying to set up CloudFront and S3 to serve static contents of my website. In short, it is not working.

First I created an S3 bucket disabling all public access.

enter image description here

Then I created a CloudFront distribution choosing my S3 for origin domain.

enter image description here

The interesting thing here is that AWS console just keeps showing me the warning to update the bucket policy myself after creating the distribution (for OAC). But it does not automatically update the bucket.

So after I created the distribution, I updated the bucket's policy as follow.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipalReadWrite",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": [
                "s3:GetObject",
                "s3:PutObject"
            ],
            "Resource": "arn:aws:s3:::men-mvc-local/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::xxxx-9609-xxxx:distribution/E1L6NWB7YV5XXX"
                }
            }
        }

Then I tried to access a file in the bucket using cloudfront URL pasting the following URL in the browser.

https://dl2j5zcr9xpi4.cloudfront.net/my-image.png

I am still not seeing the image.

enter image description here

What is wrong with my configuration and how can I fix it?

Solution

  • I just run through the same progress as yours and I actually can see the picture which I put into the bucket via the distribution url.

    The following is what I copied from the CloudFront console, I discovered one difference between yours and mine, i.e., the policy version. Yours in fine, this just me wonder why the policy version of suggested policy statement from AWS is old.

    {
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": [
                "s3:GetObject",
                "s3:PutObject"
            ],
            "Resource": "arn:aws:s3:::<S3 Bucket Name>/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::<12-digits Account ID>:distribution/EC709QQQLE5VZ"
                }
            }
        }
    ]
}

    From your sharing of your policy structure, you need to change the AWS account ID in your distribution ARN into a continuous 12-digit string. You have 2 unexpected hyphens in the part of your AWS account ID in the ARN of the distribution.

    # Before
xxxx-9609-xxxx
# After
123496095678