What is CDN and how it fits to Episerver solution (Part 2) – Setup cloudflare

Welcome to the second post of CDN series. In these series, I’m trying to describe how CDN works and with one example show how it can integrate with Episerver and finally we tackle some caching challenges CDN and Episerver has. In this post, we are going to integrate one sample CDN with one of our existing websites. One of  CDN Episerver is using in their managed services called DXC is called cloudflare. I have not affiliated with this company and used it because it may be used by some of DXC clients. Cloudflare is quite good and stable service. They have a very simple dashboard and quite good and fast support. So let’s dig down into it!

  1. I created sample Episerver site and hosted that in http://test5.levo.com.au
  2. Register on cloudflare – It is free (select free-personal plan) (not CC require)
  3. Now you need to provide your domain name(s) – my domain name, in this case, would be levo.com – it may take some time to scan domain

  4. Now you can see list of DNS records which domain scan process fetched. In my case none of them items in the list is relevant, so I removed all of items and add one line for test5:

    Cloudflare proposed me to change my Name Server to use Cloudflare which I haven’t. What I did was just is to remove all items and add my “test5” and associated IP address!

  5. Our original image URL was “http://test5.levo.com.au” so now with our latest cloudflare configuration we can access “test5” using “http://test5.levo.com.au.cdn.cloudflare.net”! So without changing name server, we can test our application. Remember in real world scenario if you need to leverage sage DNS and GEO Loaction DNS, you need to use CDN Domain Name Service!
  6. Next step is to add record to IIS website binding:

  7. And obviously new URL to Episerver:

  8. Navigate to cloudflare URL and you should see CDN version of your site!

Question:

  1. How should  I know the site is using the cache?
    1. In Chome navigate to site using developer tools -> Network
    2. Wait until all site is loaded
    3. Find one of your images comes from Episerver:

    4. You can see “CF-Cache-Status:HIT” in  HTTP Header. That means the image is coming from CDN (more information)
  2. What happens if  I delete my asset file from Episerver?
    1. If you are using CDN URL, CDN will provide the image. That means even if you delete image from your web server, CDN keeps the file till TTL finish (more information)
  3. How should I know HTML is cached or not in CDN?
    1. HTTP Header is where to find out:

    2. As you can see “CF-Cache-Status:HIT” is missing
    3. If you need want to cache HTML as well you can refer here.
  4. If I’m going to use CDN, what about if my image or video (or any asset, even HTML of the site) is live and I need to update it?
    1. This is our next post!

In our next post, we will look into how INVALIDATE CDN cache from Episerver.  We are going to build a NuGet package specifically for cloudflare CDN to invalidate cached content when the content is updated in Episerver. This can improve site performance by caching content as much as possible and allow web editors to publish the latest content ALWAYS and finally we plan for integrating visitor group  with CloudFalre PageRules! This will be amazing journey, next post will come soon 🙂

What is CDN and how it fits to Episerver solution (Part 1)

In this series of posts, I’m going to describe what is CDN and how it works with Episerver. And then introduce a challenge with CDN and cache and Episerver and how we can tackle that. In out first post we will dig into CDN concept and understand what problem it tries to solve. CDN stands for “Content Delivery Network” or “Content Distribution Network”. So CDN is a network which tries to deliver the content to end-user. The source of content is web-server and the output of the CDN will be delivered to the user. The challenges which CDN tries to solve are:

  1. Take a load of site assets (e.g. Images, Videos, JS, CSS, …) from the web server and cache them. Usually, on first call CDN servers, fetch the assets from the webserver and cache it. From now on it uses cache version and CDN takes the load off from web server
  2. CDN, as the name says, has a network of MANY servers in different regions which is called “Edge Server”. These servers can improve content delivery to make sure content is going to deliver to end-user using the same server in the same region. This can help website owner to avoid paying for MANY web servers for different region and they will pay much less for expensive compute time (or virtual machine) versus cheap CDN
  3. Depend on different CDN you would get the different feature but usually, comes with a security feature. Means CDN will handle “DDos Attacks“, Provides PCI Compliance, Web Application Firewall and SSL.
  4. Most CDN supports content optimization. For example, they can minify JS and CSS on the fly or can optimize image based on the client device (e.g. on small mobile screen the image quality is not important but a size of the image can consume all of your mobile bandwidth).
  5. Can give your a good analytics about traffic and how to optimize the content delivery to give best experience  to end user.
  6. Compare to compute power we are paying for a web server, CDN is quite a bit cheap.
  7. Most of CDN providers are now support SPDY and HTTP2, means you can deliver content HEAPS faster to your end-user.
  8. Some CDNs are supporting video streaming, so if you are providing many videos or event live video, you can rely on CDN to provides high bandwidth in a different region and tackle the complication of video STREAMING mechanism on different end-user devices.

The list above is common CDN features but it is not limited to above list. There are MANY more features from different providers which are not listed but above list is my main concern about CDN and any more feature can help to improve user experience on your site.

In our next part we are going to use cloudflare and one Episerver site to show your how it works.