Leveraging CloudFront with your WordPress Site

Leveraging CloudFront with your WordPress Site

Using CloudFront to distribute web content that is managed by WordPress is the holy grail. It’s not a simple or easy task, but the results are worth it. WordPress has several parts that need to be configured differently in CloudFront.

WordPress is an amazing piece of technology. It enables you and I to manage website content with ease.

WordPress is an online, open source website creation tool written in PHP. But in non-geek speak, it’s probably the easiest and most powerful blogging and website content management system (or CMS) in existence today.

CloudFront is another amazing piece of technology. It enables you and I to build globally optimized websites for an extremely affordable price.

Amazon CloudFront is a web service that speeds up distribution of your static and dynamic web content, such as .html, .css, .php, and image files, to your users. CloudFront delivers your content through a worldwide network of data centers called edge locations. When a user requests content that you’re serving with CloudFront, the user is routed to the edge location that provides the lowest latency (time delay), so that content is delivered with the best possible performance. If the content is already in the edge location with the lowest latency, CloudFront delivers it immediately. If the content is not in that edge location, CloudFront retrieves it from an Amazon S3 bucket or an HTTP server (for example, a web server) that you have identified as the source for the definitive version of your content.

There are three main part components to CloudFront you should understand; distribution, origin, and behavior.

  • Distribution: an endpoint you can send traffic to. You’ll point your domain to the distribution via DNS.
  • Origin: where your server resides. This is the hostname serving your WordPress website and can be in AWS or not. Note that you may need a new way of referring to this server as your main domain will be pointing to the CloudFront distribution and you don’t want to point it to itself.
  • Behavior: a URL pattern and its associated caching behavior. This is where we can control how CloudFront handles Headers, Cookies, and Query strings.

Now lets look at the WordPress structure. We need to understand what each component does, so we can then categorize resources into two methodologies. First what components can be cached. Second what components need to be passed back to origin.

WordPress has several resources (files/folders) to consider (as of WordPress 4.8.2):

wp-admin/* The Dashboard (wp-admin) is the first screen you see when you log into the administration area of your blog. The instructions from this guide are referring to the WP Admin dashboard.
wp-activate.php Confirms that the activation key that is sent in an email after a user signs up for a new site matches the key for that user and then displays confirmation.
wp-comments-post.php This is part of the WordPress API.
wp-config.php This file contains your website’s base configuration details, such as database connection information.
wp-cron.php A pseudo-CRON daemon for scheduling WordPress tasks.
wp-login.php WordPress User Page.
wp-settings.php Contains WordPress vars and included files.
wp-signup.php This file is for user signups.
wp-trackback.php Handle Trackbacks and Pingbacks Sent to WordPress
xmlrpc.php XML-RPC protocol support for WordPress
wp-content/* Most of the static assets and theme files will likely be here
Default (*) Everything Else.

We will need to create a CloudFront “behavior” for each one of these resources. At the AWS Console we will need to create a Web CloudFront distribution.

  1. Choose Get Started in the Select a delivery method for your content pane, under Web.
  2. Input the Origin Domain Name, this should be a fully qualified domain name. IP addresses are not allowed.
  3. Choose an Origin Protocol Policy, if you aren’t sure select HTTP Only.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.