# AWS-CDN-Video-Streaming-Service
This project leverages the capabilities of Amazon S3, Amazon CloudFront, and React to build a scalable, efficient, and user-friendly video streaming service.
The service allows users to viewa variety of streaming content through a web-based interface.
**Amazon S3** is chosen for its durability, scalability, and ease of access. It's ideal for storing and retrieving any amount of data at any time, from anywhere on the web, making it perfect for a video streaming platform with potentially large, fluctuating traffic and vast amounts of data.
**Amazon CloudFront** is designed to optimize security, performance, and reliability, thanks to its worldwide network of data centers (edge locations). When a user requests content via the service, CloudFront retrieves data from the nearest edge location, ensuring the lowest latency and best possible performance.
This is crucial for video streaming, which requires fast, uninterrupted data transfer. **React** is known for its efficiency, scalability, and flexibility, making it a popular choice for modern web applications. It allows for fast rendering and a dynamic user experience, essential for a platform where users interact with various content, navigate between different views, and control video playback.
## How they work together
Together, S3 ensures organized, scalable storage; CloudFront guarantees swift, reliable content delivery; and React provides a responsive, intuitive user interface. This synergy creates a streamlined video streaming service that prioritizes performance, scalability, and user engagement.
## Creating the S3 Bucket
1. In the AWS console navigate to S3 click create bucket
2. Provide a name for your bucket and choose your region
3. Keep bucket ACLs disabled
4. Keep your bucket private by leaving the block all public access setting checked (we want users to securely access the bucket via CloudFront)
5. Enable bucket versioning and server-side encryption with Amazon S3-managed keys (SSE-S3)
6. Click create bucket
## Create the CloudFront Distribution
1. Navigate to the CloudFront service
2. Before making a CloudFront distribution, we must create an origin access control (OAC) setting under the security tab on the left hand side
3. Give the OAC a name like "videostreamingOAC" and leave the option sign in requests under settings enabled, create the OAC
4. Return to the distributions tab in CloudFront, click "create a distribution"
5. Choose the S3 bucket as your origin domain
6. Select the origin access control setting under origin access, then select the OAC you created before (there will be warning to update the S3 bucket policy that will be done soon)
7. Under Viewer check the Redirect HTTP to HTTPS to enable encryption in transit to secure viewer's connections secured
8. Click create distribution and wait for it to finish deploying in the meantime, update the bucket polict to get the OAC to work
9. Above will be a blue warning saying the S3 bucket policy needs to be updated, all you have to do is click copy policy and you will be redirected to S3
10. Under the S3 bucket policy paste the copied policy, then click save
## Upload your video to S3
1. Once distribution status is enabled Return to your S3 bucket
2. Click objects, then upload your video either by dragging the file into the console or by clicking add files and selecting the video
3. Once the file has been added make sure to click upload, it won't upload automatically you will see it loading once you do so
## Test the video using S3 and CloudFront
1. Copy the domain name or your CloudFront URL
2. Paste it in a new tab and then return to S3
3. Go to the S3 bucket and copy the object key and then paste it after the cloudfront domain name (separate the domain name and object key with a "/")
4. Click enter and the video should appear in a new tab:
## Build the Frontend using VSCode and React
1. Go to your terminal and use the npx command to create it
2. The app should look like this after it has finished installing
3. After the app has been created it is time to tailor it to your personal website:
https://github.com/Shereefo/AWS-CDN-Video-Streaming-Service/assets/137960467/921ad2e3-b8b3-4860-9d66-eb80b2aacc63