Saturday, 9 September 2023

Tutorial to learn Amazon CloudFront

 Tutorial to learn Amazon CloudFront.


Objectives:

  1. Learn use of CloudFront to speed up distribution of your static and dynamic web content.

  2. Know how to prevent users in specific geographic locations from accessing content that is being distributing through a CloudFront


Step 1: In AWS Console go to S3. Click on Create bucket.

Provide bucket name as: mycppbucket.com

Uncheck Block all public access and acknowledge it.


Keep the rest as default, scroll down and click on Create bucket.


Step 2: Click on the bucket and go to Permissions tab.

Scroll down to Bucket policy and click on Edit. Further copy the Bucket ARN and save it for next steps.

Click on Policy Generator.

New tab of Policy generator will open.

  • Select Type of Policy as S3 Bucket Policy from drop down.

  • In Principal enter asterisk (*).

  • Select the GetObject option from the Actions drop down.

  • Copy and paste the ARN from the previous browser window beside Bucket policy editor and put /* after the complete ARN. It will appear like arn:aws:s3:::mycppbucket.com/*

  • Click on Add Statement.

  • Scroll down and click on Generate Policy.

Copy the JSON code from the Policy JSON Document window.

Paste this JSON code in the text area under Bucket policy editor. Click on Save changes.

Click on the bucket and go to Properties Tab. Scroll down to Static Website Hosting and click on Edit.


Select Enable option under Static Website Hosting.

Under Index Document, provide website as cfindex.html and error document as error.html.

Click on Save Changes.


Step 3: Upload four images in the bucket created above.

We assume following images are uploaded for rest of the document.

  • Img 1.jpg

  • Img 2.jpeg

  • Img 3.jpg

  • Img 4.jpeg

Step 4: Create another S3 bucket with default configuration and name it logs.mycppbucket.com.

Go to bucket level and select Create folder.

Name the folder as mycloudfront. Click on Create folder.


Step 5: In AWS Console go to CloudFront Service. Click on Create Distribution.

Click on Get Started.

Provide Information as follows:

Origin Domain Name: mycppbucket.com.s3.amazonaws.com (Your created bucket)

Keep the rest configurations default.


Scroll down to Distribution Settings. Provide info as follows:

Default Root Object: cfindex.html

Standard Logging: On

S3 Bucket for Logs: logs.mycppbucket.com.s3.amazonaws.com (2nd bucket)

Log Prefix: mycloudfront/ (folder in 2nd bucket)

Click on Create Distribution.


Step 6: Click on the ID in CloudFront console in the distributions pane.

Copy and store the domain name given under details.

Now on your device create a cfindex.html file with following data:


<html>

<head>My CloudFront CloudPlusPlus Lab</head>

<body>

<h1>Welcome to my website</h1>

<p>Your page, will be served from the edge location that CloudFront determines appropriate to serve.</p>

<a href="http://d3l3secxuqn13z.cloudfront.net/Img 1.jpg">Tiger</a><br/>

<a href="http://d3l3secxuqn13z.cloudfront.net/Img 2.jpeg">Elephant</a><br/>

<a href="http://d3l3secxuqn13z.cloudfront.net/Img 3.jpg">Cat</a><br/>

<a href="http://d3l3secxuqn13z.cloudfront.net/Img 4.jpeg">Dog</a><br/>

</body>

</html>


Upload this cfindex.html file to mycppbucket.com S3 bucket.

Copy the domain name from the deployed CloudFront distribution and run that URL in a new browser window.


You will be able to access these images which are being reverted through CloudFront distribution.

You can also check the log files that are generated in the S3 logs bucket mycloudfront folder.

Furthermore, you can apply Geo Restrictions in the Restrictions tab.

Here you can create whitelist or blacklist to provide specific access or to deny access to a particular list of locations.

If you no longer need the CloudFront Distribution, you may want to delete it from console, as well as delete the S3 buckets.