Route 53 + CloudFront + Load Balancer + EC2 = Entire Site Cached!

Yeaph, I spent all the weekend figuring out how to Cache my entire site in CloudFront. I had really a lot of issues until understand the correct configuration to do things work well.

I this approach it’s not necessary install any cache plugin (ie W3 Total Cache) in WordPress.

Here is the current scenario:

  1. Route 53 with A alias pointing to CloudFront (for my naked domain and www)
  2. CloudFront with Origin Domain Name = load balancer DNS name, also the cname are configured to naked domain and www
  3. Load Balancer with EC2
  4. EC2 with several sites (I just want use CF in one of them)

 

All changes that did was in CloudFront configuration, no changes in the application or server were necessary.

I took a couple of screenshots to show exactly how is the configuration in CF.

CloudFront General Information

CloudFront General Information

Origin Settings in CloudFront

Origin Settings in CloudFront

The trick is in the Behaviors options. First, in changed a little but the Default to:

Edit Behavior CloudFront

Edit Behavior CloudFront

You can see that I did a couple of changes from the defaults settings, but the most important here was set the Forward Headers to Whitelist and add Host in the Header, without the CloudFront was caching my default index.html from Apache, the reason of that is because the CloudFront was hitting the LoadBalancer URL, so a default index was being shown.

Another trick, is to try to avoid admin pages to being cached. So Added:

Behaviors CloudFront

Behaviors

Cache Behavior Settings CloudFront

Cache Behavior Settings CloudFront

 

 

 

 

Well, now things seems work fine!

 

Developer Tool - Hitting cloudfront

Developer Tool – Hitting cloudfront

Just quick note: In this way, all changes that you do in your site will be take effect just 24 hours after publish. Or, you need “invalidate” objects in CF.

Leave a Reply

Your email address will not be published. Required fields are marked *