CloudFront Distributions

Configure CloudFront distributions in DuploCloud

CloudFront is an AWS content delivery network (CDN) that accelerates delivery of your content by caching it at edge locations closer to your users.

Prerequisites

Before creating a CloudFront distribution:

• Create an S3 bucket

• Upload your static assets to the S3 bucket.

Creating a CloudFront Distribution

1. From the DuploCloud Portal, navigate to Cloud Services -> Networking.

2. Select the CloudFront tab.

3. Click Add. The Add Distribution page displays.

CloudFront Add Distribution page.

1. Complete the following fields:

Name	Enter a name for the distribution.
Root Object	Specify the Root Object that will be returned when accessing the domain's root (e.g., index.html). The Root Object should not start with /.
Certificate	Select the ACM certificate for the distribution. Only certificates issued in US-East-1 are valid. If no certificate is available, request one in AWS and add it to the DuploCloud Plan.
Certificate Protocol Version	Select the correct Certificate Protocol Version from the list.
CORS Allowed Hosts	Optionally, enter the list of origins allowed for cross-origin resource sharing (CORS).
Logging	Optionally, enable or disable logging for the CloudFront distribution.
Aliases	Optionally, enter any alternate domain name(s) (CNAMEs) to associate with the CloudFront distribution. For aliases managed by DuploCloud, CNAME mapping is automatic. For others, you must manually create the CNAME record in your DNS console.
Origins	Enter the location(s) where the content is stored: • Domain Name: Select the correct S3 bucket, or choose Other and enter a custom origin endpoint. • Origin ID: This unique ID is pre-populated from the domain name; you can change it if needed. • Path: (Optional) Enter a path suffix to append to the origin's domain name when fetching content. Examples: static for S3 prefix, v1 if all APIs start with /v1.
Default Cache Behavior	Configure how CloudFront caches and serves content by setting the following: • Target Origin: Select the origin to fetch content from. • Cache Policy ID: Select one of the AWS-defined cache policies or specify a custom one. • Origin Request Policy: Define headers, cookies, and query strings to include in origin requests. • Response Headers Policy: Set headers included in CloudFront responses. • Compress: Optionally enable compression for better performance.
Custom Cache Behaviors	Optionally, configure additional cache behaviors with the following fields: • Path Pattern: Enter the URL path pattern to match requests (e.g., api/*). • Cache Policy ID: Select or enter the cache policy to apply. • Target Origin: Choose the origin for these requests. • Origin Request Policy ID: Specify which origin request policy to apply. • Response Headers Policy: Define response headers for this behavior. • Compress: Enable compression if desired.
Cache Policy ID	Select one of the AWS-defined cache policies, or choose Other to enter a custom policy ID.
Function Associations	Attach Lambda@Edge functions to CloudFront events by specifying: • origin-request (Include Body option available) • origin-response • viewer-request (Include Body option available) • viewer-response
Custom Error Responses	Configure custom error handling: • HTTP Error Code: The HTTP status code to handle (e.g., 404). • Error Caching TTL: Time to cache the error response. • Response Page Path: The path to the custom error page. • HTTP Response Code: The HTTP response code CloudFront returns to the viewer.

1. Click Submit to create the CloudFront distribution.

For Terraform Users: When deploying a CloudFront distribution using Terraform in DuploCloud, ensure that the comment field is included in your configuration. Although this field is marked optional in AWS documentation, DuploCloud requires it as a resource name. Omitting it may cause deployment failures.

Creating a Lambda@Edge function association

Creating a Lambda function in the Tenant

1. Select the Tenant from the Tenant list box.

2. Navigate to Cloud Services -> Serverless.

3. Select the Lambda tab.

4. Click Add.

5. Select the Edge lambda checkbox to create a Lambda function in us-east-1 with the necessary permissions.

6. Complete the necessary fields and click Submit.

Creating a CloudFront distribution

1. Select the Tenant from the Tenant list box.

2. Navigate to Cloud Services -> Networking, select the CloudFront tab, and click Add.

3. Complete the necessary fields. Make sure to select the Lambda function created above in Function Associations.

4. Click Submit.

Note: DuploCloud lists all versions of the Lambda function (e.g., v1, v2, etc.). Select the correct version for your use case.

Once the deployment status is Deployed, visit the distribution’s domain name to verify Lambda function invocation.

Setting Up a Website Maintenance Page

You can use CloudFront to serve a maintenance page during outages or deployments.

1. The default origin should point to your app (e.g., ui.mysite.com).

2. Create a new S3 bucket to store maintenance page assets.

3. In that bucket, create a folder (prefix) named maintpage.

4. Upload your maintenance page files (index.html, style.css, etc.) into the maintpage folder.

5. In CloudFront:

   • Add a new S3 Origin pointing to this S3 bucket.

   • Add a Custom Cache Behavior:

     • Path Pattern: /maintpage/*

     • Target Origin: the S3 origin created for maintenance assets

Adding Custom Error Response Mapping

To serve the maintenance page during errors:

1. When creating a distribution, in Custom Error Responses, configure the following settings:

HTTP Error Code	Specify the error code (e.g., 404, 500) that triggers the custom response.
Error Caching TTL	Specify the time (in seconds) to cache the error response.
Response Page Path	Enter the path to the custom error page (e.g., /custom-404.html).
HTTP Response Code	Specify the response code to return with the custom error page (e.g., 200 or 302).