Deploying this Hugo blog to AWS S3 | Part 2 :: Andrea Pintus

After a few months, i would like to make some minor changes to the infrastrucutre of the site. In this chapter we’ll see how do i use my CloudFront distribution to restrict access to Amazon S3 bucket.

Best Practise: Create a Cloud Front origin access control (OAC)

Block public access to your S3 bucket

Select one of your S3 bucket and go to Permission tab.
Turn on block all public access

Open the CloudFront console

From the list of distribution, choose the distribution that serves content from the S3 bucket that you want to restrict access to.
Choose the Origin tab.
Select the S3 origin, and then choose Edit.
Select the S3 endpoint as Origin Domain –> The S3 endpoint must be in the format $S3-Bucket-name.s3.eu-central-1.amazonaws.com
For Origin Access, select Origin access control settings (recommended).
In the dialogue box, name your control setting. It’s a best practice to keep the default setting as Sign requests (recommended). Then, choose Create.
For S3 bucket Access, apply the bucket policy on the S3 bucket. Select Copy policy, and then select Save.
Select Go to S3 bucket permissions to take you to the S3 bucket console.
Select Save Changes.
In the Amazon S3 console, from your list of buckets, choose the bucket that’s the origin of the CloudFront distribution.
Choose the Permissions tab.
Under Bucket Policy, confirm that you see a statement similar to the following:

{
	"Version": "2008-10-17",
	"Id": "PolicyForCloudFrontPrivateContent",
	"Statement": [
		{
			"Sid": "AllowCloudFrontServicePrincipal",
			"Effect": "Allow",
			"Principal": {
				"Service": "cloudfront.amazonaws.com"
			},
			"Action": "s3:GetObject",
			"Resource": "arn:aws:s3:::$BucketName/*",
			"Condition": {
				"StringEquals": {
					"AWS:SourceArn": "arn:aws:cloudfront::$accountID:distribution/$distributionID"
				}
			}
		}
	]
}

You must add the preceding statement to allow CloudFront OAC to read objects from your bucket.

Add your default root object

From the list of distribution, choose the distribution that serves content from the S3 bucket that you want to restrict access to.
Choose the General Setting.
Add the default root object under the option Deafult root object. CloudFront will return a specific object when a user requests the root URL for the distribution.

We’ll use CloudFront Function to set a default root object for subdirectories on our statically hosted website. Specifically, www.example.com/subdir/index.html will be served whenever the user asks for www.example.com/subdir.

Create CloudFront Function

Open the CloudFront console
Go to Functions and create a new record.
In the Function Code create a simple JavaScript function:

'use strict';
function handler(event) {
 var request = event.request;
 var uri = request.uri;

 // Check whether the URI is missing a file name.
 if (uri.endsWith('/')) {
     request.uri += 'index.html';
 } 
 // Check whether the URI is missing a file extension.
 else if (!uri.includes('.')) {
     request.uri += '/index.html';
 }
  return request;
}

From the list of distribution, choose the distribution that serves content from the S3 bucket that you want to restrict access to.
Choose the Behaviors tab.
Under Additional settings add your CloudFront function as Viewer request.

Save changes.