loading...
Cover image for How I Setup My Own Personal CDN using Cloudflare and S3

How I Setup My Own Personal CDN using Cloudflare and S3

joelnet profile image JavaScript Joel Originally published at joel.net ・4 min read

What is a CDN?

According to Cloudflare a CDN is:

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

A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos. The popularity of CDN services continues to grow, and today the majority of web traffic is served through CDNs, including traffic from major sites like Facebook, Netflix, and Amazon.

A properly configured CDN may also help protect websites against some common malicious attacks, such as Distributed Denial of Service (DDOS) attacks.

-- What is a CDN?

tl;dr A CDN is a network of computers around the world that deliver content efficiently.

What Can a CDN Provide?

  • Caching to reduce the load on my webserver
  • Geographic Distribution for speedy delivery regardless of where you are
  • DDoS Protection from sudden spikes in traffic
  • Compression of files for faster delivery for user on slow internet

Why Did I Want a CDN?

I often find myself needing to host public static files. I want to do so in a way that is fast, efficient, reliable, and scalable.

Recently an article of mine hit #1 on the HN main page.

Screenshot_20201001-222913__01.jpg

I also found out it was trending on Reddit and who knows where else. So long story short. My domain had a load of traffic in the blink of an eye.

joelnet-article-screenshot.png

I was lucky enough to have recently moved joel.net to Hashnode just weeks earlier. My previous web host would not have been able to handle that amount of traffic. Even during this blast of traffic joel.net was online the entire time.

Since I also host other files, I better be prepared. So I plan on going full CDN.

Cloudflare

This is where Cloudflare comes in. I use them to host the DNS for joel.net. Cloudflare will provide these CDN features by default through their DNS offering, which is also FREE. πŸ”₯

Now all I need is a place to host static files.

AWS Simple Cloud Storage (S3)

You could use any static web host, but I'm choosing S3 for this because it's what I am already familiar with.

It just needs to be online and also allow a custom domain name.

Setting Up My S3 Bucket

The S3 bucket name must match the domain name. In this case, I am using cdn.joel.net for my bucket name.

image.png

Click Next a bunch of times until you see this screen.

image.png

Be sure to uncheck Block all public access. Then check the acknowledge popup above.

Keep clicking Next until you can click Create Bucket.

Now I need to configure this bucket for Public access. So I head over to Permissions, then Bucket Policy.

image.png

I insert my bucket name, cdn.joel.net, into Resource and then paste this into the Bucket policy editor.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::cdn.joel.net/*"
        }
    ]
}

Next, I setup Static website hosting under Properties.

image.png

I check Use this bucket to host a website and set up my index.html and also my 404/404.html. I will create a directory for my 404 so that I can host assets related to the 404 in there as well.

image.png

At this point, I can upload a file and make sure it works by accessing the Endpoint from this page.

Configuring Cloudflare

The last step is to set up my Cloudflare DNS to point to my freshly created S3 bucket.

I do this by adding a new CNAME record with the name cdn and the target set as the domain for the S3 bucket.

image.png

At this point, I should be able to access my bucket using my custom domain name. So let's test my 404 page http://cdn.joel.net. Looks like it's working!

image.png

Now just to check one last thing, I open the Developer Console, click the Network tab, click the request cdn.joel.net and go to Headers.

Here I can see content-encoding: br. That means the HTML was compressed using the Brotli compression algorithm all automatically for me by Cloudflare.

image.png

End

Cheers 🍻

Discussion

pic
Editor guide
Collapse
matteojoliveau profile image
Matteo Joliveau

I would definitely re-title this article. "How I setup my own personal CDN" sounds like you're building your own network of servers to cache and serve content, while instead you're configuring a commercially available CDN.

May I suggest something along the lines of "How I sped up my website with a CDN"? I think it would better reflect the content of your otherwise very interesting article

Collapse
harishkotra profile image
Harish Kotra (he/him)

Agree. Came here expecting a DIY CDN setup but not cloudflare and static S3.

Collapse
joelnet profile image
JavaScript Joel Author

Title adjusted to add clarity as recommended πŸ‘

Collapse
matteojoliveau profile image
Matteo Joliveau

Thank you very much, Joel!

Thread Thread
joelnet profile image
JavaScript Joel Author

Everyone was right. Totally agree about the title! Cheers πŸ‘πŸ»

Collapse
ishan_kanade profile image
Ishan kanade

The title is a bit misleading, it sounds like you setup a DIY CDN on your own without using a hosted service like Cloudflare.

Collapse
joelnet profile image
JavaScript Joel Author

Title adjusted to add clarity as recommended πŸ‘

Collapse
musicin3d profile image
musicin3d

πŸ‘Ž So you DIDN'T create your own personal CDN. You used a shared CDN, one of the most popular ones at that.

Collapse
joelnet profile image
JavaScript Joel Author

Title adjusted to add clarity as recommended πŸ‘

Collapse
jhg03a profile image
Jonathan G

Agree on the misleading title. If you are however interested in building your own CDN, I recommend investigating trafficcontrol.apache.org/. I use it daily to build CDN from scratch.

Collapse
onyxcode profile image
Dan

Gonna have to agree with the other comments here and say that this title is a bit too much clickbait

Collapse
joelnet profile image
JavaScript Joel Author

Title adjusted to add clarity as recommended πŸ‘

Collapse
jesseflb_11 profile image
jesseflb

While click baits are somewhat normalized, this article title is a pretty good example of notorious click baiting and an absolute waste of time.

Collapse
joelnet profile image
JavaScript Joel Author

Title adjusted to add clarity as recommended πŸ‘

Collapse
robcodes profile image
RobCodes

Just curious. Why cloudfare over aws cloudfront? With AWS Cloudfront you could assign a role, and then you would not have to make your S3 bucket private.

Collapse
joelnet profile image
JavaScript Joel Author

There are many options to do this. AWS Cloudfront is also a good solution. Same as the S3 back-end. It could have been any static host.

Collapse
robcodes profile image
RobCodes

What I mean is that Cloudfront is configured to pull from S3. So, what benefits did you have by using a different service provider such as Cloudfare? Was it cheaper? Easier to configure? Did you find it faster. or was this one of those "becasue I can" type of things?

Thread Thread
joelnet profile image
JavaScript Joel Author

For me, this piece with Cloudflare was easier than Cloudfront because there was no setup. All I had to do was change my DNS. If I used Cloudfront, I'd have to add that service and configure it. Cloudfront is also a good option, I just didn't need it for my specific use case.

Collapse
shahadishraq profile image
Shahad Ishraq

You are basically serving from one single region. This is not geographically distributed. So a user from Europe gets the content from all the way across the Atlantic.

Collapse
joelnet profile image
JavaScript Joel Author

Because I am using Cloudflare, the requests are proxied through their CDN so it is also geographically distributed!