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.

> aws ec2 create-key-pair --key-name key123 --query 'KeyMaterial' --output text > key123.pem
> aws ec2 create-security-group --group-name sg1  --description "Security Group from CLI"
> aws ec2 authorize-security-group-ingress   --group-name sg1   --protocol all    --port all  --cidr 0.0.0.0/0
> aws ec2 run-instances --image-id ami-0e306788ff2473ccb --instance-type t2.micro --key-name key123 --tag-specifications  ResourceType=instance,Tags=[{Key=Name,Value=InstanceFromCLI}]  --security-groups sg1

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.

aws ec2 create-volume --volume-type gp2 --size 1  --availability-zone ap-south-1b --tag-specifications ResourceType=volume,Tags=[{Key=Name,Value=VolumeFromCLI}]

Creating Volume

Next, attaching the created volume to our instance.

aws ec2 attach-volume  --volume-id vol-0542970d85c34e62d  --instance-id  i-0cb54b9cae507f807  --device xvdv

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,

sudo yum install httpd -y

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),

sudo fdisk /dev/xvdv

Creating Partition

Formatting the partition created (/dev/xvdv1),

sudo mkfs.ext4 /dev/xvdv1

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

sudo mount /dev/xvdv1 /var/www/html

Format and Mount

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

echo '<center><h1>Task Done</h1></center>' > /var/www/html/file.html
systemctl start httpd

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.

aws s3api create-bucket — bucket vkb101 — acl public-read — region ap-south-1 — create-bucket-configuration LocationConstraint=ap-south-1

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.

aws s3 cp arth.png  s3://vkb101

Adding image to bucket

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

aws cloudfront create-distribution --origin-domain-name vkb101.s3.amazonaws.com --default-root-object arth.png

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,

aws s3api put-object-acl --bucket vkb101 --key arth.png --acl public-read

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.

echo '<center><img src="https://dcfybkqy23w2s.cloudfront.net" height=500 width=500></center>' >> /var/www/html/file.html

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 ! 😀