How to set up CloudFront CDN for WordPress within 10 minutes?

Set up CloudFront CDN for WordPress within 10 minutes by following the steps mentioned in this article. Here, you will learn how to set up CloudFront for WordPress using some of the popular cache plugins available for WordPress i.e, WP Rocket, WP Super Cache and W3 Total Cache . But, before diving directly into the step by step guide on how to set up CloudFront CDN for WordPress, let’s take a peek onto What is CloudFront CDN? Why you Should use one of the CDN? And, Is Amazon CloudFront CDN Free?

You might have heard that CDN will make a great positive impact on the loading speed of the site as content or data is distributed across different data centers located at multiple geographical locations. As Amazon Cloud service is very popular you might have heard about Amazon CloudFront CDN as well. In the market, there are many CDN that might market themselves as free CDN service providers. But, those free CDN are with limited features like, mainly they exclude the main requirements of hosting the bigger files i.e, Images. Yes, you have read it right, they don’t offer image hosting services on their plan.

But, this is not the case with Amazon CloudFront CDN, in AWS Free Usage Tier, it hosts images as well. But, the set up is not the piece of a cake. So, to make things easier for you and provide you the step by step guide on how to set up CloudFront CDN for WordPress, we are sharing this article.

So, without any delay, let’s implement this almost free CDN for WordPress.

How to Set Up CloudFront CDN for WordPress?

Step 1: Create an AWS Account

The very first thing you need to do before getting started is creating an AWS account. This step is pretty easy as you just need to fill some forms just like most of the websites out there. To create an AWS account, go to https://aws.amazon.com/free and create an account there.

At first fill email, password, and the account name you want to have. Next, you need to select account type,( ‘personal‘ recommended if it is not for professional purpose) fill your personal details like name, phone number, address, city, and state. And, at last, you need to provide the credit card details. Don’t worry it will charge you around $1 only, for just the verification purpose, which is almost like free.

After filling all the details, a confirmation email will be sent to the entered email address. You must verify this email address before making any further process.

Step 2: Create CloudFront Distributions

After verifying and successfully create an AWS account, log in to the AWS console and find “CloudFront” services by entering the name on the search box. Click on the “CloudFront” and then click on “Create Distribution“.

Step 2.1: Select “Web” as CloudFront Delivery Method

After clicking on create a distribution, you will be asked to select the delivery method. And, you have two options i.e, Web or RTMP. As you can see on the screenshot as well that CloudFront is discontinuing RTMP from December 31, it’s highly recommended that you pick “Web” as Cloudfront Delivery Method.

Step 2.2: Enter the origin domain name and select the appropriate protocol policy (HTTP or HTTPS)

After that, you will be provided a long-form which might look a little scary and confusing at first. But don’t worry, here we are to guide you through this.

First, let’s take a look at Origin Settings, here you need to enter your domain name in the origin domain name. This name should be the name of the domain from where you want the content to be fetched. So, for example, if your site is noobietech.com you need to enter noobietech.com. In my case, all non-www traffic will be ultimately redirected to the www version, so I will use “www.noobietech.com” as shown in the screenshot. Also, I will select “https” as the “Origin Protocol Policy“. It’s just about how you want CloudFront to read content from the original domain name.

Next, the important thing is the “Viewer Protocol Policy” under “Default Cache Behavior Settings“, here it is recommended to select “Redirect HTTP to HTTPS“. You can select all other settings as showing in the images or you can pick as per your needs. Such as if you want to allow more HTTP methods other than getting and HEAD, you need to pick respective options.

One thing I would like you to suggest is to enable “Compress Objects Automatically“, as it will automatically compress content for web requests that include Accept-Encoding: gzip in the request header. 

Leave, other fields as default and click on “Create Distribution“.

On creating distribution, it will add a new row on the CloudFront Distribution Table with status “In Progress” and the state as “Enabled“. , 

Step 3: Set Up CloudFront CDN for WordPress

After some minutes, the status will change from “In Progress” to “Deployed“. Now, its time to set up CloudFront CDN for WordPress, and for this, we first need to login to WordPress Dashboard.

Step 3.1: Set up CloudFront CDN for WordPress using wp-rocket

