CloudFront CDN Setup for WordPress
Learn to set up and configure CloudFront CDN on your Pantheon WordPress site.
Pantheon's Global CDN makes it unnecessary to add a third party CDN, such as Cloudfront, for most CDN use cases. While technically possible, stacking another CDN on top of the Global CDN adds potentially unnecessary complexity. Confirm whether your needs are met by the Global CDN before considering stacking another CDN on top of it.
Amazon CloudFront is a pull-only Content Distribution Network (CDN). All incoming requests for assets on a CloudFront enabled site will go through the CDN's cached version. If an asset has expired or is missing, a fresh copy is pulled from the the origin site directly.
Before You Begin
Be sure that you:
- Have an existing WordPress site or create one.
- Set the site's connection mode to SFTP.
- Have an account with Amazon Web Services (AWS). Amazon offers free access to most of their services for the first year.
When creating an AWS account, you will have to enter credit card information. This is required, but you will not be charged unless you exceed the usage limits of their free tier.
Create an Identity and Access Management (IAM) User
Identity and Access Management (IAM) allows you to manage all user access to AWS resources and services. Before you can use S3, you need to create an IAM user.
- From your AWS Console, click Identity & Access Management.
- Click Users, then Create New Users.
- Enter a descriptive user name and click Create.
- View the new user security credentials by clicking Show User Security Credentials.
You can only view or download a user's secret access key immediately after the user has been created. This information cannot be accessed at a later point in time.
- Click Download Credentials.
Make sure you save the credentials in a secure location before leaving this page. You will need the access keys when configuring the Amazon S3 and CloudFront plugin.
Assign User Privileges
Now you need to give the new user permission to manage S3 (Amazon Simple Storage Service), because that is where assets are stored.
- From the Users page, select your new user.
- In the Permissions section, click Attach Policy.
- Select AmazonS3FullAccess and click Attach Policy.
You now have a user with full S3 access and are ready to configure WordPress.
Configure CloudFront on WordPress
There are several plugins that will help you manage cached assets in WordPress with CloudFront; however, for the sole purpose of incorporating CloudFront, this article uses the Amazon S3 and CloudFront plugin.
Install the Amazon S3 and CloudFront Plugin
There are a few different ways you can install a plugin on a Pantheon hosted WordPress site. The following methods require your site to be in SFTP Mode.
Install via Terminus CLI
Execute the following Terminus command to install and activate the Amazon S3 and CloudFront plugin:
terminus wp <site>.<env> -- plugin install amazon-s3-and-cloudfront --activate
In order for the Amazon S3 and CloudFront plugin to function, you also need to install the Amazon Web Services plugin:
terminus wp <site>.<env> -- plugin install amazon-web-services --activate
Install via the WordPress Dashboard
Access your WordPress Dashboard by appending
/wp-admin to your Development site URL and log in using your WordPress credentials.
- Click Plugins, then select Add New.
- Paste the name of the plugin in the Search Plugins box and press enter.
- Find Amazon S3 and CloudFront and click Install Now.
- Click OK to confirm the installation.
- Click Activate Plugin. You are now directed to the Plugin page of your WordPress Dashboard to install and activate the plugin.
- Click Install it, then Activate Plugin.
Configure the Amazon S3 and CloudFront Plugin
From within your WordPress Dashboard:
- Click AWS and select Settings.
You already have your AWS user credentials, as they were generated in the steps above. For security reasons, you should not provide user credentials within the Settings page of this plugin as it will not be stored securely in the site's database.
Add the provided code to the
wp-config.phpfile located at the web root of your WordPress site using SFTP (replace the stars with your user credentials):
define( 'AWS_ACCESS_KEY_ID', '********************' ); define( 'AWS_SECRET_ACCESS_KEY', '****************************************' );
Click AWS, then S3 and CloudFront from within your WordPress Dashboard.
- Create a new bucket by entering a unique name, and then click Create.
- Ensure that "Copy Files to S3" and "Rewrite File URLs" are both set to ON.
There are several other options available within this plugin for you to experiment with. Take a tour of the settings to find the best configuration for your particular use case.
Test Amazon S3
Follow these steps within your WordPress Dashboard to test CloudFront:
- Click Media and upload a new image.
- Once the image has uploaded, click on the image thumbnail to view attachment details.
- Verify the image URL.
If the URL contains your newly created S3 bucket, then you have followed all steps correctly and have successfully configured Amazon S3 services. If you still see your Pantheon Development URL, start over and repeat the previous steps.
Set up CloudFront
Now for the final step: turning on Amazon CloudFront. These combined services will automatically distribute your media globally so your pages will load fast around the world.
- Access the CloudFront home page from within your Amazon Console.
- Click Create Distribution.
- From within the Web section, click Get Started.
- In the Origin Name field, select your recently created S3 bucket. This will automatically populate the Origin ID field.
- You can use the default configurations for the other options or tweak them as you need.
- Click Create Distribution.
You're now sent to the CloudFront Distributions page. You will notice that your distribution is enabled and the status is "In Progress". The amount of time this initial setup takes depends on the size of your media library. Once complete, Amazon CloudFront will serve all of your media.
CloudFront Unable to Connect to Pantheon
If you find that CloudFront is unable to receive content from the origin (Pantheon) for HTTPS traffic, it's likely due to the Host HTTP header forwarded in the request. To resolve, switch Forward Headers behaviors setting from "All" to "None".