Setup Amazon CloudFront CDN WordPress using W3 Total Cache

Amazon Web Services (AWS) has provides lot of products in various technology to the individual to enterprises level. AWS CloudFront is a global content delivery network (CDN) which delivers data in very high speed. Below I have given the detailed step by step guide for integrating Amazon CloudFront CDN WordPress using W3 Total Cache plugin.

Setting up Amazon CloudFront CDN WordPress

1. Sign in to AWS console. (If you are a new customer, signup AWS console and get 12 months free tier.)
2. On the top menu bar, select Services and click CloudFront under the Networking & Content Delivery group.
3. Click Create Distribution button. Here the delivery method is Web so under the Web, click Get Started button.
4. Type Origin Domain Name and Origin ID as yoursitename.com. (For example, my website name is spytm.com so I will give the Origin Domain Name and Origin ID as spytm.com.)
5. Leave the remaining options untouched and click the Create Distribution button.
6. Now you can see the Status of your distribution as In Progress. It will take maximum 20 minutes to deploy your website into CloudFront and once it is done, then the status will be changed to Deployed.
7. In the CloudFront Distributions dashboard, click the ID. In the General tab, copy the domain name. (For example: if the domain name is d5ygs27y188890r.cloudfront.net, then copy only the first part – d5ygs27y188890r)

See Also: 10+ Most Common WordPress Mistakes to Avoid

Creating Access Keys in Amazon Web Services

1. On top right bar, Click your name and select My Security Credentials.
2. Close the popup. From the left menu bar, select Groups and click Create New Group button. Type the name of the group and click the Next Step button.
3. Tick the AdministratorAccess policy name and click Next Step button.
4. Review the group name & policy and click the Create Group button.
5. From the left menu bar, click Users and click the Add user button.
6. Type the User name and tick the Programmatic access as an access type. Click the Next: Permissions button.
7. Tick the Group name which you have created earlier and click the Next: Review button.
8. Review the User details and click Create user button.
9. Copy the Access key ID and the Secret access key and safely store it in somewhere. (You cannot recover the Secret access key again. This is the only page where you can get the Secret access key. If you lost the Secret access key, then you have to create a new Access key ID and its corresponding Secret access key in the Users page.)

See Also: Top 16 Best Free Essential WordPress Plugins

Integrating CloudFront into WordPress using W3 Total Cache Plugin

1. Install and activate the W3 Total Cache Plugin in your WordPress site.
2. Goto W3 Total cache plugin settings page (Performance) and click “General Settings” option.
3. Under the CDN box, tick the CDN field as Enable and select the CDN Type as Amazon CloudFront under Origin Pull / Mirror section. Click Save all settings button.
4. Under the W3 Total Cache settings page (Performance) tab, select CDN.
5. In the General box, tick the Host attachments, Host wp-includes/files, Host theme files, Host minified CSS and JS files and Host custom files fields.
6. In the Configuration box, paste the Access key ID and Secret key which you have copied earlier. Paste the domain name (example: d5ygs27y188890r) in the Replace site’s hostname with field.
7. Then click Test CloudFront Distribution button to test the successful connection between WordPress and CloudFront. If the connection is established then you can see the message as Test passed.
8. Click Save all settings button and purge all the caches to delete the old cached data.

See Also: Top 3 Best Free WordPress Security Plugins

Manually test the Amazon CloudFront CDN WordPress Website

1. You can check and confirm by your images URL. Your website images URL would have been changed to something like domainname.cloudfront.com/xyz…………….
2. If you see the above URL format, then you can confirm that your WordPress website has been successfully integrated to the Amazon Web Services CloudFront.

See Also: How to make WordPress site Load Faster

Setting up CNAME to change URL format (Optional)

By default, your cdn URL will be look like domainname.cloudfront.com. Instead of using the default cloudfront URL, you can use your own domain name by creating a CNAME. (For example: my CDN URL can be changed from d5ygs27y188890r.cloudfront.net to cdn.spytm.com.)

1. Add CNAME in your hosting provider cPanel

1. Login to your hosting provider cPanel.
2. Under Domain box, select DNS Manager or Zone Editor. (This name may vary depends upon the hosting provider.)
3. Under your WordPress site name, enter CNAME NAME/HOST as cdn (your choice but you have to use the same in the upcoming steps) and CNAME/Points to as CloudFront domain name (example: d5ygs27y188890r.cloudfront.net). Now we have created CDN link as cdn.yoursitename.com. (For example: for my website, it is cdn.spytm.com).
4. Save it if required.

See Also: Prevent WordPress Content Theft – text and images

2. Update CNAME in AWS CloudFront

1. In the CloudFront Distributions dashboard page, click the ID.
2. Click Edit button.
3. In the Alternate Domain Names (CNAMEs) field, enter the cdn.yoursitename.com.
4. Click the Yes, Edit button to save the CNAME.

3. Update CNAME in W3 Total Cache settings

1. Goto CDN page in W3 Total Cache settings page (Performance).
2. In the Configuration box, in the Replace site’s hostname with field, remove the domain name which we have placed before and enter the CNAME as cdn.yoursitename.com.
3. Click the Test CloudFront distribution button to ensure that the CNAME is correctly configured.
4. Once you have got the success message as Test passed, Click the Save all settings button and purge all the caches to delete the old cached data.
5. In the Advanced box, tick the Set cookie domain option and save the settings.

4. Update CNAME in Cloudflare account (Skip this step if you are not using the Cloudflare)

1. Login to your Cloudflare account.
2. Click the DNS icon from the menu bar.
3. Select Type as CNAME from the dropdown.
4. Enter Name as cdn. (Created in cPnael)
5. Enter Value as domainname.cloudfront.com (copied from the CloudFront Distributions dashboard)
6. Change the orange cloud icon to the grey cloud icon by just clicking the icon.
7. Click the Add Record button.

5. Manually test the CNAME as CDN URL

1. You can check and confirm by your images URL. All your WordPress website images would have URL starting as cdn.yoursitename.com/xyz…………….
2. If you see the above URL format, then you can confirm that your CNAME setup is successful.
3. If you see any error in opening the URL, then please try again after 24 hours.

Post your experience and queries on the below comments section, we will get back to you with proper resolution.