AWS CloudFront WordPress Integration

Is your website slow? Are your media files like images, videos, css loading slow. If you are facing these issues you need a good CDN(Content Delivery Network). You can read all Amazon Web Services article from below:

In my last blog I talked about AWS S3 integration with WordPress. Moving forward on similar lines, In this blog I will explain how AWS CloudFront can be setup for caching WordPress media files.

AWS Cloudfront

AWS CloudFront is a content delivery network(CDN). It is integrated with various amazon web services like AWS S3. It act as caching engine for media files like images, css, js, videos etc. It distributes content to end users with low latency and high data transfer speeds.

Why AWS CloudFront WordPress Integration?

  • Performance of your website will improve.
  • It works great specially when your user base is spread all around the globe.
  • AWS CloudFront works with AWS S3 out of box. You just need to specify AWS S3 bucket path.
  • AWS CloudFront allows you to set different domain aliases for your CloudFront distribution. You can have for example image.hackpundit.com, d1.hackpundit.com, d2.hackpundit.com and d3.hackpundit.com pointing to the same CloudFront distribution, allowing parallel downloads.
  • Pricing is cheap. Pay as per your usage. For AWS free tier users you can use it for free until your traffic grows tremendously. Check out pricing in details.

Assumptions

  • You have access to AWS CloudFront service in AWS console.

 Steps for AWS CloudFront Setup

  •  Login to your AWS account and click “Storage & Content Delivery” => “CloudFront“.
AWS CloudFront in Console

AWS CloudFront in Console

  • You will be redirected to AWS CloudFront dashboard. Click “Create Distribution“.
  • Select “Web” as delivery method and click “Get Started“. You will see “Distribution Settings” in 3 different sections
    • Origin Settings.
    • Default Cache Behaviour Settings.
    • Distribution Settings.
AWS CloudFront WordPress Integration Select S3 Origin

AWS CloudFront WordPress integration Select S3 Origin

  • In origin settings select your S3 bucket where your media files are residing.
  • Most of the fields in “Default Cache Behavior Settings” are selected by default. You don’t need to change.
  • Most of fields in “distribution settings” are selected by default. You can refer AWS CloudFront getting started guide for more details about each field.
  • Click “Create Distribution“.
  • You will be redirected to AWS CloudFront dashboard with distribution status “deploying“. It will take some time(5-10 minutes) till your status changes to “deployed“. You can use your AWS CloudFront domain only after your distribution status changes to “deployed”.
CloudFront Distribution Dashboard

CloudFront Distribution Dashboard

  • You will see new CloudFront domain name generated(*.cloudfront.net). You will need the domain name below in the WordPress plugin. All your media files will be accessed through this domain.

Step AWS CloudFront integration with WordPress Plugin

  • Login to your WordPress admin interface.
  • Click “AWS” => “S3 and CloudFront“. Go to “CONFIGURE FILE URLS” section.
  • Select option “CloudFront or custom domain“. You will be asked cloudfront domain(*.cloudfront.net) which you created above.
AWS CloudFront WordPress Integration Configuration

AWS CloudFront WordPress integration Configuration

  • Save your changes.

Great! you are done with AWS cloudfront WordPress integration with your blog. Let’s test it.

Testing AWS CloudFront WordPress integration

  • Open any featured Image url from your blog list.
  • Now access the same Image url with CloudFront domain name prefixed with http://*.cloudfront.net.
  • Accessing for the first is little delayed for 1-2 seconds.
  • If accessing image using CloudFront domain works perfectly, your WordPress integration is complete.
  • I made a mistake of using distribution id in CloudFront url instead of CloudFront domain name. Obviously it didn’t work.

Setup Sub Domain for Images with AWS CloudFront

Using Amazon CloudFront for your wordpress website has various advantages except CDN caching:

  • It boosts page load time.
  • Lowers the bandwidth of the server.
  • Consistent distribution across different regions.

Amazon CloudFront gives ugly looking sub domain url for accessing the files. Using sub domain(of your website) for images looks more professional. e.g. image.hackpundit.com is much more intuitive than *.cloudfront.net.

Even Amazon also uses sub domain(g-ecx.images-amazon.com) for accessing images. You can verify url of any image on Amazon website.

  •  You will need to update Amazon CloudFront distribution settings after login to account. You can configure multiple alias alternate domains.
AWS CloudFront WordPress Alternate Domain Setup

AWS CloudFront WordPress Alternate Domain Setup

  • After configuring your Amazon CloudFront distribution settings, make sure to update WordPress plugin configuration with your new CloudFront alternate domain.

Premature optimization is bad. Use AWS CloudFront in your WordPress blog when your  website has huge traffic and media files are loading slowly. CDN is not of a much use for low traffic websites. If you are interested in AWS big data services, I recommend reading below articles:

What is your experience with AWS CloudFront? Are you using any other CDN for your website? Feel free to comment your thoughts.If you like my article please like our Facebook page and also follow us on Twitter so that you get regular updates. For regular updates you can also subscribe towww.hackpundit.com with your email.