Earlier this year, I wrote about the benefits of using Cloudflare with WordPress. I was happy with the results of my setup but I wanted to continue experimenting. Since I was familiar with Amazon Web Service’s platform, I decided to take a look at Cloudfront and see if I could make it work with my setup.

Much like Cloudflare, Cloudfront is a global Content Delivery Network service that can deliver your content with low latency and high transfer speeds. It’s secure, cost effective, and it’s connected to hundreds of end-user ISPs which makes it blazingly fast.

My setup

  • A WordPress instance deployed on a Google Compute Engine virtual machine
  • A domain (thomaspetitjean.com) pointing to Cloudflare for caching and minification
  • AWS S3 & Cloudfront for image hosting and delivery. NB: My WordPress instance is still on GCP Compute Engine, however my assets are being duplicated on AWS S3 and served through Cloudfront for performance reasons (please refer to my note at the end of this post)

Requirements for setup

  • Have admin rights on a live wordpress website
  • Have access to the website’s server (via ftp, sftp, or ssh)
  • Have an AWS account

1. [AWS] Identity & Access Management

  • Go to your AWS console
  • Click on “IAM”
  • Click on “Add user”
  • Create a user and give it the AmazonS3FullAccess policy in the policy section (see below)
AWS IAM - Policies
AWS IAM – Policies
  • Copy the user security credentials at the end. You’ll need those credentials when setting up the WordPress plugin

2. [AWS] S3

  • Go to your AWS console
  • Click on “S3”
  • Create a new bucket and use the default configuration

3. [AWS] Cloudfront

Now that you have your S3 bucket ready, you have to link it to a new Cloudfront distribution.

  • Go to your AWS console
  • Click on “Cloudfront”
  • Create a new distribution
  • Click on the web option
  • Enter your S3 origin – it should appear when you click on the input field
  • Leave all the other fields as they are unless you have a special configuration

4. [Wordpress] Plugins

Install the following plugins via your admin panel:

5. [Wordpress] wp-config

Get your AWS_ACCESS_KEY_ID & your AWS_SECRET_ACCESS_KEY credentials from step 1. Those credentials were given to you when you created your IAM user on AWS.

Once you have them, copy them in your wp-config file as outlined in the AWS plugin page (see below) and push wp-config back to your server.

define( ‘AWS_ACCESS_KEY_ID’, ‘********************’ );
define( ‘AWS_SECRET_ACCESS_KEY’, ‘****************************************’ );

AWS WordPress plugin
AWS WordPress plugin

6. [Wordpress] Plugins

Go to the AWS plugin page and check that your credentials are being used and then go to the WP Offload S3 Lite setup page and select your S3 bucket.

7. Testing

Check the WP Offload S3 Lite config page and make sure all the parameters look right for your setup.

Upload an image to your image library and make sure the asset’s URL is an AWS URL.

To sum up

  • Cloudflare handles code minification and caching of the source code
  • S3 & Cloudfront handle image hosting and delivery
  • As a result, Google Compute Engine is now mainly used for server-side rendering = lower number of server requests, reduced CPU load

The purpose of this setup is mainly for experimentation but I still think it results in better performance (this is only an assumption for now).

My Compute Engine VM contains all the application files as well as the website database. Cloudflare acts as the intermediary between the client and the host and will serve all the files that are in its cache until they are modified on the host. When the admin (me) updates an asset on the host, Cloudflare will bust its cache and refer back to the host to get a newer version of the asset (either automatically or manually, depending upon your configuration).

With the Cloudfront setup described in this post, my images are hosted on an AWS S3 bucket and are delivered to clients through a Cloudfront distribution. The advantage I see in having this is that I have a dedicated media server which is 1) optimized for speed and 2) coupled to one of the world’s biggest CDN.

The Lite version of Offload S3 only lets you copy your assets to S3 ‘as you go’. If you want to push all of your media library you can have a look at the paid version of the Offload S3 plugin.

Note: The Offload S3 Lite plugin currently only lets me upload my assets to S3. I am not able to upload my assets to my host and then have them copied onto S3. I’d prefer to have a copy of all my assets on my host in case I want to move them somewhere else in the future. I’m working on the issue; I’ll post an update soon.