Video Streaming Service on AWS! (S3 + CloudFront)
Components
- Amazon s3
- Amazon CloudFront
Here is a step-by-step tutorial on how to build a video streaming service on AWS using S3 and CloudFront:
Create an S3 Bucket
S3 (Simple Storage Service) is AWS's object storage service that allows you to store files and data.
To create an S3 bucket:
- Go to the S3 console in AWS and click "Create bucket"
- Give the bucket a name like "my-video-streaming-bucket"
- Select a region like US East (N. Virginia)
- Disable ACLs and enable "Block all public access" to make the bucket private. We will use CloudFront to access the videos publicly.
- You can enable or disable versioning depending on your use case
- You can also use default encryption or set up encryption using custom Keys via the Amazon KMS
- Proceed with the creation by selecting Create bucket
Upload Videos to the S3 Bucket
Now you can upload your video files to the S3 bucket. Make sure they have the proper video file extensions like .mp4, .mov, etc.
You can upload the video using either the Amazon web console or the AWS CLI (preferred method.) On the S3 console, click on the bucket, go to the "Objects" tab, and use "Upload" to add your video files.
To upload the file using the AWS CLI, use the command. This assumes you have set up correctly the AWS CLI on your local computer and have the right IAM user permissions to perform the upload.
aws s3 cp /path/to/files s3://<s3-bucket-name> --recursive
CloudFront Distribution - Content Delivery Networks (CDNs)
A CDN is a distributed network of servers that caches content closer to end users globally.
The benefits are:
- Improves website load times since content is served from nearby servers
- Reduces bandwidth costs since less traffic goes back to the origin server
- Improves availability since requests are distributed
- Enhances security against attacks like DDoS
Without a CDN, all requests go back to the single origin server, which can get overloaded. The CDN has "edge locations" (servers) distributed globally that cache content. Nearby users access the nearby edge location instead of the distant origin server.
Create a CloudFront Distribution
CloudFront is AWS's content delivery network (CDN). We will use it to publicly access the videos in our S3 bucket. To create a CloudFront distribution:
- Go to CloudFront and click "Create Distribution"
- Select the S3 bucket as the "Origin Domain"
- Restrict access to the bucket using "Origin Access Control"
- Create an access control policy called "VideoStreamAccess"
- Check "Restrict Bucket Access" and "Origin Type = S3"
- Enable HTTP→HTTPS redirect for security
- Use default cache optimizations or customize the behavior if you want
- You may choose to enable the web application firewall, especially in a production environment. Just know this comes at a cost. You can leave the WAF turned off if you are doing this for testing purposes.
- Select desired edge locations and then create the distribution
Update S3 Bucket Policy for CloudFront Access
Since the S3 bucket is private, we need to update its bucket policy to allow CloudFront to access the objects.
- Copy the suggested bucket policy when creating the distribution
- Go to the S3 bucket, Permissions tab, and edit the Bucket Policy
- Paste the policy which allows CloudFront to "GetObject" from the bucket
- Save changes
Now, CloudFront can fetch videos from S3 and cache them globally.
Access Videos Using CloudFront URLs
You can access the videos using the CloudFront domain URL, appending the S3 object path. Here is an Example:https://somerandomstuff.cloudfront.net/pexels-julien-goettelman.mp4
The videos should play since CloudFront is proxying them from the origin S3 bucket securely.
You can then Embed the video(s) Into Web/Mobile App
You can then Embed the video(s) Into a Web/Mobile App using a <source>
tag, adding the CloudFront video URL and setting attributes like width, height, controls, etc
And that's it! The app will now stream videos from S3 through CloudFront's CDN. As you add more videos, they will all become available over CloudFront without any other changes required.