Building an architecture with AWS CloudFront, EC2, S3 using AWS CLI…!

Source-Google images

Amazon CloudFront

Fast, highly secure, and programmable content delivery network (CDN)

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. CloudFront is integrated with AWS — both physical locations that are directly connected to the AWS global infrastructure, as well as other AWS services. CloudFront works seamlessly with services including AWS Shield for DDoS mitigation, Amazon S3, Elastic Load Balancing or Amazon EC2 as origins for your applications, and Lambda@Edge to run custom code closer to customers’ users and to customize the user experience.

Source-Google images

Lastly, if you use AWS origins such as Amazon S3, Amazon EC2 or Elastic Load Balancing, you don’t pay for any data transferred between these services and CloudFront.

CloudFront is a CDN (Content Delivery Network). It retrieves data from the Amazon S3 bucket and distributes it to multiple datacenter locations. It delivers the data through a network of data centers called edge locations. The nearest edge location is routed when the user requests for data, resulting in the lowest latency, low network traffic, fast access to data, etc.

Features of CloudFront

Fast − The broad network of edge locations and CloudFront caches copies of content close to the end users that results in lowering latency, high data transfer rates, and low network traffic. All these make CloudFront fast.

Simple − It is easy to use.

Can be used with other AWS Services − Amazon CloudFront is designed in such a way that it can be easily integrated with other AWS services, like Amazon S3, Amazon EC2.

Cost-effective − Using Amazon CloudFront, we pay only for the content that you deliver through the network, without any hidden charges and no up-front fees.

Elastic − Using Amazon CloudFront, we need not worry about maintenance. The service automatically responds if any action is needed, in case the demand increases or decreases.

Reliable − Amazon CloudFront is built on Amazon’s highly reliable infrastructure, i.e. its edge locations will automatically re-route the end users to the next nearest location if required in some situations.

Global − Amazon CloudFront uses a global network of edge locations located in most of the regions.

We are going to perform tasks on the Amazon CloudFront using AWS CLI so that it clears the concept of CloudFront.

🎯 TASK DESCRIPTION:

Create High Availability Architecture with AWS CLI*

🔻 The architecture includes-
✔️ 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 a Content Delivery Network using CloudFront and using the origin domain as an S3 bucket.
✔️ Finally, place the Cloud Front URL on the web app code for security and low latency.

So let’s start the journey❗️

Some parts I have already covered in my other blog post, so please refer to the below post first and then continue here. I have covered — how to launch the EC2 instance and how to attach the EBS volume to it using AWS CLI…in very detail.

✨Building a small Cloud Infrastructure using AWS CLI..!

The architecture includes-

1. Webserver configured on EC2 Instance (This is indicated as ‘origin server’ in the below figure)

2. Document Root(/var/www/html) made persistent by mounting on EBS Block Device. (Basically, all our HTML code is stored in this volume)

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

4. Setting up a Content Delivery Network using CloudFront and using the origin domain as an S3 bucket.

5. Finally place the Cloud Front URL on the web app code for security and low latency.

Overview of what architecture we are building(created by Sanket Badjate)

✨Step-1: Configure the AWS CLI

For general use, the aws configure the command is the fastest way to set up your AWS CLI installation.

$ aws configure

✨Step-2: Create a Key-Pair for the EC2 Instance

• A key pair, consisting of a private key and a public key, is a set of security credentials that you use to prove your identity when connecting to an instance.
• Amazon EC2 stores the public key, and you store the private key.
• You use the private key, instead of a password, to securely access your instances.
• Anyone who possesses your private keys can connect to your instances, so it’s important that you store your private keys in a secure place.

$ aws ec2 create-key-pair --key-name keyCloudFront --query 'KeyMaterial' --output text > keyCloudFront.pem
$ aws ec2 describe-key-pairs

✨ keyCloudFront has been created successfully.

✨Step 2: Create a Security Group for the EC2 Instance

