CDN types and setting them up (Vue, React)

Aug 27, 2020, by Karolis Rusenas

cdn frontend javascript webdev

CDN

What is CDN? Cloudflare has a nice explanation here: https://www.cloudflare.com/learning/cdn/what-is-a-cdn/

In short:

A content delivery network (CDN) refers to a geographically distributed group of servers that work together to provide fast delivery of Internet content.

In this article we will have a quick look into several CDN types and potentials pros/cons that you might encounter when setting one up yourself.

Cloudflare is one of the best CDNs out there and we are using it for our landing pages and numerous other projects. It’s a great DNS configuration service too that provides rich APIs. However, it’s good to understand what other types of CDNs are out there and which suits you best.

CDN types

All CDNs have different pros and cons and all solutions are trying to achieve the same thing: load content faster.

Reverse proxies with caching

Some of the CDN types you will encounter in the wild:

Push CDN

Push CDN

Push CDN is a setup where you upload your assets to a server (or a group of servers). An example of such CDN is Google Cloud CDN. In this setup, you will have to create a load balancer and a storage bucket and upload your content assets as part of the CI/CD pipeline where you build your frontend app. In this setup, you will need to create a new domain such as cdn.example.com that points to your CDN storage location.

Pros:

Cons:

No CDN

No CDN, just cache control headers on your web server. This option might work for many cases, however, the first load can be painful if the user is far from your server location and you have a lot of static assets.

Pull CDN

Pull CDN

CDNs like BunnyCDN (affiliate link, great service) pull from your origin server but don’t try to proxy all your traffic. In this scenario, you serve your index.html that then loads assets through the CDN domain instead of your own. Similarly, as with the “Push CDN” type, you will have to either serve assets from cdn.example.com, or if you have a fancy global load balancer, you can configure that certain paths load files directly from CDN servers.

Pros:

Cons:

Setting up BunnyCDN (Pull CDN) in a SPA

I couldn’t immediately spot the docs but if you are doing this not for the first time, it’s quite straightforward:

  1. Create a “pull zone”. You will get your pull zone domain which is a reverse proxy to your origin web server:

Pull zone config

  1. (Optional but recommended) Create a CNAME from your domain to the allocated pull zone domain (in our case it’s cdn.webhookrelay.com -> webhookrelay.b-cdn.net). This enables you to load assets from your domain name.
  2. Update your webpack config to add asset file prefix. Example for vue.config.js would be:
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? 'https://cdn.your-domain-here.com/' : '/',
}

If you are using React, check out “Public Folder” docs here: https://create-react-app.dev/docs/using-the-public-folder/.

That’s it, generated assets will all have the prefix to load through the CDN. If you are using Nginx to serve your app, ensure that you are providing correct headers for js and css files. For example:

location ~* \.(?:css|js)$ {
          expires 1y;
          add_header Cache-Control "public";
          access_log off;
        }

I hope you will find this useful whenever you decide to add CDN for your website!