style

content

Amazon Web Services (AWS) CloudFront Setup

The following screenshots illustrate how to configure AWS CloudFront to deliver content from an AEM origin. Essential settings are marked with a red circle.

Create a CloudFront distribution

Configure the origin

Use main--sitename--orgname.aem.live as the Origin domain.

Add following custom 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

Cache behavior

Keep the default settings here.

Cache key and origin requests

Click "create cache policy"

Create cache policy

Set the Default TTL to 300 seconds.

Under "cache key settings", keep the defaults:

Headers: none
Cookies: none
Compression support: gzip, brotli

And override the following:

Query Strings: Include the following query strings
- width
- height
- format
- optimize
- limit
- offset
- sheet

Close the browser tab and return to the previous screen. On this screen, click "create origin request policy".

Create origin request policy

Keep the default settings:

Headers: none
Cookies: none

And override the following:

Query Strings: Include the following query strings
- width
- height
- format
- optimize
- limit
- offset
- sheet

Then click create and close the tab to return to the previous screen.

Apply Cache policy and origin request policy

After returning to the distribution properties, click the reload buttons next to the Cache policy and origin request policy dropdowns, so that the two newly-created policies show up. Next, select the new policies for both Cache policy and origin request policy.

Create distribution

Select whether you want to enable a Web Application Firewall (WAF). Your AEM origin requires no WAF and use of a WAF is neither required nor recommended for AEM origins.

Scroll to the end of the page and click "create distribution". We need to return to the configuration later, so remember the ID of your distribution.

Create 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 and click on “Create Function”:

Replace the code of the function with the following snippet and click on “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 on “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.