Article
Dynamic Content Generation Based on the Device by Amazon Lambda@Edge

By: Martin Flemate, Cloud Engineer at IO connect Services

May 15, 2020

INTRODUCTION

The Lambda@Edge is an extension of AWS Lambda, which helps to execute functions that customize the content CloudFront delivers though the events, such as viewer request, origin request, origin response, and viewer response.

This article describes how to trigger an edge function on a CloudFront Distribution to deliver dynamic content based on the device using the origin request event.

OBJECTIVE

Create a Lambda@Edge to serve dynamic content based on the device.

PRE-REQUISITE

CloudFront Distribution created:

  • The CloudFront must be configured to cache based on the Device Type. In this article, we only use two headers:
    • CloudFront-Is-Desktop-Viewer
    • CloudFront-Is-Mobile-Viewer
    • CloudFront adds the CloudFront-Is-*-Viewer headers after the viewer request event.
    • The CloudFront Origin must be configurated as a custom origin type.

    Static website hosted on Amazon S3:

    • The S3 Bucket must be configured as Static Website Hosting.
    • The content for each specific device must be separated into different folders:
      • Mobile path: /mobile
      • Desktop path: /desktop

      STEPS TO CREATE THE INFRASTRUCTURE

      1. Create an IAM Role for Lambda@Edge

      Note: The role must have a Trust relationship configuration for Lambda@Edge.

      Enter the AWS console, go to the IAM service, and in the left panel, select the Roles option. Then, click over "Create Role," choose the "Lambda" option to use case and tap on Next.

pic 1

Filter by the lambda word and mark the checkbox for the AWSLambdaRole policy.

Screen-Shot-2020-05-13-at-16.37.40

Then, tap on the "Next" button until the Review page. Enter a role name to identify it. Consider that we will need it later. Once the review was validated, create the role.
 

Screen-Shot-2020-05-13-at-16.41.03

In the policy, the document adds the edgelambda.amazonaws.com line into Service and update it. Configure the role as follows to avoid syntax errors.

 

Screen-Shot-2020-05-13-at-16.48.25

The trust entity must be successfully added.

Screen-Shot-2020-05-13-at-16.43.46

2 Create a Lambda@Edge for CloudFront

a. Lambda Function

On the AWS console, go to Lambda service and tap on Create function. On the next screen, the "Author from scratch" must be selected, then enter a Lambda name and choose the "Node.js 12.x" version as runtime.

Screen-Shot-2020-05-13-at-16.52.27

Next, the dropdown box of the "Choose or create an execution role" options, select "Use an existing role," and choose the role created in the first step.

Screen-Shot-2020-05-13-at-16.55.10

Once the Lambda is created, you can copy and paste the code below on the index.js file and save the changes.
 

Screen-Shot-2020-05-13-at-16.56.31

b. Deploy to CloudFront

To deploy the Lambda@Edge on CloudFront, it is necessary to publish a new version of the Lambda. In the menu at the top of the page, choose "Actions" and "Publish new version," leave the description blank, and tap on "Publish."

Screen-Shot-2020-05-13-at-16.57.51

After that, choose "Add trigger" and in the Designer section select CloudFront as a trigger, then complete the following options and tap on "Add":

  • Configure CloudFront trigger
    • Distribution: Select your Distribution ID.
    • Cache behavior: Leave the value as default, or if CloudFront has more than one Cache behaviors configured, select the corresponding for the S3 Bucket.
    • CloudFront event: For this example, you must choose the origin request event.
    • Confirm deployment to Lambda@Edge
      • Check the box to enable CloudFront as a trigger for a Lambda function and the automatic replication across multiple Regions.

Screen-Shot-2020-05-13-at-17.03.44

 

The trigger should be successfully added, as shown below:

Screen-Shot-2020-05-13-at-17.05.33

TEST THE LAMBDA@EDGE

After deploying the lambda@edge, CloudFront Distribution should be displayed the status "in progress" and, after several minutes, must change to "Deployed."

Screen-Shot-2020-05-13-at-17.06.50

One all services were deployed correctly, open any browser (Chrome, Firefox, Safari) on a desktop or laptop and a smartphone. Enter the URL of your website and compare the results.

Note: For testing the article, we used the "dev.safetycloud.ioconnectservices.com" domain created on Amazon Route 53 that points to our CloudFront, but if you do not have a custom domain name, use the CloudFront domain name.

1. Desktop test
 

Screen-Shot-2020-05-13-at-17.09.34

2. Smartphone test
 

Screen-Shot-2020-05-13-at-17.10.29

CONCLUSION

Lambda@Edge is an excellent solution for CloudFront distributions if you want to improve performance, generate dynamic content based on attributes of requests or response, add security layers, or handle different origins, to mention some uses. In this article, we show how to associate with a trigger a CloudFront Distribution to serve dynamic content based on the device and use the origin request event for the cache behavior.

INSIGHTS

Recommended

Article
Common Staffing Challenges and How to Overcome Them
Article
Software Development Outsourcing Models
Article
Benefits of Outsourcing to Mexico
Whitepaper
Nearshore Software Solutions as an Outsourcing Strategy

How can we help you?

IO Connect Services is here to help you by offering cost-effective, high quality technology solutions.