Serve static content from S3 Bucket with CloudFront

In this Tutorial We are going to restrict access to an S3 bucket objects so that your object are only accessible through CloudFront and Origin Access Identity.

Question : "How We Can Access S3 Bucket object Publicly Without Enabling Bucket Policy publickly?" (this question is the purpose of this Blog)

Answer :    The answer is to use CloudFront With Origin Access Identity (OAI).

In this Tutorial We are going to follow the following Setps:

1) Create the S3 bucket with default settings and upload an index.html file (index.html will not be accessible directly from S3).

2) Create a CloudFront distribution with the S3 bucket as its origin and Set up the OAI, and configure a policy that permits CloudFront to serve the index.html file. 

3) Confirm the object is accessing from the cloudfront URL.

Step 1. Create the bucket in S3 upload index.html and use all the default settings. The bucket and its objects are not accessible to the public.

IMG-1

When we attempt to reach the index.html file in a browser, we get an Access Denied error as expected. (Optional)

IMG-2

Step 2. In CloudFront, create a Web distribution and select the S3 bucket as the origin,

then Under Origin access Select Legacy access identities

Clieck on Create New OAI

Under Bucket policy Select [Yes, update the bucket policy]

Do litile bit down scrrol Under [Web Application Firewall]

Select [Enable security protections]

Enable [Use monitor mode]

leave everything else as the default settings, scroll to the bottom and create the distribution.

You will have to wait until it’s deployed and as this can take 10 minutes.

Setp 3: Go back to Distributions dashboard 

Keep URL Under [Domain Name]

Paste In Browser with S3 Bucket Object like : https://d33wz3yub5fhlo.cloudfront.net/index.html