How to create CloudFront Distribution & test its latency

In this CloudFront Distribution how-to-do we will cover following tasks :

  • Create a Cloudfront distribution for the images that are uploaded on a WordPress blog.
  • Automatically sync wordpress uploads to s3 bucket.
  • Compare the image load time across different countries with and without cloudfront.





 

Step 1 : Create a Bucket

create-bucket-cdn

Step 2 : Create the CloudFront Distribution

create-cnd
Create CloudFront Distribution
create-cdn2
Fill up the Origin details as shown in image

 

create-cdn3
Apply Cache Behavior settings
create-cdn4
Select proper distribution settings as per price with other logging, WAF and DoCument root options

 

Step 3 : Create the new Cronjob

Note: In order to perform further steps its recommended to configure AWS CLI on EC2 instance before moving on further.


Create a cronjob to sync all the s3 bucket content
Create a cronjob to sync all uploaded images on wordpress with s3 bucket
*/2 * * * * root aws s3 sync /var/www/html/wp-content/uploads s3://wp-cdn1

Step 4 : Add new post to WordPress with Image

create-post-cdn
Create a wordpress post and add an image to test CDN later

Step 5 : Redirect uploads folder to our CloudFront Distribution

rewrite-rule
Write a redirect rule to redirect all the uploads
rewriterule ^wp-content/uploads/(.*)$ http://dsnbd65zem3ul.cloudfront.net/$1 [r=301, nc]

Step 6 : Restart crond and httpd service

restart-cron-job
Restart the cronjob and make sure that its working properly as configured

 

Step 7 : Testing our Cloudfront Distribution

Test the CDN, If everything is properly configured the URL of the image will be changed to CDN's URL
Test the CDN, If everything is properly configured the URL of the image will be changed to CDN’s URL

Step 8 : Latency Test (without Cloudfront)

You can find many online tools to test website latency. select any as you like and enter the ip address for your wordpress website
You can find many online tools to test website latency. select any as you like and enter the ip address for your wordpress website

Here you can see the result without cloudfront

Step 9 : Latency Test (with Cloudfront)

With CND implemented you can see it has decreased latency, thus proving the advantage of have a CDN configured for all the static content of a website
Results with cloudfront implemented

With CDN implemented you can see it has decreased latency of website, thus this proves the advantage of having a CDN configured for all the static content on a wesbite.

Feel free to ask any queries in comments below.

Thanks for reading, hope it helped!

-bhargav