How to set up CloudFront CDN for WordPress Websites

In this article, we will show you how to set up CloudFront CDN for your WordPress websites.

Method 1: Using W3 Total Cache

Step 1: Setup IAM Users

First of all, you need to log into the AWS Management Console and click on Identity & Access Management to set up a new user:

1. Select “User” in the left sidebar

2. Click “Add user” button at the top of the page

3. Enter a username and make sure that “Programmatic access” ticked. After that, click the “Next: Permissions” button.

4. In the next screen, you need to choose “Attach existing policies directly” tab. Next, type “CloudFront” in the search input, it should show the results which include “CloudFrontFullAccess” policy name.
Finally, remember to tick on this result and click “Next: Review” button.

5. After reviewing everything carefully, please click “Create user” button. You should see the credentials information for the new user. It’s highly recommended that you download the CSV file because this will be your only opportunity to do it.

Step 2: Configure W3 Total Cache

Welcome back the WordPress dashboard. In this step, we will integrate AWS CloudFront with your website using W3 Total Cache.

Firstly, we need to turn on the CDN feature:

1. Under Performace menu, click General Settings
2. In CDN section, please tick Enable option for CDN
3. Click the Save all

Secondly, let’s move to CDN submenu to key in the credentials for AWS CloudFront:

1. Copy the Access Key from the credential file (you did save the above file, didn’t you? 😉 and paste it in the Access key ID field
2. Copy the Secret Key from the credential file and past it in the Secret key field
3. Press “Create distribution” and see the magic happens

Go back to AWS Console and click on the CloudFront option, you should see the new CDN distribution created. Notice that its status is “processing”, it will take sometimes for CloudFront to scan your site. Even it will take longer if your site is very large. Don’t panic and enjoy some coffee first.

Step3: Configure CNAME (optional)

Once the scanning process has done, go back to the WordPress site to configure the CNAME. This step is optional but recommended for better SEO.

First of all, you need to go to your hosting provider and create a CNAME. After that, configure the CNAME at W3 Total Cache plugin:

1. Go back to the CDN configuration screen and enter the new created CNAME
2. Click “Test CloudFront distribution” to make sure everything is fine.
3. Click “Save all settings”

One last step that’s configured CNAME for AWS CloudFront

1. Place a tick next to your distribution
2. Move to Distribution settings at the top of the page
3. Click on “Edit” button and paste your CNAME
4. “Save” and wait a moment for CloudFront to process the changes