Documentation

Use the Same CloudFront Custom Domain with WP Offload Media and the Assets Pull Addon

Last updated September 25, 2018

If you use WP Offload Media with CloudFront and a custom domain with HTTPS, then you might want to use the same domain and CloudFront distribution for the Assets Pull addon as well to serve your site’s assets.

Using the same domain will have a performance benefit over two DNS entries, as there will be only one open connection which will utilize the multiplexing feature of HTTP/2 to make requests asynchronously.

This guide assumes you have already set up a CloudFront distribution with a custom domain running on HTTPS. The only origin of the distribution is currently pointing to the S3 bucket. The article covers setting up one CloudFront distribution to serve both your media library and site assets with the following steps:

  1. Creating a custom origin to serve the assets
  2. Edit the default cache behaviour of the distribution
  3. Create a cache behaviour for the S3 origin

Creating a Custom origin to Serve the Assets

First create a new origin that will serve all the assets from the site as part of the Assets Pull addon. Edit your CloudFront distribution and select the Origins tab and click Create Origin. Set the Origin Domain Name to the domain of your site and set the Origin Protocol Policy to ‘Match Viewer’. Leave the other settings as they are:

Create custom origin for serving assets

Edit the Default Cache Behaviour of the Distribution

Next we need to edit the default behaviour for the distribution to point to the new origin. Select the Behavious tab, select the existing behaviour and click the Edit button:

Existing cache behaviour

Change the Origin to the new Custom origin we just created and ensure you turn on Compress Objects Automatically and set Query String Forwarding and Caching to ‘Forward all, cache based on all’.

Edit cache bevaviour to point to custom origin

Create a Cache Behaviour for the S3 Origin

Next add a new behaviour for the S3 origin for serving the site’s media files.

  1. Click Create Behaviour
  2. Set Origin as the S3 origin
  3. Edit the Path Pattern to match the uploads directory of your site with a wildcard for all files under that path, eg. wp-content/uploads/*
  4. Leave all the other settings as they are

Add cache behaviour for S3 origin

Your behaviours should look like this:

Complete behaviours for distribution