Amazon CloudFront

High Availability Architecture with CloudFront — AWS CLI

We will be creating a small architecture using the CloudFront service of AWS that provides facility of CDN ( Content Delivery Network ) which helps in providing static data with high security and low latency across the globe.

The architecture includes-

🔹 Web server configured on EC2 Instance.

🔹 Document Root(/var/www/html) made persistent by mounting on EBS Block Device.

🔹 Static objects used in code such as pictures stored in S3.

🔹 Setting up Content Delivery Network using CloudFront and using the origin domain as S3 bucket.

🔹 Finally place the Cloud Front URL on the webapp code for security and low latency.

So here, first we have created a key pair ‘key123’ and saved this key. Then we created a security group ‘sg1’ and added a ingress or inbound rule to allow all. Finally launched a t2-micro instance using the created key and security group.

Launching Instance

Now we are creating a volume of gp2 type and size 1 GB in the same availability zone of our instance as we will be attaching this volume to our instance.

Creating Volume

Next, attaching the created volume to our instance.

Attaching volume to instance

We have to configure web server in our ec2 instance. So connect to the instance using the key and public DNS of the created instance,

Then install apache httpd package,

you may login as root using “sudo su -”

Installing Apache httpd

You can see the disk attached /dev/xvdv, using fdisk -l command.

Attached volume

For storing data into a storage device we have to do three steps,

  1. create partition
  2. format
  3. mount

So now creating a partition (here I did with default values and created full size partition of the disk),

Creating Partition

Formatting the partition created (/dev/xvdv1),

And then mounting this to the root directory of httpd server,

Format and Mount

We are now creating a sample html file inside the document root of apache httpd and then starting the httpd server.

We are done with web server and mounting, now we will create a CloudFront distribution. As it requires an origin, we are taking S3 as origin.

So first create a S3 bucket, here I created a bucket named ‘vkb101’ (which should be unique) with public-read access for Mumbai region.

Creating bucket

Let’s upload an image to the bucket, there is an image ‘arth.png’ in the same directory and we are copying it to s3 bucket.

Adding image to bucket

Now we are creating a distribution, giving the origin domain name of S3 bucket and object as the uploaded image.

Creating CloudFont distribution

CloudFront will give us a domain name to be used for accessing the image of the s3 bucket with low latency with the help of AWS edge locations.

But the image uploaded to the S3 bucket will not be accessed as it is not public, so also make the object (image here) public readable,

Finally we are updating the html file at document root of web server by adding the CloudFront URL to it for showing the image in our page.

Adding CloudFont URL to code

Now, if we access our page from browser we will successfully get it. So our code is stored in document root which is made persistent by attaching EBS volume and the image (static data) is retrieved from S3 bucket using CloudFront URL in the code.

Thank YOU ! 😀

Tech and Programming, MLOps, DevOps Assembly Lines, Hybrid Multi Cloud, Flutter and Ansible Automation