1. Understanding AWS CloudFront and CDN:

What is CloudFront?

CloudFront is a managed AWS service that provides a Content Delivery Network (CDN). A CDN is a network of servers strategically placed in various geographical locations, known as edge locations. The primary function of a CDN is to deliver content to users in a fast and efficient manner, minimizing latency.

What Problem Does CloudFront Solve?

CloudFront solves the problem of high latency, slow loading times, and inefficient content delivery. When you access a service like Instagram, YouTube, or any other image or video sharing platform, you are indirectly interacting with a CDN. The CDN caches copies of the content in multiple locations around the world, so when you request that content, it’s served from a location closer to you, resulting in faster load times.

CDN in Action (Example with Instagram):

Without CDN: Let’s say you upload a photo to Instagram in Australia. When someone in India wants to access that photo, they would need to go through multiple network hops (routers and servers) to reach the Instagram server, located in a central location like North Virginia in the US. This causes a delay, resulting in high latency and slower content delivery.
With CDN (CloudFront): CloudFront solves this by caching copies of the image in edge locations closer to the user (in India, US East, Europe, etc.). When the person in India accesses the content, it’s served from the nearest edge location, reducing latency and ensuring faster access to the image.

2. What is S3 (Simple Storage Service) in AWS?

Before we can integrate CloudFront with S3, let's understand S3.

What is S3? S3 is an object-based storage system in AWS where you can store and retrieve any amount of data at any time. You can upload static content like images, videos, and other files to S3.
Challenges of Serving Static Files Directly from S3:
- Security: If you give direct access to your S3 bucket, users might access more data than they should or modify it.
- Latency: When users around the world try to access your content from S3, it may not be efficient due to the central location of your S3 bucket.
- Cost: Every time content is uploaded or downloaded, you incur additional costs.

3. Introduction to CloudFront and How it Solves S3 Challenges:

CloudFront is the CDN service that caches your static content stored in S3 across multiple edge locations around the world.

How CloudFront Works with S3:
- CloudFront caches your static content (audio, video, images, etc.) at edge locations.
- Users accessing the content don’t go directly to the S3 bucket. Instead, they are routed to the nearest edge location where the content is already cached.
- This improves security, reduces latency, and lowers costs because users access cached data from the edge, not from the S3 bucket directly.
Why Use CloudFront with S3?
- Security: CloudFront allows you to restrict access to your S3 bucket. Users are not given direct access to your S3 bucket.
- Latency: CloudFront reduces latency by serving content from the nearest edge location to the user.
- Cost: CloudFront can reduce the cost of data transfer since it caches content at the edge, minimizing direct S3 access.

Configure DNS (Optional)

If you want to use your own domain name (e.g., www.mysite.com), you’ll need to configure DNS settings:
- Go to Route 53 and create a new CNAME record that points to your CloudFront distribution’s domain name (e.g., d12345.cloudfront.net).
- Alternatively, you can use the default CloudFront URL provided in the distribution settings.

Practical Implementation

Step 1: Create an S3 Bucket

Login to AWS Console
- Open the AWS Management Console.
- Navigate to S3 under the Services tab.
Create a New S3 Bucket
- Click on Create Bucket.
- Name the bucket. It’s important to note that the S3 bucket name should match your domain name if you're using a custom domain (e.g., tutorialswithamit.com).

Choose a region where the bucket will be hosted. It's best to choose a region close to your target audience.
Leave the Block all public access setting enabled to prevent unauthorized access (we will use CloudFront for access).
You can optionally enable Bucket Versioning to recover deleted objects just like GIT.
Click Create Bucket.

Step 2: Enable Static Website Hosting

Configure Static Website Hosting
- Go to the Properties tab of your newly created bucket.

Scroll down to the Static website hosting section and click Edit.
Enable Static website hosting.
Select Host a static website and provide:
- Index document: index.html
- Error document: error.html (optional)
Save the changes
Make sure public access is blocked.

Step 3: Upload Website Files to S3

Upload Files to the Bucket
- Go to the Bucket and click on the Upload button.

Add files like index.html, error.html, and css.
Click Upload.

Check Permissions
- After uploading the files, ensure that public access is blocked, and the content is accessible only through CloudFront.
Get the URL S3 bucket > Properties and try to access on Web

See you are getting 404 forbidden error

Just because we have blocked the public access for the S3 bucket.

Step 4: Create a CloudFront Distribution

Go to CloudFront
- In the AWS Console, search for CloudFront under the Services tab.
Create a Distribution
- Click Create Distribution.
- For Web, choose Get Started.
Configure Origin Settings
- In Origin Settings, select the S3 bucket you created earlier from the dropdown.
- In Origin Access Identity, create a new OAI (Origin Access Identity). This is like a virtual user that will be used to access your bucket.

Select Create a New Identity and click Create.
AWS will automatically add the necessary permissions to the S3 bucket policy to allow CloudFront access.

Note: When you select, Yes. Update the bucket policy with OAI. Then immediately cloudfront will create a bucket policy inside your S3 bucket. To check go to your s3 bucket > permissions.

Configure Distribution Settings
- Leave most of the settings as default.
- Under Default Cache Behavior Settings:
  - Viewer Protocol Policy: Redirect HTTP to HTTPS (for SSL support if you want to to).
- In the Distribution Settings, select the Region (Use all edge location).

If you plan to use a custom domain, add it under Alternate Domain Names (CNAMEs) and ensure you have SSL/TLS certificates set up.

Create Distribution
- Click Create Distribution.

Step 5: Access Your Website

Wait for CloudFront to Deploy
- It may take 5-10 minutes for CloudFront to deploy.
- You’ll see a Status of “In Progress” while it’s deploying.
Get the CloudFront Domain Name
- After deployment, you’ll be able to see the CloudFront distribution URL (e.g., d1gfbvje0zsd5z.cloudfront.net).
- Copy the CloudFront domain name and paste it into the browser to access your website.
Access Your Website
- If everything is configured correctly, your static website will be served from CloudFront with low latency and high availability.

Step 6: Test S3 Bucket Access

Test S3 Direct Access
- Try accessing your website directly via the S3 bucket URL (e.g., http://YOUR-BUCKET-NAME.s3-website-US-EAST-1.amazonaws.com/).
- You will see a 403 Forbidden error since public access is blocked.
Test CloudFront Access
- Access your website using the CloudFront distribution URL (e.g., d1gfbvje0zsd5z.cloudfront.net).
- Your website will load without issues.

Don’t forget to Clean Up

Additional Notes:

Pricing Consideration: CloudFront is a paid service, and charges are incurred based on data transfer, requests, and cache hits. AWS Free Tier offers 1TB of data transfer per month, which might be sufficient for small use cases.
Edge Locations: CloudFront uses edge locations worldwide to cache and serve content from the nearest location to your users, reducing latency significantly.
Bucket Permissions: Make sure the Origin Access Identity (OAI) is correctly configured to prevent public access directly to the S3 bucket.
Custom Domains: If you’re using a custom domain (e.g., www.yourdomain.com), don’t forget to configure DNS and SSL certificates accordingly.

AWS CLOUD FRONT with S3 website Hosting