Deploying Fast and Secure Web App on AWS Part 3: Caching

Ewere Diagboya
MyCloudSeries
Published in
5 min readMar 15, 2021

--

Shared Hosting to Cloud Hosting

Introduction

In the previous section which was Part 2b which was focused on the website setup, we talked about how to set up a simple website on Amazon S3 using the AWS Management Console User Interface. The step explains how to create an S3 bucket make the bucket a website and then upload a simple HTML file into the bucket. Then we previewed the page on the browser using the URI from the S3 bucket.

That is the first layer of this series, which is the S3 bucket that will host the website. But do not forget our title, we are going to deploy a Fast and Secured web application on AWS. This part of this series is focused on the Fast part of the setup. There are a couple of things that make a website fast most especially for frontend applications. The most basic thing developers do is to minify the Javascript, CSS and HTML of the application so that the load time of the website is reduced.

But no matter how the website is minified, the website can still be slow. Take, for example, you have a website that serves the whole world. The server where the application is hosted is in California, United States and you have users who need to visit it from Bengaluru, India.

Distance between Carlifornia and Bengaluru

There is going to be some considerable latency and the website is going to be slow due to this. To solve this problem, a CDN (Content Delivery Network) is used. It is a global distributed network of data centres that cache the website and are closer to customers and users. Hence, it improves the speed of the website and makes it faster for users to be able to reach the website. If the application is deployed in a server, it reduces the number of requests made to the server because the CDN system is where users land when they visit the website.

Does AWS have CDN ?

AWS Global Infrastructure supports CDN and they are called Egde Locations or PoP (Point-of-Presence). There are 200 globally at the moment connecting countries and continents all over the world. The following diagram shows the different Edge Locations on the AWS global network.

Edge Locations in AWS Global Network

The service that rides on the CDN capabilty in AWS is called Amazon Cloudfront. Amazon Cloudfront is the service that makes it possible to cache your websites in over 200 PoP (Points of Presence) locations around the world. Thereby making applications and streaming services faster because of the distributed PoP around the globe, users get content faster and pay less for data transfer.

Applying Caching to our Website

We setup our website in the previous section of this series, we shall give practical steps on how to cache it in this section. We shall setup Cloudformation and connect Cloudformation to our S3 bucket. This will make the content in the S3 bucket (in this case the website) to be cached and globally available. We shall do this using both the GUI and Terraform template which is a proper to script the Infrastructure As Code to improve repeatability.

To use Terraform ensure that you have the Terraform binary here. This is the link to the Terraform template.

The Terraform script does the following

  • Setup an S3 Bucket and make it a website that is public
  • Setup a Cloudfront Distribution and attach the distribution to the S3 Website

The last stage is to upload our website to the S3 bucket that has been created by Terraform and open the link/URL generated by Amazon Cloudfront on our browser, to view the website. The page will be displayed will be a Cloudfront cached websites. Note that it takes some minutes for the Cloudfront Distribution to be ready, so you have to wait for it to be ready before using the URL it has generated.

Manual Process (GUI Flow)

We shall be using a different bucket name as the one we used for the previous post is already used. So create a bucket names mcsseries.com.

  1. Navitage to Cloudfront in the AWS Management Console.
  2. Click on the Create Distribution button to create the distribution.
  3. Then click on Get Started button under the delivery method web.
  4. Fill the form as show in the following screenshot
Cloudfront Distribution Setup 1/2
Cloudfront Distribution 2/2

When this form is filled click on the Create Distribution button to create the Cloudfront distribution.

It takes about 10–15 minutes for the distribution to be created and available for access. It creates a URL with the following format d3abc123.cloudfront.net. This becomes the new URL for your website. When you open the URL in the browser the website in S3 will display.This URL can be easily customized by attaching Route53 to this. So that you will be able to use your custom URL.

When it comes to cost, Cloudfront is relatively very cheap. The official website of mycloudseries.com runs on Cloudfront Distribution and we pay next to nothing every month, while getting all the value that Cloudfront has to offer. Most especially Cloudfront is 100% serverless. So there is no server to manage highly available across the globe, gives your website high availability also.

Cloudfront can be attached to AWS Application Load Balancer, there by adding a caching layer to websites and applications hosted in Amazon EC2 and can continue to deliver your applications even when there is some downtime on your backend server.

Summary

We have learnt in the section of the series how to create a caching layer on your website whether it is hosted in Amazon S3 or Amazon EC2. The next section will be focused on security and how we can effectively secure our website and application that has been cached on Amazon Cloudfront.

MyCloudSeries is a training and consulting firm with expertise in Cloud Computing and DevOps. We assist organizations in their DevOps strategies, transformation, and implementation. We also provide Cloud Computing Support contact us at www.mycloudseries.com

--

--