To set up CloudFront CDN for WordPress using wp-rocket, you need to go to Settings ➜ WP Rocket ➜ CDN. Then, paste the domain name by copying from AWS CloudFront Distribution. Also, don’t forget to enable the content delivery network in WP Rocket.

After saving, open any page from the blog in incognito mode, or in another browser (to prevent cache issue). Then inspect any images on the blog post, the image should be loading from the CloudFront CDN. In case, if it does not show, try by clearing the cache as well as try by logging out the user (in case if you haven’t used the different browser or incognito mode).

Step 3.2: Set up CloudFront CDN for WordPress using WP Super Cache

To set up CloudFront CDN for WordPress using WP Super Cache, you need to go to Settings ➜ WP Super Cache ➜ CDN. Then, Enable CDN support, Paste the domain copied from CloudFront CDN, and finally Save Changes.

After saving changes, delete caches, open the website in a new browser or in incognito mode and inspect the source of the element as mentioned in the WP Rocket Section.

Step 3.3: Set up CloudFront CDN for WordPress using W3 Total Cache

In the case of W3 Total Cache, it’s a little different. It also offers a different way of creating distribution directly from the WordPress dashboard as well. And it is easier and straight forward as compared to WP Rocket and WP Super Cache. I will describe this easiest method for the W3 Total Cache by demonstrating it with “https://staging.noobietech.com”.

To Set up CloudFront CDN for WordPress using w3 Total Cache, go to Performance ➜ General Settings, and then go to CDN Sections. There enable CDN and in CDN Type select Amazon CloudFront under Origin Pull/Mirror, and then save all settings.

This should give you an error and asks for details like “Access Key” and “Secret Key“. To set these details, you need to go to Performance ➜ CDN. There you will see form fields for Access Key and Secret Key. 

To generate these keys, go back to the AWS Console, and search “IAM” in the search box. After clicking on that IAM, click on Groups, and then create a new group with any name, while creating provide AdministratorAccess to this group. After creating Groups, Click on Users, and create a New User with Programmatic Access, and add this User to the recently created group with AdminnistaratorAccess.

On successful creation, an Access Key and Secret Key will be generated. Copy those keys, and paste it to the W3 Total Cache. After pasting those keys, click on Create Distribution. This should show a “Created successfully” message if you copied the correct key and password. This will create a distribution similar to those created from the AWS Console directly, to verify you can visit the CloudFront Distribution Dashboard.

Once this newly created distribution is Deployed, copy the domain name and paste it to w3 Total Cache, (while pasting paste just the name without cloudfront.net).  

And finally, click on Test Connection, you should get a message Test Passed if everything went right. This means you have successfully set up CloudFront CDN for WordPress using W3 Total Cache, now save all settings and purge caches, and you are all good to go with CloudFront CDN.

After a successful set up of CloudFront CDN for WordPress using W3 Total Cache, inspect the element as mentioned in WP Rocket via different browser or in incognito mode to confirm either the assets are loading from CDN or not.

Step 4: Advanced Settings – update CNAMEs (optional)

While up to this point, you might have successfully set up Cloudflare CDN for WordPress. However, you might be feeling that the CDN URL is not so appealing. If you are wishing to create a clean CDN URL like “cdn.yoursite.com” or “cache.yoursite.com“, then this section is for you.

Step 4.1: Issue SSL/TLS certificate for Domain from AWS Certificate Manager (ACM)

Before adding alternate domain names (CNAMEs), you might need to issue an SSL/TLS certificate issued by AWS Certificate Manager (ACM). So, to add this certificate, search “Certificate Manager” on the AWS console’s search box.

After clicking on “Certificate Manager“, click on Request a certificate ➜ Request a public certificate ➜ Add domain names like “yoursite.com” and “*.yoursite.com“. Next, you need to pick the validation method, you can select the DNS validation as well, however, we will select “Email Validation, as it will be more straight forward and easy to validate.

Next, Click on “Review” and finally “Confirm and Request“. This will send a confirmation email to one of the following email addresses.

• abcdefghi12345.protect@whoisguard.com // (this is your email from which the domain is registered)
• webmaster@yoursite.com
• postmaster@yoursite.com
• administrator@yoursite.com
• admin@yoursite.com.com
• hostmaster@yoursite.com

#Note: On the first number, it’s showing whoisguard, its because the domain information is secured.

