Using Amazon S3 with Amazon CloudFront
Published: 2024-04-19 15:54:48

**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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9haxut3u2bpza2r8ssq.png)

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**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c92ckdwfulwfenebvvmn.png)

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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gg7pi4lg0gesi7fns4k8.png)

- 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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7kev9xqekd9ql9acxjhq.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/guytqkevjrwiaoi100bx.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ml4h466bqsvdnpgoqc8l.png)

Click on the Edit Button

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwg80ihj1de4o1l8f3yl.png)

Click on the Enable Button

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z63ob89kv3ngifruvs5y.png)

- Under the Hosting Type, the _Host a Static Website_ is already enabled.
- Fill the index document with _index.html_
- Click on Save Changes 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nio8kjcz0gzrllx6799h.png)

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y2eolxdb44jejry4zr2w.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vwwed8r4cu180iydv7tg.png)

- 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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/paqzgbkh60zvfyp0bb8r.png)

- 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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7beagbj675ps8m0eql3p.png)

- 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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0dqs6jlwwg3kis73gvt.png)

_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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bjeamf5hiqev5qxa5tse.png)

- 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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j14d0n8ubsoiwe05ihrv.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/se108c32j06zfdfu1mba.png)

- 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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2aaxkz0sgr8icst5kzu5.png)

Step 8
Back to CloudFront

Navigate back to CLOUDFRONT

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/up7uekmr7tvz3lspbbuq.png)

- 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e0ront0ycls0pzhmkufp.png)