Does not work with Cloudfront at all

@gecko_guy here are a couple helpful resources – at least they helped me make sense of things:

1) https://www.elegantthemes.com/blog/tips-tricks/how-to-use-amazon-s3-and-cloudfront-with-wordpress
Explains the groups/administrative access for cloudfrount + S3

2) https://www.webdesignerdepot.com/2013/08/how-to-take-wordpress-to-the-cloud-with-amazon-s3-cloudfront/
That tutorial gives you an explanation of setting up WP Supercache with Cloudfront – also gives insight for setup of access groups.

Tim thanks.

I completely forgot about this frustrated outburst.

I have got it working perfectly now.

Where I had gone wrong was to specify the folder path in the CF settings.

Thanks for chipping in though, hopefully that info might help some other poor soul in their quest for a faster site!

gecho_guy:

Can you explain to me how you setup CloudFront? I am having that exact same problem. No documentation ??

Hi,

You need to have some familiarity with AWS because a lot of the config is done in the AWS console.

The 3 places you will need to set things up is s3, Cloudfront, and IAM.

Note that in the examples below you will need to change the policy ID’s, bucket name etc to your own AWS names.

Step 1:

Create S3 Bucket.

Step 2:

Set up user in IAM

Step 3:

Create inline IAM policy for the user (EXAMPLE below):

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "s3:*",
            "Resource": [
                "arn:aws:s3:::bucket-name*"
            ]
        }
    ]
}

Step 4:

Create Cloudfront Distribution

Step 5:

Configure distribution.

This is tricky if you are unfamiliar with Cloudfront, but the main things are:

a). Do NOT select an origin path (leave it blank).

b). You are not required to restrict bucket access to the CF formation only, but if you do not, then the images will be accessible via the S3 bucket address in ADDITION TO the Cloudfront uri. i.e, duplicate publicly accessible file locations.

c). If you choose not to restrict access to the CF address only, you do not need the bucket policy in Step 6, but you will need to make the folder that contains the files public.

d). If you choose to restrict access to Cloudfront only, and have created a bucket policy, the folder and the bucket must NOT be made public.

e). If you chose to restrict access, and have created a bucket policy, then in Cloudfront be sure to select “NO, I will update permissions”.

Step 6:

Again – NOTE – step 6 is only required if you are using the restrict bucket option to avoid duplicate file locations.

Go back to S3 and create a Bucket Policy (EXAMPLE BELOW) – also see the notes above in step 5. (note that the Origin Access ID is the one you created, or which got generated for you when you created the Cloudfront instance).

{
	"Version": "2012-10-17",
	"Id": "PolicyForCloudFrontPrivateContent",
	"Statement": [
		{
			"Sid": " Grant a CloudFront Origin Identity access to support private content",
			"Effect": "Allow",
			"Principal": {
				"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity A1BCDEFG1234"
			},
			"Action": "s3:GetObject",
			"Resource": "arn:aws:s3:::bucket-name/*"
		}
	]
}

Step 7.

Leave the CNAME options to last (then just set it up like any CNAME config in your server before adding the CNAME to cloudfront).

Remember to be patient and allow enough time for the formation of the Cloudfront, as well as propagation of the DNS if you use a custom CNAME.

Step 8:

In the plugin settings, ensure you have inserted the Cloudfront address into the field called “CloudFront or custom domain”.

If you are using a custom CNAME, use that, and if you are using the default then use the Cloudfront domain name which is automatically generated at the time of the cloud formation.

Step 9:

In the plugin settings, check that the following info is correct:

Path
By default the path is the same as your local WordPress files: wp-content/uploads/

If you have made a different path, then switch the option on and change it accordingly.

——————————————————————–

You do not need to follow the steps in this exact order.

That’s it. I may have missed something (hope not), but you will have to read the AWS documentation in that case as I don’t have time to write a very detailed set of instructions. It is not usually a good idea to blindly follow steps for a process such as this without understanding all of the implications anyway, because it can lead to security issues.

Hopefully you will find the missing pieces to your puzzle in this reply though. Once it is set up, it works perfectly.

Thanks for the great response gecko_guy. I have a question though.

Why leave “origin” empty, shouldn’t I choose the S3 bucket I created as the origin?

Thanks.

Hi there,

You select the bucket from the dropdown in the Origin Domain Name, leave the Origin Path empty.

The origin path is specified in the Bucket Policy.

Note there are other possible ways to configure Cloudfront, but this method is the one which worked for me with the plugin.

For the sake of simplicity, I’d recommend you create a bucket specifically for each Cloundfront instance, rather than trying to configure an existing bucket that contains other unrelated objects.

If you have more than one site, then create a unique bucket for each site, and avoid using a bucket that you already use for something else.

eg, if you have created a bucket for the site and it contains other things such as backups, or anything else, then don’t use that bucket, make a new one specifically to hold the images that will be served from the CDN.

Thanks and cheers. You are awesome.

You’re welcome ??

If you have further questions please open a new support ticket as this one is already marked as resolved, and I am going to unsubscribe from from it now.