Creating a CDN enabled webserver on AWS using CloudFront

Low latency and fast delivery of content is now a necessity for all the companies that want to hold on to their customers because no one likes a buffering screen and with the increase of expectations of the customers holding on to them requires sustaining an architecture that is responsive.

What is CDN?

A Content Delivery Network (CDN) is a globally distributed network of web servers or Points of Presence (PoP) whose purpose is to provide faster content delivery.

The content is replicated and stored throughout the CDN so the user can access the data that is stored at a location that is geographically closest to the user. This is different (and more efficient) than the traditional method of storing content on just one, central server.

Today I would be creating a single page website enabled with CDN using AWS cloudfront service. I would be implementing most part of the work using CLI since it makes things faster when compared to GUI once you are comfortable with it.

1. Firstly we will setup the webserver to host our website.
2. Then we will mount the website to a non root partition to secure it from an OS failure.
3. We will create a webpage with the images for webpage stored in an S3 bucket.
4. Then we will integrate cloudfront with our website to enable

I would be using RHEL 8 for the configuration

Setting up the Apache WebServer

For hosting a website we need a webserver. I would be using Apache webserver today to setup the website.

1. First we install the apache server using yum

yum install httpd

2. Start the httpd service

systemctl start httpd

Creating the Partition

We create partition to host the website in a directory different from the root directory so that the website remains safe in case of an OS failure.

To check the current disks in the system we use the command

fdisk -l

Before we go on to create a partition I would like to give a brief of why we need a partition. While hosting the website the apache webserver looks for the html files in the “var/www/html” folder by default, this location can be changed but we dont have any such requirement right now.

If this storage unit is loaded in the root folder then we have the risk of losing the data in case of the OS failure so we add it to a different hard disk.

For this we create an EBS volume and then mount it on our system.

For creating an EBS volume we use the following command

aws ec2 attach-volume — instance-id i-0eb5b397e06de5a85 — volume-id vol-0fa83ec3a5a89efc4 — device /dev/xvdf

This storage is like an external pendrive . For adding a partition there is a 3 step process:

• Creating a storage unit
• Formatting the unit
• mounting the storage unit to the system

Why this process is necessary is beyond the scope we are discussing today.

When we ran the above command we created the unit.

Now we need to format the storage unit. For that we first create a partition in the storage unit first. for that we use the following command in the order given.

fdisk /dev/xvdf(Enter the partition program)

“n”(create a new partition)

“p”(create a new primary partition)

select the storage sectors

Exit by typing “w”

Now our partition is created so we need to format the partition

mkfs.ext4 /dev/xvdf1

We now need a directory which would be mounted on this storage. In our case it is the /var/www/html . For mounting we use the following command

mount dev/xvdf1 /var/www/html

Congrats the work is done of securing our website data of OS failure.

But our task is to create CDN enabled website.

Setting up the S3 bucket

This creates a bucket named “isthisavaliable” in region specified.

aws s3api create-bucket — bucket isthisavaliable — region ap-south-b

I uploaded one image in the bucket

The image must be made public so that anyone can see it.

The object URL specified in the bucket for the current image uploaded would be used in the html file which I would be showing now. So that the server loads the image in the html file from the S3 bucket.

I created a simple HTML file for the demo.

Since the apache webserver is active right now we can view the file using the public IP of the instance .

Now the concept of cloudfront comes into play which I discussed earlier. Since we want the image to be cached at an edge location to the user that tries to view the page we need to enable the cloud front.

Setting up the CloudFront

This command creates a new cloudfront distribution. Giving the origin domain name is mandatory .

The cloudfront gives us a new domain address which enables the CDN in the origin domain bucket.

By checking the cloudfront properties we need to copy the “domain name” attribute so that we can use this URL in our html file we made earlier.

Lastly we need to update the image source in the html file.

Now this URL allows us to utilize the CDN. Whenever the user logins from a certain location for the first time the cloudfront copies the data to an edge location that is closer to the user, so the next time a new user tries to access the same information from that location he is able to get the data from the local edge location itself .This reduces latency and the content delivery faster.

Thanks