Muvi Blogs

Beyond The Buzz- Latest Insights From Muvi

Please wait while we enable your Account

0%

Contacting Amazon Web Services
Deploying Cloud Servers, Storage, Transcoding & Database Servers
Deploying Global CDN
Deploying Firewall & Enabling Security Measures
Deploying the CMS & Admin Module
Deploying Website, Mobile & TV Apps framework
Creating your FTP account
Finishing up all the modules
Preparing for launch

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

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:

 

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

 

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. 

 

Start your OTT Platform

 

Don't forget to share this post!


Debarpita Banerjee
Debarpita works as a content writer with Muvi. She has worked across industries like EdTech, eLearning, AR-VR and Metaverse. She is a team player and believes in teamwork to help achieve a collective common goal. She also believes in delivering content that can add some value to the users and prove to be beneficial in taking our brand to the next level.

Latest Posts

Try Muvi One free for 14 days

No Credit Card Required

.muvi.com
Your website will be at https://yourname.muvi.com, you can change this later.

Related Blogs
How to Develop Your Own LG TV WebOS App Without Coding?

How to Develop Your Own LG TV WebOS App Without Coding?

  In 2021, LG TVs held an 18.9% share of the global television market. We don’t need to tell you...

20 January 2023
OTT Business Model 2023 - How OTT Platforms Make Money?

OTT Business Model 2023 - How OTT Platforms Make Money?

  Are you eager to know about How OTT platforms make money? In this blog, we will discuss how OTT...

18 January 2023
What Are The Different Types of Cyber Attacks on OTT Platforms?

What Are The Different Types of Cyber Attacks on OTT Platforms?

  Cybercrimes were predicted to inflict damages amounting to US$ 6 trillion in 2021. In that scenario, cybercrime would have...

17 January 2023
A Complete Guide to Growing Your Video Membership Site

A Complete Guide to Growing Your Video Membership Site

  The demand for video membership sites has grown exponentially over the past few years making it a highly profitable...

17 January 2023
[New Tutorial] Screen Share your Roku Device on your Laptop for Online Meetings [Zoom / GMeet]

[New Tutorial] Screen Share your Roku Device on your Laptop for Online Meetings [Zoom / GMeet]

  If you are a Roku App developer, then you must have faced the Roku TV Screen sharing issue multiple...

13 January 2023

Try Muvi One
Free for 14 days

Launch your Multi-Screen Streaming Service
Instantly
START FREE
close-link