• A security group acts as a virtual firewall for your instance to control inbound and outbound traffic.
• Security groups act at the instance level, not the subnet level. Therefore, each instance in a subnet in your VPC can be assigned to a different set of security groups.
• For each security group, you add rules that control the inbound traffic to instances, and a separate set of rules that control the outbound traffic.

$ aws ec2 create-security-group — group-name “sgCloudFront” — description “Security group which allows only SSH traffic”
$ aws ec2 authorize-security-group-ingress --group-id <Your_group_id_ from the above command> --protocol tcp --port 22 
--cidr 0.0.0.0/0
$ aws ec2 describe-security-groups --query 'SecurityGroups[0]'
--output table

✨Thus our security group “sgCloudFront” with SSH inbound/ingress rule has been successfully created.

✨Step 3: Launch an Elastic Cloud Compute Instance using Amazon Linux 2 AMI and the above created Key-Pair and Security Group.

• Amazon Elastic Compute Cloud (Amazon EC2) is a web service that provides secure, resizable compute capacity in the cloud. It is designed to make web-scale cloud computing easier for developers. Amazon EC2’s simple web service interface allows you to obtain and configure capacity with minimal friction.
• Using Amazon EC2 eliminates your need to invest in hardware upfront, so you can develop and deploy applications faster.
• You can use Amazon EC2 to launch as many or as few virtual servers as you need, configure security and networking, and manage storage.

$ aws ec2 run-instances 
--image-id ami-0e306788ff2473ccb 
--instance-type t2.micro 
--count 1 
--subnet-id subnet-23232a4b 
--security-group-ids sg-0b34c4fd1ba1dbfd7 
--key-name keyCloudFront
$ aws ec2 create-tags --resources i-079fbc07d8d4cce0d --tags Key=Name,Value=taskCloudFront

✨We have successfully launched the EC2 instance in AWS.

✨Step 4: Create an Elastic Block Storage volume of gp2 type and size of 1GiB.

• Amazon Elastic Block Store (EBS) is an easy to use, high-performance block storage service designed for use with Amazon Elastic Compute Cloud (EC2) for both throughput and transaction-intensive workloads at any scale.
• A broad range of workloads, such as relational and non-relational databases, enterprise applications, containerized applications, big data analytics engines, file systems, and media workflows are widely deployed on Amazon EBS.

To create an EBS volume, we are going to use create-volume subcommand of ec2 command:

$ aws ec2 create-volume --availability-zone ap-south-1a --size 1 
--volume-type gp2
$ aws ec2 create-tags --resources <Volume_id> --tags Key=Name,Value=<Tag_Name>
$ aws ec2 describe-volumes --filters Name=status,Values=available 
--output table

NOTE: The volume and instance must be in the same Availability Zone

✨We have successfully created an EBS Volume in the same availability zone where our EC2 instance is present.

✨ Step 5: Attach the volume to the EC2 instance that we have created above.

Now the final step. We need to attach the EBS volume(CliEBS) to EC2 Instance for using it.

To attach an EBS volume to an EC2 instance, we are going to use attach-volume subcommand of ec2 command.

$ aws ec2 attach-volume 
--volume-id <Volume_id> 
--instance-id <instance_id> 
--device /dev/sdf

✨We have successfully attached the EBS volume to the EC2 instance.

✨ Step 6: Attaching the external EBS Volume to the web-server document root i.e., /var/www/html

Even though we have completed all the steps successfully, we cannot use the volume because it is not formatted and partitioned yet.

Now to get the shell of the launched instance we can use OpenSSH for our base system.

we have to switch to the root user by typing the following command:

$ sudo su - root

Install the webserver:

we are going to install the apache web server so that we can access our web app globally.

$ yum install httpd
$ systemctl start httpd

Then we will list all the drives in the instance including the one just attached as /dev/xvdf

$ fdisk -lfdisk --> is a menu-driven command-line utility that allows you to create and manipulate partition tables on a hard disk.
-l -->  List the partition tables for the specified devices and then exit.

