Skip to content
Contact us
  • There are no suggestions because the search field is empty.

CloudFront Integration

Integrate Prerender with CloudFront to improve the SEO of your JavaScript-heavy website. This guide is perfect if you are using CloudFront as your Content Delivery Network (CDN). By routing bot traffic through Prerender, you ensure search engine crawlers index pre-rendered pages, enhancing site visibility.

Follow the steps listed below to integrate Prerender into your site. The integration is done using Lambda@Edge functions.

You can find the YAML integration code here: https://github.com/prerender/prerender-cloudfront/blob/master/prerender-cloudfront.yaml

⚠️ Caution: If you’re not familiar with AWS CloudFormation, Lambda@Edge, or CloudFront, please read the Before You Begin section carefully before proceeding

Before You Begin: Exploring the Default CloudFormation Template (OPTIONAL)

To help you get comfortable with the integration process, we suggest the following approach: You can follow the integration steps listed below using the provided YAML template without any modifications during this practice run.

  1. Deploy the Default Template
    Start by deploying the provided YAML CloudFormation template without changes in a test environment or isolated AWS account. This will create all necessary resources including Lambda functions, IAM roles, and a CloudFront distribution.

  2. Review Created Resources
    Once deployed, review the resources created by the stack in your AWS Console. Pay special attention to Lambda functions, versions, and CloudFront configurations.

  3. Compare With Your Existing Infrastructure
    Compare the default resources with your current AWS setup. Identify which parts you already have (e.g., S3 bucket, CloudFront distribution) and which new components the integration adds.

  4. Adjust and Merge
    Use this understanding to modify the CloudFormation template to merge Prerender integration components into your existing infrastructure. Remove or adjust resources that you don’t need duplicated (e.g., S3 bucket, CloudFront distribution).

This approach helps minimize risks by giving you a clear picture of the integration components before modifying your production infrastructure.

Once you’re familiar and comfortable, you can proceed with the live integration using your own configuration.

Step-by-step instructions

Step 1: Prepare Your CloudFormation Template

Start by opening the provided YAML CloudFormation template. Adjust it to fit your existing infrastructure, as you likely already have an S3 bucket and CloudFront distribution configured for your website. You’ll mainly need to incorporate the Prerender integration components, including the Lambda@Edge functions and necessary headers.

Note: If you’re using an existing S3 bucket and CloudFront distribution, you should remove or adjust the Bucket, BucketPolicy, and CloudFrontDistribution resources from the template to avoid duplications.

Step 2: Create a New CloudFormation Stack

Once you have adjusted the template to match your existing infrastructure, navigate to the CloudFormation service in your AWS Management Console.

  • Click Create stack.

  • Choose With new resources (standard) to set up the Prerender integration components.

  • (Step 1.) Upload your customized YAML template file.

  • (Step 2.) Follow the on-screen prompts to configure stack options, such as stack name and parameters (e.g., your PrerenderToken).

Note: You can find your Prerender token under the Security and Access menu in the Prerender dashboard.

  • (Step 3.) Review the configuration and click Next, then (Step 4.) review your changes and click Submit to deploy.

Note: We are explaining above how you can create a brand new stack for the integration, but if you decide to merge your existing stack with our example, you can simply deploy your merged version. 

Step 3: Confirm Stack Creation

Once CloudFormation finishes creating the stack, you will see the new stack listed with all the related Lambda function resources, as shown in the screenshot above.

If you have configured everything correctly, your Prerender integration should now be active and working with your CloudFront distribution.

Step 4: Verify Integration

To verify the integration is functioning as expected, please follow the testing steps provided here:
How do I verify if my Prerender integration is working correctly?

 

Troubleshooting Common Issues

If you encounter problems during or after the Prerender.io integration with AWS CloudFront, consider the following potential causes and solutions:

1. Lambda@Edge Deployment Delays

Lambda@Edge functions require time to propagate across AWS edge locations. After deployment, wait several minutes before testing the integration.

2. Prerender Token Issues

Verify that your PrerenderToken parameter is correctly set with a valid token from Prerender.io. Without a valid token, Prerender will reject requests.

3. Resource Conflicts with Existing Infrastructure

If integrating with an existing CloudFormation stack, ensure you remove or adjust the S3 bucket, bucket policy, and CloudFront distribution resources from the YAML to avoid duplication conflicts.

4. Insufficient IAM Permissions

The Lambda execution role must include permissions to create and write to CloudWatch logs and to execute Lambda functions. Missing permissions may cause silent failures.

5. Lambda Version and Association Mistakes

Double-check that the Lambda function versions are correctly associated with your CloudFront behaviors. Incorrect versions or ARNs will prevent Lambda triggers from firing.

6. CloudFront Cache Behavior Configuration

Ensure the CloudFront distribution is forwarding the necessary headers (such as X-Prerender-Token and User-Agent) to allow Prerender.io to detect crawlers and render content appropriately.

7. Custom Origin Path Encoding

The Lambda function redirects requests with a URL-encoded origin path. If your domain contains special characters or changes, verify the encoding matches your setup to prevent origin errors.

8. Origin Access Control Setup

Check that the CloudFront Origin Access Control (OAC) is properly applied to restrict direct access to your S3 bucket, preventing unauthorized access.

 

Handling 404s in SPAs (Single Page Applications)

Uncomment this section if you don't have a specific error page:

CustomErrorResponses:
  - ErrorCode: 404
    ResponseCode: 200
    ResponsePagePath: /404.html

This configuration is useful for Single Page Applications (SPAs), which typically do not have separate error pages and instead handle all routing through JavaScript.

In this setup, when a static file is not found on the host (resulting in a 404), the server returns a 200 response along with /404.html. JavaScript in the browser then interprets the URL and either displays the appropriate page or shows a "Not Found" message.

Related Articles