Build a Video Streaming Service on AWS! (S3 + CloudFront)

foreign [Music] hey what's going on guys welcome back to another video today I'm going to go over how to set up a video streaming service in AWS we'll have a basic react app that consumes the video we'll store the video in S3 and we're also going to set up a CDN using cloudfront to sit in front of our bucket which will improve the performance if you're not familiar with AWS that's okay I'm going to go over each Service as we set it up let's get started the first thing we're going to want to do is create our S3 bucket if you're not familiar with S3 it's basically just a file storage service that allows us to store different files in AWS let's give our bucket a name we call it demo video streaming service and we can choose a region I'll do Us East one we want to make sure ACLS are disabled and then also that block all public access is checked because we don't want any user out there in the world to directly access our S3 bucket we want to limit the traffic to only come from cloudfront then we could disable pocket versioning use the default encryption and just create our bucket now that it's created let's go ahead and upload our video I'm going to select this golf course.mp4 video and then hit upload now that that's done uploading we can try to view the video in our browser so let's copy this object URL open up a new tab and you'll see that we get this access denied error and the reason for that is because we said that this object cannot be accessed publicly there's no read permission here it's just a dash in order for our users to view our video publicly we need to set up our CDN and before we set that up through cloudfront I want to go over what a CDN even is so a CDN stands for Content delivery Network and that's really just a distributed network of servers that caches content close to end users so what does that mean well without a CDN you would just have one origin server in our case that's S3 and this will be responsible for Distributing all the content to all of our users around the world so the users in North America will be pretty close to it but then users in Australia here will have to wait quite a bit of time for the content to travel across the world to them so as you can see that users that are not very close to our origin server are going to have to wait a long time for the video to load and that's not going to be a very good user experience if we set up a CDN it will allow us to serve our content through a series of edge locations that are distributed around the world and Edge locations are basically just servers that AWS has across the world that cache or store our original file and then serve it to users that are closer to it so for example the users in Canada will use this Edge location but then users in South Africa will use the edge location closest to them and that's going to greatly decrease our load times because now these users don't have to travel all the way to the North America to get our video content they can just hit the edge location closest to them and receive it much faster on top of that it's going to save us a ton of money because the cost of transferring data from our origin server out into the world is a lot higher than the cost of transferring data from an edge location additionally a CDN is going to help increase our server's availability and uptime because all the requests are distributed among these Edge locations if all the requests were only being handled by one server it could potentially overload the server and take it down and lastly a CDN helps prevent certain attacks like DDOS attacks because these Edge vocations will be able to figure out if certain requests are malicious or if a user is trying to attack our server and it will then block that request so to summarize here are the benefits of a CDN it improves website load times it reduces bandwidth costs increases availability and improves security so let's go ahead and set up our CDN in cloudfront we're going to go to cloudfront and then click create distribution for the origin domain we're going to select our S3 bucket and this is going to be the source of our content so where it's actually stored and for the origin access we don't want it to be public because our bucket is private so we'll select origin access control settings and this is going to restrict access to our bucket so that we can only access it through cloudfront and we're going to need to create a control setting so we can go ahead and do that we'll call it video streaming access then make sure sign request is checked and the origin type is S3 so once that that is created you'll see that we need to update our S3 bucket and we're going to do that right after we create this distribution so we could scroll down and then we'll one check redirect HTTP to https so that our connections are secure and for the cache policy we can just do caching optimized and that just sets some default caching Behavior but you're free to customize the caching Behavior if you want and for the web app firewall I'm not going to enable it for this tutorial but in a production environment you would want to enable this it just enhances security for the edge locations I'm just going to do North America and Europe but in production you'd probably want to use all the edge locations and then we could leave the rest as is and then let's create the distribution now that it's created let's go ahead and copy the policy here and go update our bucket so if we click that link it should take us right to the permissions and then we could hit edit and the bucket policy will allow us to Define certain permissions on objects within the bucket so if we paste that in we have the effects set to allow and the principle is who we're going to allow access to and in our case it's a service called cloudfront the action we want to allow them to do is called get object and that's just going to allow cloudfront to read objects within our bucket the resource defines which objects within our bucket we want to give them access to so we have the bucket name and then slash star and that basically means that we're giving access to every object within our bucket and then lastly we have a condition and we're checking if the AWS Source arm equals this cloudfront aren't and this is the cloudfront distribution we just created so we could go ahead and save changes and now we should be able to go back to our cloudfront distribution and copy this distribution name paste that in our browser and then let's just grab the key for our video now we should be able to paste it in and see our video and here it is so last thing we need to do is hook up our front end to it so I have created a basic react app with beat and if we open up the file we just have this app.js and right below it we're going to add a video element and then we're going to add some props to it so we'll set the width equal to 800 the height will be 500 then we'll add controls Loop auto play and muted and inside our video element we're going to want a source element and on that we'll want a source attribute and we're going to set that equal to our video URL here and then we'll set the type to video MP4 so now if we hit save we should see that in our app and here it is that's it for this video thank you guys so much for watching leave a like if you enjoyed And subscribe if you haven't already it would help me out a ton let me know in the comments if you have any feedback or what you guys want to see next and I'll see you in the next one [Music] foreign [Music]

Channel: Nikita Dev

Views: 12,698

Keywords: javascript, aws, aws s3, s3, aws cloudfront, cloudfront, cdn, video streaming, aws video streaming

Id: JbVyTrfqshU

Length: 8min 1sec (481 seconds)

Published: Tue Aug 29 2023