DEV Community

Yash Sonawane
Yash Sonawane

Posted on

Build a Netflix-Style Website with S3, CloudFront & Lambda\@Edge 🎬⚡

#tutorial #devops #aws #cloud

Ever dreamed of creating your own mini-Netflix? Good news: You don't need a million-dollar server room to do it.

In this guide, we’ll walk you through how to build a Netflix-style static video site using nothing but S3, CloudFront, and a sprinkle of Lambda\@edge. Whether you’re showing off your indie films, coding tutorials, or cat videos — this setup scales like a boss and costs pennies. 🐱💰

Let’s go!

🧠 Why Use S3 + CloudFront + Lambda\@edge?

Here's the recipe:

  • S3: Store your videos, HTML, CSS, and JavaScript.
  • CloudFront: Distribute your content globally with low latency.
  • Lambda\@edge: Add logic right at the CDN edge (think: auth, redirects, personalization).

Think of S3 as your Netflix library, CloudFront as the worldwide streaming network, and Lambda\@edge as the brains adding interactivity at lightning speed.

🎬 What You’ll Build

  • A sleek video gallery (HTML/CSS/JS)
  • Video content hosted on S3
  • CDN distribution via CloudFront
  • Custom logic using Lambda\@edge (e.g., geo-based redirection or access control)

🧰 Prerequisites

  • AWS account
  • Basic understanding of HTML/JS/CSS
  • Node.js & AWS CLI installed

🚀 Step-by-Step: Launch Your Streaming Site

1. Create and Upload to an S3 Bucket

  • Create a new bucket: my-netflix-clone
  • Enable static website hosting
  • Upload your frontend files and videos

Sample index.html snippet:

<video width="640" height="360" controls>
  <source src="https://my-netflix-clone.s3.amazonaws.com/trailer.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
Enter fullscreen mode Exit fullscreen mode

Don’t forget to set permissions:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::my-netflix-clone/*"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

2. Set Up CloudFront Distribution

  • Origin = Your S3 bucket
  • Enable caching, gzip
  • Restrict access to S3 using Origin Access Control
  • Optional: Add a custom domain with SSL via ACM

Result: ⚡ Fast streaming globally, minimal latency.

3. Enhance with Lambda\@edge

Deploy a Lambda function in us-east-1 and associate it with CloudFront

Example: Redirect based on country

'use strict';

exports.handler = async (event) => {
  const request = event.Records[0].cf.request;
  const country = event.Records[0].cf.headers['cloudfront-viewer-country'][0].value;

  if (country === 'IN') {
    request.uri = '/india.html';
  }

  return request;
};
Enter fullscreen mode Exit fullscreen mode

This lets you serve custom content based on location, headers, or even cookies!

🌍 Bonus: Add Authentication (Optional)

Use Amazon Cognito or Lambda\@edge to:

  • Require login to access videos
  • Protect premium content

Or use signed CloudFront URLs for time-limited access.

📦 Summary

Feature AWS Service
Static file hosting S3
Global delivery CloudFront
Custom logic Lambda\@edge
Auth (Optional) Cognito or signed URLs

This setup gives you a Netflix-like video platform that is fast, secure, scalable, and very affordable.

💬 Your Turn: What Would You Stream?

Would you use this to build a:

  • Dev course platform?
  • Indie film showcase?
  • Internal company training portal?

👇 Share your ideas, questions, and results in the comments!

Smash that ❤️ if you learned something cool, and send this to a fellow creator who needs a streaming solution without the drama.

Let’s build the future of streaming — one bucket at a time. 🧡

Top comments (0)