EC2 ○ EBS ○ S3 ○ CloudFront

Muhammad Tabish Khanday

Nov 19, 2020·6 min read

📄 Problem Statement:

🔰 Create High Availability Architecture with AWS CLI. The architecture includes:

1. Webserver configured on EC2 Instance

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

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

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

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

What is CloudFront? How it uses a Content Delivery Network?

✍🏻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.

Lets Jump to the Practical Part:

In this practical, we will use the AWS CLI Tool to perform all the steps required to create a High Availablity Architecture using AWS Services like EC2, EBS, S3, and CloudFront.

AWS Command Line Interface

The AWS Command Line Interface (CLI) is a unified tool to manage your AWS services. With just one tool to download and configure, you can control multiple AWS services from the command line and automate them through scripts.

If you want to know how to get started with AWS CLI Tool then check out this article:

In this article, I have covered the basics of how to create a key pair, security group, etc in the AWS Cloud. I will use the same security group and key pair in this practical aso.

Step 1: Configure Web server on the EC2 Instance

Let’s launch an instance using this command:

$ aws ec2 run-instances --image-id ami-0e306788ff2473ccb --instance-type t2.micro --count 1 --subnet-id subnet-0f20d73e825bd2692 --security-group-ids sg-0344355829b3965a2 --key-name aws-arth-key

Adding tags to this instance:

$ aws ec2 create-tags  --resources  "i-0dc4220a72297cff4"  --tags Key=Name,Value=webserver-instance

Public IP / External IP of this Instance:

$ aws ec2 describe-instances --instance-ids i-0dc4220a72297cff4 --query 'Reservations[*].Instances[*].PublicIpAddress'

Now we can SSH to this Instance and configure Web Server on it.

$ ssh -i aws-arth-key.pem ec2-user@13.232.68.159$ sudo su - root

# yum install -y httpd; systemctl start httpd; systemctl enable httpd

Step 2: Make the Document Root(/var/www/html) persistent by mounting on EBS Block Device.

Here firstly we will create an EBS volume of size 1GB using this command :

$ aws ec2 create-volume --availability-zone ap-south-1a --size 1 --no-encrypted

Adding tags to this EBS Volume:

$ aws ec2 create-tags  --resources  "vol-01bf2e5f1ef1d89b5"  --tags Key=Name,Value=webserver-ebs

Now we will attach this EBS volume to our instance using this command :

aws ec2 attach-volume --volume-id vol-01bf2e5f1ef1d89b5  --instance-id i-0dc4220a72297cff4 --device /dev/sdf

Now we have to do Partitioning, format, and mount our attached EBS volume.

Here, by using #fdisk -l we can verify EBS volume is attached or not

As we are first time creating partitions use:

# fdisk /dev/xvdf

then press p i.e primary partition and press n to create a new partition, then to save it press w.

To Format this volume use:

$ mkfs.ext4 /dev/xvdf1

To connect our new hard disk to O.S or instance we always need a driver because the driver is the one who manages kernel systems. So for the driver, we use:

$ udevadm settle

Now, To Mount this volume to Document Root Folder i.e /var/www/html we can use:

$ mount /dev/xvdf1 /var/www/html

We can also verify it by using this command:

$ df -h

Now We have to go to /var/www/html/ directory to configure or store our HTML code for website using :

$ cd /var/www/html/

For testing, I am creating an index.html file and writing my website code in it.

$ vi index.html

Now you can access this website using the Public IP/ External IP of the EC2 Instance:

Step 3: Static objects used in code such as pictures, videos, media files are stored in Amazon S3 Bucket.

Now we have To store Our Static Data(Like videos, pictures, pdf, etc) on S3 so we have to first create our S3 Bucket and Upload the File To that so that we can use the link of S3 in our Webapp to deliver our contents.

So we will create an S3 bucket using this command and also providing public access so that anybody can access it.

$ aws s3 mb s3://mywebserver-s3bucket-us  --region us-east-1

To upload any file to S3 bucket use this command:

$ aws s3 cp Tabish.jpg s3://mywebserver-s3bucket-us/Tabish.jpg
$ aws s3 ls s3://mywebserver-s3bucket-us

Now we need to make our Object Public:

$ aws s3api put-bucket-acl --bucket mywebserver-s3bucket-us --acl public-read
$ aws s3api put-object-acl --bucket mywebserver-s3bucket-us --key Tabish.jpg --acl public-read

Here I am also making my bucket public for testing. Usually, it's not a good practice to keep our bucket public.

Hence, we have successfully saved our static data to the S3 bucket. Now we will use the link of our file to add in our HTML code.

# vi index.html

Visit: http://[PUBLIC_IP]

As you can see the Latency is about 7163ms when we used S3 Bucket to store our image and used the Object URL in the website directly.

This is not a High Availability Architecture because this architecture doesn’t satisfy the following conditions:

1. Low Latency
2. Don’t Use the AWS Global Infrastructure

So in order to meet the Low latency and use the high-speed data transfer, we must use the Content delivery network (CDN) concept.

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

Firstly we will set up Content Delivery Network using CloudFront in Amazon-CLI by this command:

$ aws cloudfront create-distribution  --origin-domain-name mywebserver-s3bucket-us.s3.amazonaws.com --default-root-object Tabish.jpg

Step 5: Replace the image URL in the index.html file with Cloud Front URL for security and low latency.

Visit: http://[PUBLIC_IP]

Now you can see the Latency is about 438ms which is very less as compared to the previous one (7163ms).

Finally, our Website is created with High Availability Architecture 🥳

That’s all for today! I’ll be back with some new articles very soon, thanks! 🤗

Muhammad Tabish Khanday