Sign up and Get Access keys from Amazon CloudFront
- Go to https://console.aws.amazon.com/console/home and sign in to AWS console. (If you are a new customer, signup AWS console and get 12 months free tier.
- Once you logged in, you could see all the available AWS services. Under “Storage & Content Delivery” section, click CloudFront as shown in below image.
- On top right tab, you could see your registered name as dropdown box. Click your name and select “Security Credentials”.
- Click the “Get Started with IAM Users” button to provide limited access to all your AWS resources.
- Click “Create New Users” button to create username to access the resources.
- Enter a username as per your choice and click “Create” button. (This username is used to get access key to access AWS console services API.) On the next screen, you will see a successful user created screen.
- Click “Show User Security Credentials” link to get the Access Key ID and Secret Access Key. Click Download Credentials button to save both access keys locally. Click Close button.
- To grant admin permission: Now you can see the user which you created in the above step. Click the Username.
- Under Permissions section, click the Attach Policy button.
- From the list of policy names, tick the AdministratorAccess and click Attach Policy button.
Configure W3 Total Cache Plugin in your WordPress Dashboard
- Keep the AWS console page open in your browser and Open a new window/tab to do below steps.
- Install W3 Total Cache Plugin in your WordPress site. Read instruction to know how to install this plugin.
- Goto W3 Total cache plugin settings page (Performance) and click “General Settings” option.
- Under CDN settings section, tick the CDN option to enable Conten Delivery Network.
- Select CDN Type as Amazon CloudFront under Origin Pull / Mirror section.
- Click CDN option from W3 Total Cache settings page.
- Under General section, enable Host attachments and Host wp-includes/files options.
- Scroll down and you could find the Configuration settings section.
- In the Configuration settings section, paste the Access key ID and Secret key which you copied at Step 7.
- In the Origin field. Click the Create distribution button next to your website address.
- Once the distribution is created, CloudFront hostname will be automatically generated in the Replace site’s hostname with field. If its not generated automatically, goto https://console.aws.amazon.com/cloudfront/home AWS CloudFront console and you could see the new distribution created. Copy the domain name and paste it in Replace site’s hostname with field.
- Click the Test CloudFront distribution button to ensure the connection to CloudFront is working fine.
- Once you got the below success message, Click the Save all settings button.
- Now CloudFront will take some time to deploy your files in their servers. Once done all your images will be served from the AWS CloudFront.
Test CDN integration:
- You can check and ensure by your images URL. All your AWS CLoudFront hosted images will have URL starting as domainname.cloudfront.com/xyz…………….
- If you see the above URL format, then you can ensure that your wordpress is successfully integrated to the AWS CloudFront.
Setting up CNAME to change URL format (Optional)
Add CNAME in your hosting provider cPanel
- By default, your cdn url will look like domainname.cloudfront.com.
- Instead of using default cloudfront URL, you can use your own domain name by creating a CNAME.
- Here I am using the godaddy hosting cpanel to setup the CNAME. If your hosting provider is different, then check with your concern hosting provider to add the CNAME.
- Goto to Godaddy Cpanel and click DNS Manager.
- In the DNS Manager page, click Edit Zone under your domain name.
- Under CNAME (Alias) section, click Quick Add button.
- Enter Host name as cdnk (yourchoice) and Points to as CloudFront domain name as xyz.cloudfront.net
- Click Save Zone File button.
Update CNAME to AWS CloudFront
- In the CloudFront distribution page, click the ID.
- Click Edit button.
- In the Alternate Domain Names (CNAMEs) field, enter the cdnk.yourwebsite.com.
- Click the Yes, Edit button to save the CNAME.
Update CNAME in W3 Total Cache settings
- Goto CDN page in W3 Total Cache settings.
- Under Configuration section, enter CNAME (cdnk.yourwebsite.com) next to Replace site’s hostname with: field.
- Click the Test CloudFront distribution button to ensure that the CNAME is correctly configured.
- Once you got the success message, Click the Save all settings button.
- Purge all caches to delete old cached datas.
Update CNAME in Cloudflare account (Skip this step if you are not using Cloudflare)
- Login to cloudflare account.
- At the top, click DNS button.
- In DNS Records page, add your CNAME as highlighted in the below image.
- Select Type as CNAME
- Enter Name as cdnk (created in hosting provider’s cPanel)
- Enter Value as domainname.cloudfront.com (copied from CloudFront dashboard)
- Click Add Record button.
Test CNAME integration:
- You can check and ensure by your images URL. All your AWS CLoudFront hosted images will have URL starting as cdnk.yourwebsite.com/xyz…………….
- If you see the above URL format, then you can ensure that your CNAME setup is successful.
- Now everything is configured fine and your website will use CloudFront content delivery network and use your own CNAME.
Tips and Warnings:
- In W3 Total cache settings, goto Browser Cache Settings tab and enable HTTP compression in the Media & Other Files section.
- In W3 Total cache settings, disable Minify
- CNAME can be anything of your choice. Here I used cdnk as CNAME.
- CNAME should be same in all the applications.