Amazon CloudFront is a content delivery network (CDN) service that accelerates the distribution of your static and dynamic web content, such as .html, .css, .js, and image files. When hosting a static website on AWS, using Amazon S3 and CloudFront, one common requirement is to set a default root object for subdirectories within your CloudFront distribution. This determines which object CloudFront returns when a request is made to a subdirectory without specifying an object.

Understanding Default Root Object in CloudFront

CloudFront allows you to specify a default root object at the distribution level. However, by default, it doesn't provide a built-in method to configure default root objects per subdirectory. Instead, you need to handle subdirectory requests by modifying your S3 bucket configuration or Lambda@Edge functions.

Methods to Set Default Root Objects for Subdirectories

1. Using S3 Website Configuration:
   When hosting your static website in an S3 bucket (configured for website hosting), you can customize your index and error document settings. By default, S3 serves these documents for each directory request.
   S3 Configuration Example:
   Suppose you want index.html to be the default root object throughout your entire S3 bucket:

1   {
2       "IndexDocument": {
3           "Suffix": "index.html"
4       },
5       "ErrorDocument": {
6           "Key": "error.html"
7       }
8   }

When a request is made without specifying a file in any directory, S3 automatically serves index.html if available in that directory.

1. Using Lambda@Edge:
   Lambda@Edge allows you to run Lambda functions at AWS locations globally in response to CloudFront events. This can be used to modify requests before CloudFront forwards them to an origin. You can thus rewrite requests to include subdirectory default root objects.
   Lambda@Edge Example:
   Consider the following Lambda@Edge function to handle default root objects for subdirectories:

1   'use strict';
2   exports.handler = (event, context, callback) => {
3       const request = event.Records[0].cf.request;
4       const uri = request.uri;
5
6       if (uri.endsWith('/')) {
7           request.uri += 'index.html';
8       }
9       
10       callback(null, request);
11   };

In this script, any URI ending with a / is appended with index.html. Make sure to deploy your Lambda function in the us-east-1 region (North Virginia) because CloudFront expects it there for global utilization.

Steps to Configure Default Root Objects

1. Setting Up S3 Bucket:
   • Enable static website hosting in your S3 bucket and configure IndexDocument with a default object, e.g., index.html.
2. Creating a CloudFront Distribution:
   • Create a CloudFront distribution, selecting your S3 bucket as the origin.
   • Specify a default root object at the distribution level if needed for the root path.
3. Deploying Lambda@Edge Functions:
   • Write and test your Lambda function locally or in the AWS Lambda console.
   • Deploy the function to the us-east-1 region.
   • Associate this function with an origin request event for your CloudFront distribution.

Key Considerations

• Ensure that permissions are correctly set for both the S3 bucket and the Lambda@Edge function.
• Be aware of latency, as each additional Lambda@Edge invocation introduces a minor delay.
• Monitor CloudFront logs and metrics to understand the impact and behavior of requests being intercepted and modified by Lambda@Edge.

By understanding and implementing these strategies, you can effectively manage default root objects across subdirectories in CloudFront, improving both the performance and user experience of your statically hosted website.