My original go at setting up CloudFront as a CDN did not go very well. At the end of the last post on setting up CloudFront and W3 Total Cache, it was working (via WP Rocket), but when I changed the theme, things went back to not using the CDN. In this post, I will look at setting up Amazon S3 and using CloudFront through that instead. Hopefully, it should be a bit more stable and less likely to break.
What is Amazon S3?
It’s for object storage, as simple as that. So we can throw lots of images at it, and other things too, like CSS.
Under the Free Tier, we can get:
- 5 GB of Standard Storage
- 20,000 Get Requests
- 2,000 Put Requests
I need to make some changes though.
At the moment, the configuration is an Elastic Load Balancer in front of a WordPress instance, which uses (though not successfully) CloudFront as the CDN. At the end of this post, the idea will be that we use Amazon S3 as storage, which then pushes the objects into CloudFront.
The first step is to create an S3 bucket.
Creating an Amazon S3 bucket
We start by navigating to the Amazon S3 option within the AWS console. and clicking on “Create bucket”
In the first page that opens, we need to give it a name and select the region. The name must be unique across S3, as someone else was already using “aws-s3” I had to use something else:
On the properties page, just click next.
Next, we have to set the permissions:
I set mine to have public access, not sure if this is right, I guess so, otherwise no-one will be able to access the images, but on the other hand, the images should be served by CloudFront… Worth testing. Click Next.
Review and create the bucket:
I have a bucket
Setting up S3 and CloudFront
I need to create another CloudFront origin. I already have one from my previous attempt, and if I were to repeat this process, I would probably delete the other one first, the reason for this will become apparent later on.
Start by creating the origin:
Select the S3 bucket created earlier:
Setting up S3 and WordPress
I am using the Offload S3 plugin here. It already has my account details set up, I just need to tell it which bucket to access:
Make sure you save your settings.
At this point, I am getting 404 errors when trying to see the images (also thumbnails are not working in WordPress). This would seem to indicate that the data is not making its way over to CloudFront. Either this is a permissions issue or an issue with pushing or pulling between S3 and CloudFront.
The first step I took was to look at the IAM permissions for the w3-cf group:
Select the appropriate policy and click on “Attach Policy”.
However, it is still not working. In the S3 console, I can see the objects being added, and browsing to the object in S3 I can see the URL, such as “https://aws-802101-s3.s3.amazonaws.com/wp-content/uploads/2018/06/14115559/aws-s3-cloudfront-1.png”. Finding the same object in CloudFront and trying to open it in the browser, I get the following error (I xx’d out a few bits):
<Error> <Code>NoSuchKey</Code> <Message>The specified key does not exist.</Message> <Key> wp-content/uploads/2018/06/14115559/aws-s3-cloudfront-1.png </Key> <RequestId>ED6xxxxxxxxx</RequestId> <HostId> aTgpzRjarUuSgn43vgHXxxxxxxxxxxxxEZz18GI0vxK5HGbWnLI5+eTk= </HostId> </Error>
Finally, things seem to be working properly! Would have been a bit quicker if not for the first behavior policy in CloudFront.
Still no cigar
- Disable any other CDN integration you have!
- Create the S3 bucket
- Assign your IAM user (you may need to create one first) full access to S3 (and CloudFront)
- Create a CloudFront distribution, using the Origin Domain Name and Origin Path as shown in your S3 bucket (upload an image or something to get the details).
- Make sure that you have an Origin Access Identity set up to link S3 and CloudFront.
- Make sure you have a Behavior rule set up in CloudFront (easy if this is your only distribution or a distribution with only one Origin).
- Set up Offload S3 in WordPress