How To Set Up Amazon CloudFront With W3 Total Cache/WP Super Cache

Did you successfully set up CloudFront with W3TC or WP Super Cache? Please let us know in the comments.If you want your user to only have access to CloudFront, and you only want it to be able to access and modify an existing distribution. Then that’s the input you should give it.
W3TC Settings - How To Set Up CloudFront With W3 Total Cache or WP Super Cache

1. Sign Up For AWS

Want to set up a CDN with your WordPress site but not sure about Max CDN? In love with Amazon Web Services? In this tutorial we cover exactly how to set up Amazon Cloudfront with the W3 Total Cache and the WP Super Cache plugins.
Then all you need to do is to attach the policy to the user you created.

2. Set Up A Cloudfront Distribution

Basically, that’s all the setup you need for your CloudFront distribution, unless you want the url of your files to look fancy.
Head back to your WP dashboard, and go to W3TC general settings. Scroll down to CDN, then select Amazon Cloudfront.
Web Distribution - How To Set Up CloudFront With W3 Total Cache or WP Super Cache
If you want to add a CNAME to make the url of the files supplied by the CDN look prettier, you can do that. But you will also need to set it up from your DNS dashboard or within your server panel, for example cPanel.
This ensures that files are added to CloudFront as they are uploaded or updated, compared to only being pulled into CF the first time they are requested from your website.
If you refresh your website, you should now see that your browser is pulling files from the CDN. Confirm that it works by opening an image in a new tab and checking that the url shows that it is supplied by the CDN.
Set Up CloudFront With WP Super Cache
After you have installed WP Super Cache, all you need to do is head over to the WP Super Cache settings, and copy and paste in the CloudFront distributon URL. Then enable the CDN, and save settings.
AWS Cloudfront - How To Set Up CloudFront With W3 Total Cache or WP Super Cache
Now you should create an appropriate policy for your new IAM user. You can do this using the AWS policy generator.
Again you can check this by opening an image in a new tab and looking at the url.
The first thing you need to do, is to sign up for an Amazon Web Services account. Simply go to their website and sign up for an account. The process is completely straight forward, pretty much identical to any other online sign up process for an online paid service.

3. Set Up CloudFront With W3 Total Cache (Way 1)

So while it might sound complicated at first, it’s basically mandatory for any WordPress site owner to follow these steps, and set up CloudFront as a CDN for their site. If you haven’t signed up for AWS yet, you’ll even get the first year for free(might not last a full year if you have a fair volume of visitors going to your site.)
If you don’t mind giving full access to CloudFront with the credentials, you don’t actually need to create a new policy. You can use the pre-existing CloudFrontFullAccess policy for your user.
Attach Policy AWS IAM - How To Set Up CloudFront With W3 Total Cache or WP Super Cache
Select Generic Mirror and save all settings.
Create CloudFront Distribution - How To Set Up CloudFront With W3 Total Cache or WP Super Cache Head over to your AWS console. Click through to ‘Identity & Access Management’ under the ‘Security & Identity’ section.
The first thing you need to do (after installing the plugin if you have not already) is head over to the W3TC’s general settings.
Now look at the policy overview, search for your policy, select it and click attach.
Now head back to your AWS console, and look at your CloudFront distributions. Copy the entire domain name for your distribution.

3.5 Set Up CloudFront With W3TC (Way #2)

The difference is that W3TC also supports an integrated approach that makes use of the AWS API making it a little bit more flexible, compared to just adding it as a mirror and letting CloudFront do it’s own work getting the files.
Now you need to click the ‘Get Started’ button under the Web section, not the RTMP section. RTMP is for creating a CDN for streaming media
While it may look like setting it up with WP Super Cache is a lot easier in this tutorial, setting it up as a generic mirror is only one step longer with W3TC.
Setting up a CDN is one of the biggest wins for improving the loading speed of your website. If you have a lot of visitors from around the globe, you can take off entire seconds of load time for people who are very far away from your normal server.
Now you can take the user credentials and use them with W3TC.
AWS IAM
Now click through to create distribution.
The great thing is, if you’re signing up for the first time, you’re eligible for 1 full year of free service, including CloudFront, up to a point. For large volume sites, you might burn through it quickly, but for smaller sites it might last you the full year.
Before you get started with either plugin you will need to sign up for an AWS account and create a CloudFront distribution.
Cloudfront Distributions
If you are willing to put a little more work into it to set it up properly, this is the way to go.
Refresh your page, and you should be able to see that your site is pulling some content from the CDN instead of your normal server.
Now all you need to do, is go back into the W3TC settings inside the WordPress admin dashboard, this time specifically for CDN, and copy and paste the distribution’s URL and save the settings.
And you’ve managed to set up CloudFront with W3TC in the recommended way.
This is the quick and easy way to set up CloudFront with W3TC. If you want to do it the recommended way, you will need to set up IAM credentials in AWS.
Like previously mentioned, there are more than one way to set up AWS CF with W3TC. The second way makes use of the AWS IAM credentials to communicate back and forth betwenn AWS and your site via an API.
W3TC Settings Generic - How To Set Up CloudFront With W3 Total Cache or WP Super Cache
Using a CDN is a great way to cut down the loading speed of your WordPress site around the globe, and CloudFront is one of the cheapest and best all-round options out there.
Create CloudFront Distribution - How To Set Up CloudFront With W3 Total Cache or WP Super Cache
Now let’s move on to how to integrate CloudFront easily with the WordPress plugin W3 Total Cache. There are two ways to do so. The first way utilizes the generic mirror function, and is extremely easy to set up. The second option uses W3TC’s custom settings for CloudFront, and is a little bit more sophisticated and takes more time to set up.
After you’ve signed up, log into ‘your console’ on AWS. Then, click through to CloudFront under ‘Storage & Content Delivery’.

3.(Alternative Plugin) Set Up CloudFront With WP Super Cache

W3TC CF Settings - How To Set Up CloudFront With W3 Total Cache or WP Super Cache
Now just copy an paste in the first part of the distribution’s URL that is before cloudfront.net.
Once you’re there, click through to ‘Create User’.
If you prefer using the WP Super Cache plugin for your WordPress projects, fear not. You can still easily implement CloudFront with your plugin of choice.
If you do want the custom policy, finish generating it and create a new policy called cloudfront-user or something else.
All you need to do here, is simply enter the url of your site. Cloudfront will then automatically save files from your site onto the CDN whenever they are requested for the first time.

Conclusion

AWS IAM New Policy - How To Set Up CloudFront With W3 Total Cache or WP Super Cache
AWS IAM New User
Now head over to the specific CDN settings, and enter the access and secret keys for the IAM user you created earlier. This will give W3TC access to your CloudFront distribution via API.

Posted by WordPress Guru