Setting up the Cloud Front as Content Delivery Network for the website hosted on AWS using AWS

In this blog we will set up the high level architecture on AWS ,by integrating the Apache webserver configured ec2-instance document root(/var/www/html) made persistent by mounting on EBS block device and also setting up the cloud front as the content delivery network for static objects in s3 and use the cloud front url in the web app code to reduce the latency .This is all done using aws cli.

What is Content Deliver Network?

A CDN (Content Delivery Network) is a highly-distributed platform of servers that helps minimize delays in loading web page content by reducing the physical distance between the server and the user. This helps users around the world view the same high-quality content without slow loading times.

Without a CDN, content origin servers must respond to every single end user request. This results in significant traffic to the origin and subsequent load, thereby increasing the chances for origin failure if the traffic spikes are exceedingly high or if the load is persistent.

By responding to end user requests in place of the origin and in closer physical and network proximity to the end user, a CDN offloads traffic from content servers and improves the web experience, thus benefiting both the content provider and its end users.

What is CloudFront in AWS?

Amazon CloudFront is a fast content delivery network (CDN) service that securely delivers data, videos, applications, and APIs to customers globally with low latency, high transfer speeds, all within a developer-friendly environment.

Steps to perform the task :

• Launch an EC2-instance i.e pre-configured with Apache webserver.
• Mount the document root i.e /var/www/html to the EBS block device.
• Create s3 bucket and upload static file.
• Setting up Content Delivery Network using
  CloudFront and using the origin domain as S3 bucket.
• Finally, put the Cloud Front URL on the
  WebApp code for security and low latency.

Launch an EC2-instance i.e pre-configured with Apache webserver

Here link of how to launch EC2-instance and configured with Apache Web Server and also how create our own AMI.

How to Launch Apache Webserver on AWS EC2-Instance?

So now i am launching the pre-created ami, configured with apache web server. For this go the ec2 dashboard and click on ami select the respective-ami and click on launch and proceed further as shown in the link to launch the instance.

After the instance has launched get the instance terminal by connecting to the web browser connection or by using putty. Then start the Apache webservices by using the command “systemctl start httpd” .

This is how our website look like after starting the webservices

Mount the document root i.e /var/www/html to the EBS block device

Since our document root (/var/www/html)is on flash drive we need attach this to the persistent volume, for this we create a EBS volume and mount it to the document root.

To create a EBS volume go to the EBS dashboard and click on create volume and give the required amount of size depends on your use here iam giving 1GB.our EBS volume is created successfully.

Now attach the volume to our instance for this select the volume and click on actions then select attach volume and select our instance. The EBS volume is attached to the instance successfully.

Now we should mount the volume to our document root for this we need to make partitions in the volume and then format partitions.

The images shows how to make partitions in the hard disk.

Now format the partitions using command mkfs.ext4 /dev/xvdf1

Now its time to mount the volume to the document root, for this we use a command mount /dev/xvdf1 /var/www/html.

Create s3 bucket and upload static file

To create S3 bucket go to S3 services in storage and click on create bucket

Give unique name to the bucket and deselect the public access deny settings and click on the create bucket our bucket has created succesfully

Now upload static files into the bucket, for this open bucket and click on upload files and upload the files and give public to read permissions.

Setting up Content Delivery Network using Cloud Front and using the origin domain as S3 bucket.

To create Clod Front service go to cloud front dashboard in network and content delivery .

Click on Create Distribution and select the origin domain name as our s3 bucket and click on create our cloud front distribution is created successfully.

Now select the cloud front dns name and use it in our webapp code

Thank You