Amazon Web Services (AWS) CloudFront Setup

The following screenshots illustrate how to configure AWS CloudFront to deliver content from an AEM origin.

Create a cache policy

In the CloudFront sidebar, go to Policies → Cache → Create cache policy.

• Name: e.g. aem-cache-policy
• TTL settings → Default TTL: 300 seconds
• Under Cache key settings, keep the defaults:
  • Headers: None
  • Cookies: None
  • Compression support: Gzip, Brotli
• And override the following:
  • Query strings: Include specified query strings
    • width
    • height
    • format
    • optimize
    • limit
    • offset
    • sheet

Click Create.

Create an origin request policy

In the CloudFront sidebar, go to Policies → Origin request → Create origin request policy.

• Name: e.g. aem-origin-request-policy
• Keep the default settings:
  • Headers: None
  • Cookies: None
• And override the following:
  • Query strings: Include specified query strings
    • width
    • height
    • format
    • optimize
    • limit
    • offset
    • sheet

Click Create.

Create a CloudFront distribution

In the navigation pane, choose Distributions → Create distribution.

• Choose a plan, i.e. any but the Free plan. The Free plan is not supported since it lacks support for Invalidation by cache tag which is required.
• Enter a Distribution name (e.g. your site name).
• Choose Single website or app.
• Domain setup: if your DNS is not managed in Route 53 (the usual case), skip this step and choose Next. You will point your DNS at CloudFront later.
• On the Specify origin page:
  • Choose the Other origin type (not Amazon S3).
  • Origin domain: main--sitename--orgname.aem.live
  • Under Settings, choose Customize origin settings (the recommended settings do not include what AEM needs). Leave the protocol and timeout defaults.
  • Cache settings: choose Customize cache settings
    Cache policy: Select the previously created Cache policy (e.g. aem-cache-policy).
    Origin request policy: Select the previously created Origin request policy (e.g. aem-origin-request-policy).
  • Choose Next.

• On the Enable security page, choose Do not enable security protections. Your AEM origin requires no Web Application Firewall (WAF), and use of a WAF is neither required nor recommended for AEM origins. Choose Next.
• If a TLS certificate step appears (Route 53 domains only), complete or skip it, then choose Next.
• Review your distribution details and choose Create distribution. We need to return to the configuration later, so remember the ID of your distribution.

Configure the origin (custom headers)

Open your distribution → Origins tab → select the origin → Edit.

Under Add custom header, add the following headers:

• X-Forwarded-Host: your domain name
• X-BYO-CDN-Type: cloudfront

If you have successfully configured push invalidation for your project you should also add the following custom header:

• X-Push-Invalidation: enabled

Save changes.

Enable invalidations by cache tag

Open your distribution → General tab → Edit.

Choose Use cache tags for cache invalidation. Leave the default for Header to use for cache tags: x-amz-meta-cache-tag

Save changes.

Create a Function to remove Age and X-Robots-Tag headers

In the CloudFront sidebar, select Functions and click Create function.

Enter a name for the function (e.g. stripHeaders), an optional description, set the Runtime to cloudfront-js-2.0, and click Create function.

In the Build tab, replace the code of the function with the following snippet and click Save changes:

function handler(event) {
    const response = event.response;
    const request = event.request;
    const headers = response.headers;

    // Strip age header
    delete headers['age'];

    // Check if the request URL does not end with '.plain.html'
    if (!request.uri.endsWith('.plain.html')) {
        delete headers['x-robots-tag'];
    }

    return response;
}

Select the Publish tab and click Publish function.

Finally, associate the function with your distribution by scrolling down to Associated distributions and click Add association.

In the following dialog, select:

• Distribution: the ID of your new distribution
• Event type: Viewer response
• Cache behavior: Default (*)

Finally, click Add association.

That’s all (more or less). Please test the distribution in a stage environment.

Optional: Authenticate Origin Requests

If you have enabled token-based Site Authentication, go back to CloudFront → Distributions → <your distribution> → Origins → <your AEM origin> → Edit.

Under Add custom header, select Add header and create a header Authorization with value token <your-auth-token>. Replace <your-auth-token> with the token value created through token-based Site Authentication (it starts with hlx_ as the header value).

This will ensure that all requests from the AWS CloudFront CDN to your AEM origin use the correct authorization.