Source : Google

High Availability Architecture using AWS Cloud Front

🔰🔰 AWS CLOUDFRONT is a service provided by AWS for fast Content Delivery. It is a fast content delivery network ( CDN ) service that securely delivers data, videos, applications and APIs globally with low latency, high transfer speeds, all within a developer-friendly environment. 🔰🔰

I am going to explain a use-case of Cloud Front in this article. 📝

So, lets understand our use-case first. 🧐

Suppose we have created a website that has some static content such as a picture and the website contents along with the static contents are present in the Mumbai region data center of AWS. For high durability and availability we keep the static contents like images, videos in AWS S3 Bucket.

Now the clients of our website from India will not face any latency in seeing the images or videos present in the website, but the clients visiting the website from other countries like Australia, US will face a latency in viewing the images or videos.

Why this issue is happening ? 🤔

👉 Before going into that answer one point to be noted is that Amazon S3 services are global but the S3 bucket storing the images or videos is present in the Mumbai datacenter.

This S3 bucket contains the images and its URL is used in the HTML code while creating the webpage. So when the clients from US visit the website, the network traffic travels from their location to the Mumbai datacenter to fetch the images via public internet which is slow and so the clients face the issue of latency.

The solution to this problem is to use AWS CLOUD FRONT . 📝 ❗❗

So, how exactly is CloudFront services going to help us ? 🤔

Let’s see that.

AWS Cloudfront will create a dynamic link which will be registered in all the edge locations of AWS. These edge locations are small datacenters which stores the caches of the website. The dynamic link that is provided by AWS Cloudfront is used in the HTML code in place of the S3 URL as was done previously.

AWS Edge Locations, Source : Google

So, the flow is like this -

👉 The traffic of the client while visiting the website will reach the nearest edge location because of the dynamic link present in the HTML code. In the edge location if the caches of the website is present, then the website with the images will be visible to the client without any latency as the time to travel from US to the Mumbai datacenter is cut short.

Source : Google

👉 If the caches is not present, then after reaching the edge location, the traffic will go to the Mumbai datacenter to fetch the images via AWS global infrastructure. It is a private network setup by AWS that gives high speed data transfer. Using it in no time the caches will be created in the edge location and the client can view the website.

Source : AWS

NOTE: This happens only for the first client, that is the first client will face the latency, but after that no other client will face any latency as already the caches will be there.

This way the problem of latency in viewing the images in the website is solved by using AWS Cloudfront. 🥳🎊

Note: This dynamic link created by AWS Cloudfront is same for all the edge locations. So we do not need to change it for specific countries and clients from all countries can access the website without facing any latency.

Now let’s get our hands dirty with some code for creating this High availability architecture.

We will be creating this architecture from the command line using AWS CLI.

I will be using RedHat Linux 8 for doing this practical.

Source : Google

The practical can be done from the webUI very easily but in the industry we need to work in the CLI so, I am doing the practical using AWS CLI.

After you have downloaded the AWS CLI version 2 open the Terminal and run the following command to check if its properly installed.

aws --version

Lets point out the steps that we need to do to create the architecture -

📍 Webserver 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.

Certain pre-requisite 🔔

📍 Create an AWS IAM user for doing this practical.

You can refer to my article containing the steps to create an IAM user.

Link for your reference - https://www.linkedin.com/pulse/automating-aws-from-cli-rahul-sil

In this article I have also explained about launching EC2 instances, creating key-pair, security group, attaching EBS volumes from the CLI which we will be requiring here. Here I won’t be explaining those and you can go to the above mentioned article and look into it. 😊😊

After you have created your IAM user account, you will get your credentials to login to the account from the terminal.

Run the following command and give the access key and secret key when prompted.

aws configure

So, now we are ready with the initial setup and now we can proceed with the further practical.

I will be creating a bash script for creating the architecture to achieve automation 😍😍 !!

Before diving into the script lets understand how the individual components of the architecture are created.

I have explained about the creation of the EC2 instance, key-pair, security group and attaching a EBS volume to the instance in the article link given above. So, here I will be focusing on creating a S3 bucket and uploading an object to it and creation of CloudFront.

Creating a S3 Bucket -

aws s3api create-bucket  --bucket "$bucket_name"                      --create-bucket-configuration LocationConstraint="$region"           --region "$region"
Screenshot from AWS Console

As you can see using the AWS CLI command we can create the s3 bucket.

Uploading an image / file in the Bucket -

aws s3api put-object --acl public-read-write                         --bucket "$bucket_name"     --key "$object"     --body "$object"           --content-type "image/jpeg"                                         --content-disposition "inline; filename=$object"
AWS Console Screenshot

Here we uploaded the image in the S3 bucket and made it public view accessible.

Creating CloudFront -

aws cloudfront      create-distribution                                    --origin-domain-name     "$bucket_name.s3.$region.amazonaws.com"

With this command we can create a cloudfront. Now while creating the cloudfront we need to give some origin, and that origin is the S3 bucket url that we have created.

AWS Cloudfront Console Screenshot

Now using the domain name that cloudfront provides we can access the object that we have stored in S3.

For accessing the object use the following URL -

http://domain-name/object-name

Using all this concept we create a bash script. The link to the GitHub repo having the script -

I hope you liked my article. I tried to explain everything from the basic.😊

Feel free to tell your thoughts about this article by commenting down. 😊😊

Do check out my LinkedIn profile mentioned below and follow me on medium, I will try to come up with 2–3 articles a month. 🤗

Thank you. 😊✌

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rahul Sil

Rahul Sil

25 Followers

I am a tech enthusiasts. I love exploring new technologies and creating stuff out of them !! ✌