As I explained in the last article, Amazon Simple Storage Service (S3) provides scalable and cost-effective static website hosting. However, directly exposing an S3 bucket to the public poses security risks. Instead, we integrate Amazon CloudFront, a global Content Delivery Network (CDN), to serve content securely and efficiently.

This guide explains the integration between S3 and CloudFront, security best practices, and the correct policy configuration while walking you through the deployment process.

Why Use CloudFront Instead of Public Access in S3?
The Security Risk of Making S3 Public

S3 allows static website hosting, but enabling public access means anyone on the internet can access the bucket directly. This exposes your website to:

1. Unauthorized access and potential data leaks.
2. Higher costs due to unnecessary direct requests to S3.
3. No caching, leading to slower performance.

Best Practice: Use CloudFront as a Secure Proxy
CloudFront acts as a secure intermediary between users and S3, preventing direct access to the S3 bucket. Benefits include:

1. Restricted S3 Access: The S3 bucket is private, and only CloudFront can fetch content.
2. Lower Latency: CloudFront caches content at multiple edge locations worldwide, reducing load times.
3. Enhanced Security: CloudFront enforces HTTPS, preventing unauthorized traffic.
4. Cost Efficiency: Cached requests reduce the number of direct requests to S3, lowering costs.

CloudFront as a Global Service
Unlike S3 (a regional service), CloudFront is global, meaning it:

1. Uses edge locations to cache content near users.
2. Improves website performance by reducing latency.
3. Supports automatic failover, ensuring reliability.

Now, let's dive into:
Step-by-Step Guide to Deploying with S3 and CloudFront

1. Go to the AWS S3 console and create a bucket (e.g., my-secure-static-site) (check my article on S3 to see pictorial steps)
2. Block all public access to the bucket (this is crucial).
3. Disable static website hosting—we will use CloudFront instead.

Why? Keeping the bucket private ensures no one can access it directly. Only CloudFront will serve the content securely.

Step 2: Upload Website Files to S3

1. Open the bucket and upload your HTML, CSS, and JS files.
2. No need to change permissions—CloudFront will handle access.

Step 3: Set Up CloudFront Distribution

1. Go to CloudFront Console → Create Distribution.
2. Under Origin Domain, select your S3 bucket (not the website endpoint).
3. Restrict Bucket Access → Yes.
4. Create a New Origin Access Control (OAC). Why? OAC allows CloudFront to retrieve content from S3 securely without exposing the bucket.

Step 4: Attach the Correct Policy to S3

1. After creating the distribution, navigate to S3 → Permissions → Bucket Policy.
2. Paste the policy from CloudFront, which grants access only to the distribution.

Why Use CloudFront’s Policy Instead of a Public S3 Policy?

1. The bucket remains private—only CloudFront can fetch content.
2. Users cannot bypass CloudFront to access files directly.

Step 5: Enable HTTPS and Caching

1. Under CloudFront Settings, enable Viewer Protocol Policy → Redirect HTTP to HTTPS.
2. Set Cache Behavior to improve performance.

Why?

1. HTTPS secures data in transit.
2. Caching reduces latency and server load.

Step 6: Configure a Custom Domain (Optional)
If using a custom domain:

1. Set up a CNAME in Route 53 (or your DNS provider).
2. Request an SSL certificate via AWS Certificate Manager.
3. Attach the certificate to CloudFront.

Step 7: Test and Verify

1. Open the CloudFront distribution URL.
2. Verify that the website loads and redirects to HTTPS.

my website was HTML so what I did was add /index.html and here's the result.

.

Conclusion

By using I.e integrating CloudFront instead of direct S3 access, we create a secure, fast, and scalable static website hosting solution. CloudFront caches content at edge locations, reducing latency while keeping the S3 bucket private. This approach ensures better performance and cost efficiency while protecting your origin server from excessive requests.

Feel Free to share your thoughts, Feedback, and observations on my article, I'm still learning and practicing, so your suggestions pointing out mistakes, offering improvements, or highlighting what I did well will greatly help me grow. Thank You!