• Now we will partition the /dev/xvdf device, using fdisk command.

$ fdisk /dev/xvdf

Now press ’n’ to add a new partition, after that press ‘p’ to create a primary partition. Then press 3 times to enter and at last press ‘w’ to quit.

• Now we have to format the new partition for Linux File-System using mkfs.ext4 the command

$ mkfs.ext4 /dev/xvdf1
$ mount /dev/xvdf1 /var/www/html
$ df -hdf -> The df command is used to show the amount of disk space that is free on file systems.
-h -> It is for Human Readable.

Now we can use that EBS drive to store the web app code. Now even though our root drive failed or corrupted then it will not harm our web app code as we have put that code into the external disk called EBS.

The durability of the EBS is 99.999%, which is again somewhat less and has a risk of failure. The most important thing on the website is the user’s data if the user’s data lost by any means then it will be a tremendous loss to the company and may affect the business.

Therefore we will be storing the static data such as files, images, videos, etc. on S3 storage as the durability of the S3 storage is 99.999999999% (11 9’s) which is very high and S3 is fully managed.

Step 7: Create S3 bucket to store some static content:

Amazon Simple Storage Service (Amazon S3) is an object storage service that offers industry-leading scalability, data availability, security, and performance.

This means customers of all sizes and industries can use it to store and protect any amount of data for a range of use cases, such as data lakes, websites, mobile applications, backup and restore, archive, enterprise applications, IoT devices, and big data analytics.

Amazon S3 provides easy-to-use management features so you can organize your data and configure finely-tuned access controls to meet your specific business, organizational, and compliance requirements.

Amazon S3 is designed for 99.999999999% (11 9’s) of durability, and stores data for millions of applications for companies all around the world.

$ aws s3api create-bucket --bucket s3cloudfronttask --region ap-southeast-1 --create-bucket-configuration LocationConstraint=ap-southeast-1
Note-- Don't use any capital letters in bucket name and bucket name should be unique in that region, same bucket name is already present then it will throw error then try different names.

✨ Step 8: Create a Cloud Front distribution in order to provide CDN:

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.

$ aws cloudfront create-distribution 
--origin-domain-name s3cloudfronttask.s3.amazonaws.com

We have to give the origin domain name while creating the distribution, in our case, the origin is S3.

Origin is the place or storage from where the CloudFront will copy the requested data the first time when the cache miss happens and copy it to the cache of the CloudFront. And next time if the same request came for the same data then that request is served from the nearby CloudFront cache.

✨ Step 9: Create a web page, and access it from the webserver that we have created !!

We have to create the web page and the code of that web page is stored in the /var/www/html location, in short, it is EBS storage as we have mounted our EBS storage in the /var/www/html location.

I have stored the images in my S3 bucket and I gave the link of each image in the src attribute of the image tag.

If you want to download the images click here

We have implemented the Cloud Front in our Architecture, CloudFront will give the global Url for our images.

you can find the domain-name given be the CloudFront at the time you install the distribution or you can check it out from the web UI also.

Now use this Domain as the source URL for the images.

Replace the image src URL from the above with the new src URL

🎉 We have successfully, connected the CloudFront to our Web App. Now if any user access this the images, then first the request will go to the nearest Edge Location, if the images is present in the cloudfront cache then it is cache hit and the images is served from the cache itself, if the images in not present in the CloudFront cache then it is cache miss, then the first time the request goes to the Origin storage(here S3) copy the images from there to ColudFront cache and from there the image is servers to the client.

Check out the short video so that the concept of the CloudFront would be clear.🤟

checkout.mp4

✨Congratulations readers, we have successfully completed the task..! 😌

✨That’s all from my side, if you find the article useful do follow and like my post.🤓

Thank you! ✌🏻

💻I keep writing blogs about various technologies in computer science, so feel free to follow me on Medium.

Sanket Badjate - Medium

👨‍💻Connect me on LinkedIn

Sanket Badjate - Specialist in Python (With full stack & flask) - Indian Innovation &amp…