How MUVI Uses S3+CloudFront to Deliver Global OTT Platforms with Zero Downtime

OTT is now everywhere. Be it your mobile or smart TV, OTT has become the first line of entertainment for gen next. And with the increased popularity of OTT platforms, OTT businesses are seeing a steep rise in OTT traffic too! And this traffic is expected to increase even further in the coming years. 

But, what if you are not prepared for the sudden spike in traffic? What if you get traffic that is much more than your expectation? Such unexpected visitors can cause serious trouble for your platform if you are not technically prepared enough. Suddenly heightened traffic can cause unwanted downtimes, as your server will struggle to serve your audiences. This is where hosting your application and websites on S3+Cloudfront can be beneficial by handling the sudden scalability requirements. 

In this blog, we will be discussing how you can do so in detail. So, let’s begin!

Benefits of Hosting React/Angular/NodeJS Applications on S3+ CloudFront

Web 2.0 has heavily relied on cloud computing and cloud storage infrastructures. Cloud storage provided them the scalability to store more content effortlessly. And with time, the platforms have realized the need of migrating to the cloud for streaming services too. 

That is why they have now moved to React/Angular/Node JS architecture which can be easily hosted on S3+CloudFront. This process has multiple benefits.     

By hosting your React/Angular/Node JS applications on S3+CloudFront, you are actually eliminating the use of web services like apache, Nginx, or java tomcat from your system. Instead, your application or website will run from the S3 Bucket.

By doing so, your business will reap the following major benefits:

1. No Application Outage At the Server Level

Since the use of servers is being eliminated in this process and is replaced by S3+CloudFront-based architecture, hence, there will be no chances of server-side outages anymore. Even if your platform experiences an unexpected spike in traffic, it will still not experience any downtime, since the content will be streamed directly from the S3 bucket to your viewers. 

2. Will Handle N Number of Requests At A Time   

When your platform will be hosted on S3+CloudFront, it will be able to handle an unlimited number of viewing requests, because it will not be limited by a specific server capacity anymore. Thus, your platform will become super scalable.            

3. Global Performance 

Using S3+CloudFront architecture, you can establish a platform that works at equal speed throughout the globe. Since the S3+CloudFront architecture will be integrated with the AWS CDN network, the viewing request will be fulfilled by CloudFront from the nearest POP locations. Hence, the content will be delivered faster, hence decreasing the latency and load time. 

How to Host Your Platform on S3+CloudFront: Technical Details

For hosting your platform on S3+CloudFront, you need to first develop a React JS, Node JS, or Angular JS-based platform architecture. Such platforms can be easily hosted on S3+CloudFront without any trouble.

Once you are ready with your code, you need to follow the steps given below, to complete the process. 

• First of all, you need to start by creating an S3 Bucket in your AWS Account. This bucket will be used for storing the application. Here, please note that you will have to create an AWS static hosting application to select the S3 bucket. 
• Next, you need to create a CloudFront distribution ID using the name of the S3 bucket created above. 
• Once you have created the CloudFront distribution ID, you need to enable the Origin shield in the CloudFront distribution ID configuration. 
• Next, you will have to configure CloudFront to match your application’s requirements. This can be done by configuring the CloudFront according to the type of your application, its functionalities, and the storage time of cache data in POP locations. 
• Once you have completed configuring, you will have to add the CNAME of CloudFront distribution and install the SSL accordingly. 
• Next, configure the domain/subdomain in route53 using your CloudFront distribution ID. After the propagation of the domain change, your application will start working with your domain name. 

You are now all set to stream your content directly from the S3 bucket! 

The overall system workflow will look somewhat like the flow diagram given below:

Sample Code for Deploying the S3+CloudFront Based Hosting

Script file Name: deploy.sh

==========================================================

BUCKET_NAME=$1

DISTRIBUTION_ID=$2

echo “– Installation –“

# Install dependencies

yarn –production

echo “– Build –“

# Build

yarn build

echo “– Deploy –“

# Sync build with our S3 bucket

aws s3 sync build s3://$BUCKET_NAME

# Invalidate cache from cloudFront

aws cloudfront create-invalidation –distribution-id $DISTRIBUTION_ID –paths “/*” –no-cli-pager

==============================================

S3 bucket name: 

CloudFront Distribution ID: 

Command to execute

# sh deploy.sh “YOUR_BUCKET_NAME” “YOUR_DISTRIBUTION_ID”

Limitations of the Method

Though this method can do wonders in hosting the static pages directly over the S3 bucket, it has one limitation. In static hosting using S3+CloudFront, .htaccess will not work. It is because .htaccess works only where a web server is running. But in this environment, we are not using any web server. Hence, .htaccess will not work. 

But you don’t need to worry, as it will not hinder the normal functioning of your platform at all! 

To Sum Up

Hosting your React/Node/Angular JS platforms on S3+CloudFront reduces downtime and increases scalability by eliminating the limitations set by hosting servers. Hence, you don’t need to worry about the unexpected spike in traffic anymore. 

MUVI has successfully implemented static website hosting using S3+CloudFront. Our internal communication website, intranet.muvi.com has been successfully hosted and is functioning amazingly. We are looking forward to serving our customers using the same technology in the future!

Before I say goodbye to you all, I would like to thank our engineering team, especially Ranjan Kumar and Gayadhar Khilar for supporting me in developing this article.