Using Amazon S3 with Amazon CloudFront

Step 1
Create S3 bucket and enable it for static website hosting

Go to AWS Management Console > Search for S3

At this junction, we need to create a bucket for the project.

Each S3 bucket in AWS needs to have a unique name as bucket names in AWS have to be unique globally

The region where I ran my account was automatically made the region for the bucket

• For Bucket Type: General Purpose
• For Bucket Name: I used harrisonawscloudclubproject

Disable the ACL and also untick the Block All Public Access. Without the Block All Public Access unticked, there wouldn’t be any access to the bucket.

• Unticking the Block All Public Access box triggered this warning but ignore
• Scroll down and click on Create Bucket
• Wait for the bucket to be created

Bucket Created Successfully !!

Step 2
Enable Static Website Hosting

Now that the bucket has been created and has been made public, it's time to enable static website hosting

To achieve that;

• Click on the name of the bucket that you created
• You see the options on the tabs, select the PROPERTIES tab option

• Scroll to the end of the PROPERTIES page
• Static website hosting is the last option on the page

Click on the Edit Button

Click on the Enable Button

• Under the Hosting Type, the Host a Static Website is already enabled.
• Fill the index document with index.html
• Click on Save Changes

Static Website Hosting enabled successfully!

Go back to PROPERTIES, scroll down again to STATIC WEBSITE HOSTING, then click on the link you see in that section

Once clicked, it opens a new tab that shows an error page:

This is so because we haven’t configured the bucket policy to allow public access. Even though we unticked the Block All Public Access option, we still need to configure the BUCKET POLICY.

Step 3
Enable Public Access to the Bucket

• Head to the PERMISSIONS Tab
• Scroll down to BUCKET POLICY
• Click the EDIT button on BUCKET POLICY
• Click on POLICY GENERATOR

• Click on SELECT TYPE OF POLICY dropdown
• Choose S3 BUCKET POLICY
• In the PRINCIPAL box, input “*” (this gives permission to every type of access)
• On the ACTIONS dropdown, choose GET OBJECTS
• Go back to the EDIT BUCKET POLICY page, copy BUCKET ARN
• Go back to the POLICY GENERATOR page and paste it in the AMAZON RESOURCE NAME box

• Click on ADD STATEMENT button
• Click on GENERATE POLICY
• A POLICY JSON DOCUMENT Modal pops up, copy the policy off the modal and click CLOSE
• Go back to EDIT BUCKET POLICY and paste it there and click on SAVE CHANGES

NOTE: If you are receiving an error message, make sure you put “/*” at the end of the AMAZON RESOURCE NAME.

STEP 4
Upload Objects into the Bucket

Upload 2 files: index.html and the image that is going to be reflected in the index.html

• Click on OBJECTS
• Click on UPLOAD
• Click on ADD FILES

• Files are uploaded and you click on UPLOAD
• Wait to get the UPLOADED SUCCEEDED message

STEP 5
Confirm that the static website hosting is working

• Click on PROPERTIES
• Scroll down to STATIC WEBSITE HOSTING
• Click on the URL in that section and it opens a new tab showcasing the files we uploaded to the S3 Bucket

Now, it is important to mark and serve content through CLOUDFRONT DISTRIBUTION to be able to make use of the CACHING FUNCTION of CLOUD FRONT to reduce latency and continuous calls to the S3 Bucket.

STEP 6:
Configure your Cloudfront

Go to CLOUDFRONT

• Click on CREATE DISTRIBUTION
• ORIGIN DOMAIN: The S3 Bucket you created
• Scroll down to ORIGIN ACCESSS
• Select ORIGIN ACCESS CONTROL SETTING
• Select the bucket you created
• Back to the CREATE DISTRIBUTION page,
• Under the WEB APPLICATION FIREWALL (WAF), Select DO NOT ENABLE SECURITY PROTECTIONS
• Now, scroll down to the DEFAULT ROOT OBJECT, type in the name of your HTML file
• Scroll to the end of the page and click on CREATE DISTRIBUTION

Click on the CREATE POLICY button

STEP 7
Back to S3

• Now, go back to S3
• Select the bucket that you created
• Go to PERMISSIONS, go to BLOCK PUBLIC ACCESS, then click on EDIT
• Tick on BLOCK ALL PUBLIC ACCESS

• Click on SAVE CHANGES
• Type CONFIRM in the Modal that pops up
• Then click on the CONFIRM button
• Now, click on EDIT on the BUCKET POLICY
• Paste the policy you copied from CLOUDFRONT
• Click on SAVE CHANGES

Step 8
Back to CloudFront

Navigate back to CLOUDFRONT

• Click on the DISTRIBUTION
• Under GENERAL, locate the DISTRIBUTION DOMAIN NAME under the DETAILS section.
• Copy the DISTRIBUTION DOMAIN NAME
• Now, go back to the tab created from the STATIC WEBSITE HOSTING and refresh
• You will find out that the page isn’t accessible anymore; it will report a 403 FORBIDDEN error message

Now, paste the DISTRIBUTION DOMAIN NAME link on a tab and tap ENTER

You will realize that our S3 Files are being served through CLOUDFRONT.