Using WP Rocket with AWS CloudFront CDN
I recently helped out a WordPress site owner — let’s call our site owner “Joe”.
Joe had also configured a custom subdomain for his CloudFront distribution and SSL certificate using the techniques described in the two articles below.
Serve private static content from S3 with CloudFront and Origin Access Identity
How to restrict access to an S3 bucket so that your html, css, and images, are only accessible through CloudFront.
Configure a custom domain in AWS CloudFront
A five-minute walk through to demonstrate how to configure a custom domain in CloudFront, set up a certificate and…
However, after installing the “WP Rocket” plugin and updating its CDN configuration to point at the existing CloudFront distribution, Joe’s WordPress site no longer rendered correctly.
On closer inspection, CloudFront was returning “403 Forbidden” errors for all the .css and .js files. So what was the issue and how do we fix it.
First of all, what is WP Rocket?
WP Rocket (tagline: “Superior WordPress Performance”) is a full cache plugin that comes with many features [full feature list] including caching, file size reduction, minification, database optimization, and CDN integration. It’s the latter feature we’re interested in, and the official image below shows how easy it is to configure.
What was Joe’s issue and how do we fix it?
Joe’s existing CloudFront distribution had a single origin (S3) that contained the images that had been replicated from the primary server to S3 using the “WP Offload Media Lite” plugin.
WP Rocket was correctly updating all the .css and .js files to the CloudFront domain, but the CDN was returning “403 Forbidden” errors for them.
This error can be rather confusing at first — why is CloudFront giving me an Access Denied error? — but there is a simple answer and it also guides us to the solution. If a user doesn’t have s3:ListBucket permissions, then Amazon S3 returns “403 Forbidden” errors for missing objects instead of “404 Not Found” errors.
There’s two solutions;
- Set up an additional origin in the CloudFront distribution for Joe’s primary server; configure behaviours to direct .js and .css files to the new origin server; and allow the images to continue to be pulled from S3.
Joe ended up doing option 2.
As you read on, you can still follow these instructions even if you don’t already have a CloudFront distribution. You may not already use the “WP Offload Media Lite” plugin like Joe — that’s all okay — it’s there for our backstory, but this is a generic solution for configuring WP Rocket to work with CloudFront as well.
Step 1. Add multiple origins to CloudFront distribution
Our first step is to configure an additional origin to Joe’s existing CloudFront distribution. This will be for his primary Wordpress server.
Head to the “Origins and Origin Groups” tab and click on “Create Origin”. Set up the origin according to your WordPress server — while the details will be specific to your own set up, I’d anticipate that you would need to change the Origin Protocol Policy to “HTTPS Only”.
You’ll now have two Origins. For the purpose of demonstration, example.com is representing S3, and example2.com is representing the WordPress server.
Step 2. Configure Behaviors for the different paths
Now head to the “Behaviors” tab. You’ll find an existing default behaviour that is pointing all hits to the first Origin — for Joe, this was his S3 origin.
Select “Create Behavior”, leave all the defaults in place and set these values;
*.jsfor the Path Pattern.
- select the Origin that corresponds to the primary WordPress server.
*.css paths and you’ll end up with three Behaviors.
And that’s it.
Gotchas. What might go wrong?
One possible consideration is continuing to serve cached versions of files after WordPress upgrades. Which isn’t good. Two solutions exist for this problem;
- Use Invalidations in CloudFront to clear the cache after upgrades.
- Update the Cache Policy to use Query String parameters — conveniently, WordPress provides a
ver=x.x.xparameter that helps here.
To implement #2, on the Behavior update to “Use legacy cache settings”.
Under “Query String Forwarding and Caching” select “Forward all, cache based on whitelist” and type in
A note from the author
Thank you for reading this article — I hope you found it useful and can follow along to speed up your WordPress site using WP Rocket and CloudFront.