In this article we will discuss what is CloudFront and set up a high availability architecture using AWS command line.
Let’s jot down what tasks are we going to perform:
🔰 Configuring Web Server on top of EC2 Instance
🔰 Document Root (/var/www/html) made persistent by mounting on EBS volume
🔰 Static Objects used in code such as pictures stored in S3
🔰 Setting up CDN using CloudFront with origin domain as S3 bucket
🔰 Finally place the CloudFront URL on the webapp for security and low latency.
All the above tasks we are going to perform using AWS CLI. For this aws CLI (either version 1 or 2) must be installed on your system and configured by authentication and secret key.
1️⃣ Launching an EC2 instance
Here we have launched an ec2 instance with linux image using pre-created key and security group.
We can also see the launched instance from AWS management console.
2️⃣ Creating and Attaching EBS volume
By this command we create an EBS volume of size 1GB in the same availability zone as of our ec2 instance. Our next step would be to attach this volume with our instance.
Here, we gave instance id, volume id and device name to attach the volume. We can see this in the management console.
Next, we have remotely logged into the instance via putty program and there we can see all the disks attached through # fdisk -l command
3️⃣ Installing software to set up web server
As we want to set up web server on top of this instance, we have to install httpd software that is made available by Apache community and hence it is also known as Apache Web Server. For this we use # yum install httpd command.
4️⃣ Mounting Document Root upon EBS partition
Our next step is to make a partition, format it and then mount it upon Document Root. For this first we are creating a partition of 250MB.
Document Root is a folder -> /var/www/html which httpd software creates upon installing. All the web pages or web apps that we create and want to serve on our server must be created inside this folder.
For formatting, here we use ‘ext4’ format. Command for which is : # mkfs.ext4 /dev/xvdf1
Now, we will mount this partition on our Document Root folder so as to use this storage space.
4️⃣ Starting the web server
Create any html page in the /var/www/html folder. Now we have to start the services using # systemctl start httpd command. By this command our server starts but will stop upon rebooting. To make server status running even after reboot, use # systemctl enable httpd command.
We can see our web page by browsing the public IP of system and page name. Example : 22.214.171.124/index.html
5️⃣ Creating S3 bucket
Although EBS storage is durable but it is only available when it is attached to an EC2 instance. Here S3 bucket that is an Object storage can be used to stoe static content such as images, videos, pdfs etc. as it has high durability and high availability. For creating an S3 bucket we use following command :
Now we are going to upload images into our bucket :
Here we can see that images have been uploaded into our bucket.
Our next step is to make our images in the S3 bucket public and give their URL in our web page so that pictures can be accessed publically.
6️⃣ Setting up CloudFront
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. It speeds up distribution of static and dynamic web content, such as . html, . css, . js, and image files.
CloudFront Architecture :
What is an Edge Location ?
- This is the location where content will be cached. This is separate from an AWS Region/AZ.
What is meant by Origin ?
- This is the origin of all files that the CDN will distribute. This can either be S3 bucket, an EC2 Instance, an Elastic Load Balancer or Route 53.
What happens when a client makes an HTTP Request :
- CloudFront receives the request from the nearest edge location to the client.
- After receiving the request, there are multiple cases:
- If the content does not exist in the cache of the edge location, CloudFront redirects request to the origin (S3), retrieves the content and serves it to the client. It is called a “miss”.
- If the content exists in the cache, cached version is served to the client. It is called a “hit”.
Setting up CloudFront using CLI :
In the origin-domain-name , give the name of origin, Here we are using the S3 bucket we created ‘testwebserver3101’.
It might take some time in starting the distribution. We can see this from console.
Our next step is to give this domain name in our code so that our webapp will now get images through CDN from any part of the world.
This is our page that contains two images which comes through our CloudFront distribution.
On reloading the page, first picture takes some time, as it is a ‘miss’ and has to go to origin since no cache is found in the nearest edge location. Whereas second image does not take time to load as its cache is present.
Hence we have successfully created an high availability architecture.
✔ CloudFront also provides us the facility to restrict our viewers. Using Geo-Restrictions we can put classify regions as Whitelist or Blacklist.
✔ It also gives us facility to check various statistics such as number of hits/miss, viewers stats (most used browser, device etc.) and lot more. All this can be found under Reports and Analytics in CloudFront.
Hope this article was helpful.