Request a Quote

Integrating Amazon CDN with CMS

Integrating Amazon CDN with CMS

August 30, 2018 at 7:28 pm By Rishil Shaji
CloudFront is an Amazon web service that helps us to speed up the distribution of both static and dynamic web contents. CloudFront delivers the web content through a worldwide network of data centers called edge locations. This web service conjointly offers businesses and web application developers a simple and cost effective way to distribute content with low latency and high data transfer speeds. WordPress associated with CloudFront WordPress website usually loads slowly, we have to clean up the pages and reduce the server loads to make the site to load faster. By using the cache plugin you can clear the cache automatically. By associating WordPress and CloudFront the websites will load faster, This speeds up you site in two ways.
  1. Amazon delivers your static files  fast.
  2. This reduces the demand on your own server, making it faster as well
There are two ways we can associate CloudFront with the WordPress site
  • You upload all your wordpress static files (you wp-content and wp-includes folders) onto Amazon S3, then tell Cloudfront to get your files from Amazon S3 as it needs them.
  • You tell Cloudfront to get the files directly from your site as it needs them. This second way is called ‘Origin Pull’.
The advantage of the first method  is that, if you ever change your WordPress host, your entire wp-content folder is stored off-site at Amazon S3, so you don’t need to even copy your wp-content folder to your new WordPress installation. The new S3 wp-content folder becomes your wp-content folder – you can even load images directly to S3 and then insert them into your WordPress posts. The advantage of second method is that it’s easier and cheaper, and you don’t need to upload the files to Amazon each time you make a new post.

How to associate CloudFront with WordPress





<!DOCTYPE html>
<html>
<head>
<style>
code {
font-family: monospace;
}
</style>
</head>
<body>

<p></p>

</body>
</html>



Create a user and user group in IAM

  • Create a new group (give any name) and give administrative privilege.
 
  • Create a user + click on add user + give username + grand programmatic access click on Permissions and assign it to the group that we created click on create user.
  • Copy the access key and secret access key (or download them).
 

Create an S3 bucket

 
  • Create an S3 bucket. Try to give your domain name as the bucket name.
  • Make sure that for the user ‘username’ has read permission.
 

Create a CloudFront distribution

 
  • Go to CloudFront in the section web click on get started.
  • In the origin name select the aws s3 bucket name which you created.
  • Leave rest of the options as default.
  • Create the distribution.
Set up the WordPress w3-total-cache plugin
  • Log in to the WordPress dashboard install w3-total cache plugin.
  • Go to the performance option in the WordPress dashboard go to general setting and go to the CDN setting and enable it and in the CDN type select the AWS CloudFront option from the origin pull push.
  • Click on save all settings.
  • Go back to the performance tab and click on CDN and in the configuration section enter the access key and secret key which you have copied previously.
  • Make sure that you have the correct values in the CloudFront domain name in the option replace site’s hostname with and the bucket name.
  • Click on the upload attachment button and click on start
    • This will upload all your WordPress contents to the s3 bucket.
  • Same way you can click on the upload attachment buttons of other sections and upload the desired contents to the s3.
  • Click save settings and purge caches button.
 

Set Up CloudFront With WP Super Cache  (Alternative plugin)

  • Log in to the WordPress dashboard install WP Super Cache
    • Go to the WP Super Cache settings and copy and paste in the CloudFront distribution URL. Then enable the CDN, and save settings.
  • After that, refresh the page and you will able to see that the site is pulling the contents from CDN instead of your normal server.
    • (For the conformation you can check the URL of the images that are been loaded by opening the image in a new tab).
While both plugins from the wordpress, we could see that WP Super Cache setup is lot more easier than W3 Total Cache. The difference is that WP Super Cache mirrors  and letting CloudFront do it’s own work getting the files, While W3 Total Cache supports an integrated approach that makes use of the AWS API making it a little bit more flexible.  

Conclusion

  By using CloudFront for the WordPress Websites which are been accessed globally make the pages to to load faster. For all the WordPress users it's a great suggestion to use CloudFront CDN technology for their websites.   CloudFront can be implemented in various CMS such as Drupal, Magento etc. The amazon service CloudFront are been used you have a lot of content that are mostly static and doesn't need to be dynamically generated every time someone request for it. Generally for implementing the CloudFront CDN for other CMS, We need to Create the appropriate user which provide us with the access key identifiers (Access Key ID and Secret Access Key) which are required to sign up for S3 and CloudFront. Next step is Creating the S3 bucket it's where you place the object for the CloudFront to access (Origin server). It is important to note that objects added to the S3 bucket are stored in multiple locations/data centers to ensure their availability. Next step is for creating the CloudFront distribution, its for CloudFront to know where the origin server is located. You can give the Bucket name to the CloudFront Distribution name which was given as to the domain name. After creating the CDN you will get the link and we should specify these links in the CMS CDN plugins.