DEV Community

Cover image for 5 methods for setting up a CDN for your site's content
chrdek
chrdek

Posted on

5 methods for setting up a CDN for your site's content

Setting up web content delivery (free options).


As I've been trying to organize some scripts and other type of content on a website I was working on, I reached the point where it would be necessary to set up a custom CDN or use one for specific scripts delivery.
Following is a list of 5 relatively simple -and free- methods of setting up a CDN to run your site's scripts from.

Set your scripts on a cloud hosted provider

Most serverless hosted CDN on the cloud include common features and functionality such as video/audio streaming, HTTPS/HTTP/2,3 support using multiple IP locations and secure caching.

A small listing of the most popular cloud hosted CDNs that include a trial on content hosting is found below:

  • BunnyCDN - Main site allows for a 14 day trial which includes full CDN features support such as HTTPS HTTP/2, video streaming, caching and compression with DDoS security.

  • LimeLight CDN - Limelight's free trial option requires to contact the sales team for accessing certain features. Aside from that, supports full set of edge-based content delivery network with relevant HTTP protocols support with and streaming. Another great feature is the bundled Web Application Firewall that includes application-level protection.

  • CloudCDN via GCP (Google) - Accessible with a free google account, supports HTTPS/HTTP/2,3 logging exports via BigQuery and Google Cloud Storage platforms.

  • CloudFlare CDN - Free plan that supports integrated DDoS security, HTTPS/HTTP/2,3 with video streaming and CDN customization with automation. Add-ons might require monthly payment.

CDN sourced in-app script render on personal cloud AWS instance with npm express-cdn

In case you are looking to integrate your personal CDN scripts in your application, you can also setup a NodeJS server to load your scripts from geographically redundant locations.

The express-cdn package allows for dynamic script tags rendering by utilizing an AWS S3 bucket account so hosting is done from the S3 locators allowing your site's server to off-load script request traffic based on geographic proximity.

Simplified list of steps to set it up is shown below:

  1. Create a top-level CNAME domain of your-domain.com for your website on aws.

  2. Create an S3 bucket for your aws storage account and upload a default index.html file as a placeholder and publicize the bucket URL.

  3. Create a new distribution network on aws CloudFront with the following options:
    Origin domain name=bucket-name.s3.amazonaws.com
    Origin ID=bucket-name
    Network Path=Accept all network paths using the asterisk * option
    Alternate domain names=cdn.your-domain.com where your-domain.com is the top-level CNAME domain created in step 1.
    Save the created cloudfront domain name produced in the format xxx.cloudfront.net.

  4. From your aws DNS manager create a new CNAME record with hostname value of cdn and set its alias/pointer record value to the xxx.cloudfront.net from step 3 and wait for the cloud records to update. Once everything is done properly you should have a link with http://cdn.your-domain.com that loads the index.html from the corresponding S3 bucket.

  5. As far as the web server setup is concerned, you need to have:

    • Nodejs with express running and rendering engine (jade/ejs preferred).
    • express-cdn installed and appropriate module requires.
var express = require('express')
  , path    = require('path')
  , app     = express.createServer()
  , semver  = require('semver');
var sslEnabled = false
Enter fullscreen mode Exit fullscreen mode
  • Relevant initialization settings of the express-cdn module var CDN = require('express-cdn')(app, options);. options include your cdn name, s3 bucket settings, access keys and local server settings. The CDN() helper object itself will generate the necessary src= or data-src= script tags on-demand from the S3-hosted content.

Note: In order to have aws ssl setting applied, you need to use a sub-domain since canonical names are not supported.
These are the main settings of aws usage on express-cdn. Full set of detailed instructions can be found in the official link here.

Customizable private CDN setup on Varnish [and VCL files]

Even though this is a more time-consuming solution, it allows for more flexibility on your server setup and provides more control on your CDN infrastructure parts.
Considering a personal Ubuntu or Debian environment setup, you can install varnish server runner locally using apt-get or yum packagers per CDN instance.
Start from your shell by running apt-get install varnish-plus to install the necessary files.
Run netstat -lp | grep varnishd to check whether your service is up an running or check for daemon activity via systemctl status varnishd. In case you need to build the package manually you can try the following method:
Download the source manually using apt-get source varnish.
Set the VARNISHSRC environment variable value to the directory that the package was downloaded using ./configure VARNISHSRC=$HOME/varnish-3.*.
Run the following

make 
sudo make install
sudo make check
Enter fullscreen mode Exit fullscreen mode

to build and install. This procedure also applies to downloaded additional modules.

Once you get the service running, an additional setup of the *.vcl configuration files is required to set it for content caching.

Modify the /etc/varnish/default.vcl file so that backend default section points to your localhost and forwarded port

backend default {
   .host = "localhost";
   .port = "8080";
}
Enter fullscreen mode Exit fullscreen mode

Modify the /etc/default/varnish.param file so that inbound HTTP (port 80) requests are handled accordingly by varnishd -a: 80.

Restart varnish daemon by running systemctl service varnish start.
An alternative way of starting the server is to specify manually the VCL config by running varnishd -a :80 -T localhost:8080 -f /etc/varnish/default.vcl.

A generalized topology would be to have 3 geographically separated servers each running behind a NAT or firewall and each one to handle the same content for a site, based on the location of the requests.

AWS CloudFront with an AWS Domain

The initial method of setting up an S3 bucket en-par with a CNAME domain name on amazon's CloudFront is described already in the npm express-cdn section of this post.
Note that AWS CloudFront for content distribution is free but since it utilizes a bucket account, related charges still apply per frequency and usage of your storage. So you might need to set a couple of limits (quotas, whitelisting or ACLs) for retaining your free or low cost.

Apart from the express-based dynamic cdn rendering outlined above, you can set it just for caching content on your website or even have multiple bucket locations serving content for more than one copies of your website.

Azure CDN using custom domain provider

As with AWS CloudFront, serving content from Azure CDN is similarly done via:

  1. Setting an Azure AD top level domain.
  2. Registering, adding CDN in Azure Active Directory.
  3. Setting up Azure Key Vault for AD.
  4. Granting Azure access to the Key Vault for the CDN setup.
  5. Enabling https in Azure CDN for azure's custom domain.
  6. Making sure that all Azure Firewall Web Application Policies are in place and working for the CDN setup.

Alternatively, you can automatically setup a deployment from azure resource manager job by using an azure arm quickstart template. The latest templates can be found from MS here.

Non-cdn method for loading scripts

In case that you can't use any of the methods above or if you have an environment that is too restrictive, you can load your scripts from a file server on-premises so that you don't overload your website with heavy traffic. The scripts and images might be statically loaded but this is better than loading everything on one server. In a simple node-express setup this is also done by
express.use("/src/js", express.static(__dirname + "/media/js")); to serve static content for a site.



That is all I could find on privatizing your cache for your web content.

Hopefully this proves useful for sending your wishes across the globe. Happy new year 2021!!



Resources:

Top comments (0)