CloudFront with origin pull and WP Super Cache

Using AWS CloudFront as a CDN (content delivery network) for your site can be a good way of speeding things up.

CloudFront has support for origin pull (this way, there’s no need to sync files, they’re fetched on demand from the web server). Configuring this can be a bit tricky, since the AWS web interface only supports AWS S3 buckets to be configured as backends.

To get a distribution with origin pull up and running we need to do it manually. I’m assuming you’re working on some kind of unix/linux system (OS X for example). First of all, you need an AWS account with CloudFront. If you don’t already have one, get it here.

Create a file named .aws-secrets containing your AWS Access Keys (these can be found in the AWS Portal under Account -> Security Credentials), in the following format.

%awsSecretAccessKeys = (
    "my-aws-account" => {
        id => "ID goes here",
        key => "Key goes here",
    },
);

Create a XML file containing the settings of the new distribution, name it cf.xml.

<DistributionConfig xmlns="http://cloudfront.amazonaws.com/doc/2010-11-01/">
<CustomOrigin>
    <DNSName>example.com</DNSName>
    <HTTPPort>80</HTTPPort>
    <OriginProtocolPolicy>http-only</OriginProtocolPolicy>
</CustomOrigin>
<CallerReference>1234</CallerReference>
<CNAME>cdn.example.com</CNAME>
<Comment/>
<Enabled>true</Enabled>
<DefaultRootObject>index.php</DefaultRootObject>
</DistributionConfig>

Replace example.com with your domain. CNAMES can also be added and changed later via the AWS Management Console.

Download the cfcurl.pl script.

Execute the following command.

cfcurl.pl --keyname my-aws-account -- -X POST -H "Content-Type: text/xml; charset=UTF-8" --upload-file cf.xml https://cloudfront.amazonaws.com/2010-11-01/distribution

Point the cdn domain you entered in the cf.xml file to the domain returned in the block with a CNAME. You can also get this name from the AWS Management Console.

If you don’t already have WP Super Cache installed, install it now. Then go to Settings -> WP Super Cache -> CDN and enter the cdn domain name as the Off-site URL and check Enable CDN Support.

Clean out the existing cache and visit your front page, content like css, javascript and images should now be loaded from the CDN.