A certificate request with a status of “Pending validation” will be created and a mail (exactly two mail in our case because of “yoursite.com” and “*.yoursite.com”) will be sent to one of the above-mentioned emails. If you haven’t created any business emails yet, please read another article on our blog on the topic how to create a business email for free.

You need to open that email and click on the verification link provided on that email. When you click on that link, it will redirect you to the verification page, where you need to click on the “I approve” button. After approval, you should see the success message like “You have approved an SSL/TLS for domain name yoursite.com”.

Now, go back to the “Certificate Manager” page and you should see the status of that certificate as “issued“.

Step 4.2: Add Alternate Domain Names (CNAMEs)

After successfully issuing the SSL/TLS Certificate, go back to the CloudFront dashboard and click on the ID of the domain which you want to update the Alternate Domain Name (CNAMEs). Then, on the general tab click on “Edit“. Next, add “Alternate Domain Names (CNAMEs)” like “cdn.yoursite.com“.

On SSL Certificate, select “Custom SSL Certificate“, and pick the recently issued certificate from the dropdown, and save it.

Now, you need to add CNAME Record. It could be different according to your web hosting provider, you can do google about it or ask for help to hosting provider. But basically, if you have Cpanel go to Cpanel ➜ Zone Editor (Under Domain Section) ➜ Add CNAME record as shown in the image attached below. Add host record as “cdn” or anything of your choice like “cache” and you need to points to your CDN URL like “d2cn9w2vre6o7j.cloudfront.net“.

Step 4.3: Update CDN URL in WordPress

Now, the last step on this procedure to set up CloudFront CDN for WordPress using an alternate domain name is to update the old CDN URL to the new CDN URL. For this too, let’s take a look at each plugin (“WP Rocket”, “WP Super Cache” and “W3 Total Cache”) interface.

Step 4.3.1: Update CDN URL in WP Rocket

To update the CDN URL in WP Rocket is Straight Forward just replace the old CDN URL (https://d2cn9w2vre6o7j.cloudfront.net) with the new URL (https://cdn.noobietech.com).

Step 4.3.2: Update CDN URL  (CNAMEs) in WP SuperCache

Just like WP Rocket, it’s straight forward to set up CloudFront CDN for WordPress using alternate domain names in WP Super Cache. Just replace the Offsite URL in steps 3.2 with the new URL “https://cdn.noobietech.com“.

Step 4.3.3: Update CDN URL in W3 Total Cache

In case of W3 Total Cache, to set up CloudFront CDN for WordPress using CNAMEs in W3 Total Cache, add the new URL “https://cdn.noobietech.com“, just below the default CloudFront CDN URL.

Troubleshooting

Up to this point, you might have successfully set up CloudFront CDN for WordPress using Alternate Domain Names as well. But in some cases, you might find some issues on the console tab like “CORS policy no ‘access-control-allow-origin'” issue. If you too encounter this Cross-Origin Resource Sharing (CORS) issue, please follow the following steps.

How to Fix CORS no ‘access-control-allow-origin’ in CloudFront CDN?

1. Open your distribution from the CloudFront console.
2. Click on the domain name ID, which you want to update the origin.
3. Click on the “Behaviors” tab, and click on “Edit” after selecting the desired behavior.
4. Find Allowed HTTP Methods under Default Cache Behavior Settings section, and  select GET, HEAD, OPTIONS
5. On “Cache and origin request settings” select “Use legacy Cache Settings”.
6. Next on “Cache Based on Selected Request Headers” pick “whitelist” from the dropdown
7. On the “Whitelist Headers” whitelist “Origin” and “Referer” by selecting headers from the menu on the left, and then clicking Add.
8. Finally, click on Yes, Edit to save the changes.

#Note: Be sure to also forward the header as part of your client request to CloudFront, which CloudFront forwards to the origin.

So, this is the end of the tutorial on How to set up CloudFrontCDN for WordPress, if you have enjoyed this article please share it on your social media so that others could learn it as well and could take the advantages of this free CDN for WordPress for one year. Also, if you find any difficulties besides this detailed step by step guided on “How to set up CloudFront CDN for WordPress“, don’t hesitate to add your query on the comment section. We are always there to solve your query on how to set up CloudFront CDN for WordPress.