DEV Community

Cover image for Get started with CloudFront - Part 4: Lambda@Edge function
Van Hoang Kha for AWS Community Builders

Posted on • Edited on

Get started with CloudFront - Part 4: Lambda@Edge function

Table of Content

  1. Create Lambda@Edge function
  2. Deploy Lambda@Edge function to CloudFront
  3. Metrics and Logs

1. Create Lambda@Edge function

In this section, we will create a Lambda@Edge function.

Image description

  • Go to the AWS Console and make sure you are in the US-EAST-1 N. Virginia region.

  • Go to Lambda console and select Create function

Image description

Perform configuration:

  • Select "Author from scratch"
  • Select "Create function"
  • Name: "LambdaEdgeImmersionDayLabFunction"
  • Runtime: "Node.js 18.x"

Image description

Role: "Create new role from AWS policy templates"

  • Role name: "lambda_edge_execution_role"
  • Policy templates: "Basic Lambda@Edge permissions (for CloudFront trigger)"
  • Click "Create function"

Image description

Finish creating Lambda function. You have successfully created a new IAM role, which is used to allow CloudFront to invoke Lambda and log to CloudWatch.

Image description

Select tab Test

  • Select Create new test event
  • Event Name : “TestEvent”

Image description

Replace Hello World JSON with the following json:

{
    "Records": [
      {
        "cf": {
          "config": {
            "distributionDomainName": "d123.cloudfront.net",
            "distributionId": "EDFDVBD6EXAMPLE",
            "eventType": "viewer-request",
            "requestId": "MRVMF7KydIvxMWfJIglgwHQwZsbG2IhRJ07sn9AkKUFSHS9EXAMPLE=="
          },
          "request": {
            "clientIp": "2001:0db8:85a3:0:0:8a2e:0370:7334",
            "method": "GET",
            "querystring": "size=large",
            "uri": "/picture.jpg",
            "headers": {
              "host": [
                {
                  "key": "Host",
                  "value": "d111111abcdef8.cloudfront.net"
                }
              ],
              "user-agent": [
                {
                  "key": "User-Agent",
                  "value": "curl/7.51.0"
                }
              ]
            },
            "origin": {
              "custom": {
                "customHeaders": {
                  "my-origin-custom-header": [
                    {
                      "key": "My-Origin-Custom-Header",
                      "value": "Test"
                    }
                  ]
                },
                "domainName": "example.com",
                "keepaliveTimeout": 5,
                "path": "/custom_path",
                "port": 443,
                "protocol": "https",
                "readTimeout": 5,
                "sslProtocols": [
                  "TLSv1",
                  "TLSv1.1"
                ]
              },
              "s3": {
                "authMethod": "origin-access-identity",
                "customHeaders": {
                  "my-origin-custom-header": [
                    {
                      "key": "My-Origin-Custom-Header",
                      "value": "Test"
                    }
                  ]
                },
                "domainName": "my-bucket.s3.amazonaws.com",
                "path": "/s3_path",
                "region": "us-east-1"
              }
            }
          }
        }
      }
    ]
  }

Enter fullscreen mode Exit fullscreen mode
  • Select Create

Image description

Return to the Lambda function interface and select Code

  • Now we will write a function to generate generated HTML.

  • Copy and paste the following code into the function code window:

const handler = (event, context, callback) => {
    console.log("Request Event:" + JSON.stringify(event, null, 2));

    const requestHeaders = event.Records[0].cf.request.headers;

    var htmlContent;

    //Insert code to generate the html content content here.

    const response = {
        status: '200',
        statusDescription: 'OK',
        headers: {
            'cache-control': [{
                key: 'Cache-Control',
                value: 'max-age=100'
            }],
            'content-type': [{
                key: 'Content-Type',
                value: 'text/html'
            }],
            'content-encoding': [{
                key: 'Content-Encoding',
                value: 'UTF-8'
            }],
        },
        body: htmlContent,
    };

    callback(null, response);
};

module.exports.handler = handler;
Enter fullscreen mode Exit fullscreen mode
  • Save
  • Chọn Deploy
  • Sau đó chọn Test

Image description

View Test Results

Image description

Let's see the result of the execution. Notice that the output is a JSON version of the HTTP 200 response that CloudFront will use to respond to the request. In this case, the response is still missing the body.

Image description

In the Log output, we can see that the test event we configured is logged as a Request Event on the function's input. This JSON represents the properties of the request received by CloudFront, which can be read or modified. In this exercise, we will read the headers and return the result as a nice HTML table.

Image description

Replace the comment with the code needed to generate the HTML body. You can use console.log to output and debug your code.

exports.handler = (event, context, callback) => {
    const requestHeaders = event.Records[0].cf.request.headers;

    let str = '<table border="1" width="100%">' +
              '<thead>' +
                '<tr><td><h1>Header</h1></td><td><h1>Value</h1></td></tr>' +
              '</thead>' +
              '<tbody>';

    for (const key in requestHeaders) {
      if (requestHeaders.hasOwnProperty(key)) {
        str += '<tr><td>' + key + '</td><td>' + requestHeaders[key][0].value + '</td></tr>';
      }
    }

    str += '</tbody></table>';

    const htmlContent = `
      <html lang="en">
        <body>
          <table border="1" width="100%">
            <thead>
              <tr><td><h1>Lambda@Edge Lab</h1></td></tr>
            </thead>
            <tfoot>
              <tr><td>Immersion Days - Edge Services - Module 3</td></tr>
            </tfoot>
            <tbody>
              <tr><td>Response sent by API</td></tr>
            </tbody>
            <tbody>
              <tr><td>${str}</td></tr>
            </tbody>
          </table>
        </body>
      </html>
    `;

    const response = {
      status: '200',
      statusDescription: 'OK',
      headers: {
        'cache-control': [{ key: 'Cache-Control', value: 'max-age=100' }],
        'content-type': [{ key: 'Content-Type', value: 'text/html' }],
        'content-encoding': [{ key: 'Content-Encoding', value: 'UTF-8' }],
      },
      body: htmlContent,
    };

    callback(null, response);
  };

Enter fullscreen mode Exit fullscreen mode
  • Save
  • Select Deploy
  • Select Test

Image description

View Test Result

Image description

Return to Lambda function, select Versions

  • Select Push new version

Image description

Enter

version 1

and select Publish

Image description

Complete Lambda Function creation using CloudFront.

Image description

2. Deploy Lambda@Edge function to CloudFront

In this section, we will add CloudFront as a trigger for your Lambda function.

Image description

In the same lambda console, you have implemented version 1 of the Lambda function. Click the Add trigger button and select CloudFront.

Image description

Click Deploy to Lambda@Edge.

Image description

Configure the trigger to use the previously created CloudFront Distribution and Cache Behavior with the following settings:

  • Distribution:
  • Cache behavior: "/serverless"
  • CloudFront event: Origin request
  • Select "I acknowledge that on deploy a new version of this function will be published with the above trigger and replicated across all available AWS regions."
  • Click Deploy

Image description

Deployment will take approximately 5 minutes to complete for CloudFront distribution. In some cases, you can start testing in less than 5 minutes, depending on your location.

Image description

Return to Lambda interface and select Replicas.

Image description

Now search for your Lambda function in the Lambda functions list and you will find a Lambda function Replica in us-east-1 for the Lambda function you created.

Image description

When you move to other AWS regions, you will find that there is a Lambda function replica in all regions where CloudFront has a Regional Edge Cache. These are the Lambda functions that will be called when your CloudFront distribution executes Lambda@Edge. Once your CloudFront distribution has been deployed, test your CloudFront distribution by accessing Distribution in a browser with a serverless path.

Image description

3. Metrics and Logs

To generate traffic from different geographic locations, you can use CloudShell to send HTTP requests. It is a shell environment that includes the curl tool to safely interact with your AWS resources. Send multiple requests using the curl tool to generate traffic to CloudFront from different regions.

Image description

Go to the AWS Lambda console and select an AWS region near one of the locations you selected to send requests.

Image description

View CloudWatch Logs.

Image description

View detailed Log events.

Image description

Clean up resources

Delete S3 bucket

  • Step 1: Log in to the AWS Management Console.

  • Step 2: Select S3 service.

  • Step 3: Select the bucket you want to delete.

  • Step 4: Click the Delete bucket button at the top of the screen.

  • Step 5: Enter the bucket name in the confirmation box and click Delete.

Note: If the bucket contains any objects, you will not be able to delete the bucket directly. You must delete all objects in the bucket before deleting the bucket. If you want to delete some specific objects, select the object and click the Delete button.

Use the AWS Command Line Interface (CLI) to delete a bucket

You can also use the AWS CLI to delete buckets. Here are the steps to delete a bucket using the AWS CLI:

  • Step 1: Open Command Prompt or Terminal.

  • Step 2: Sign in to the AWS CLI.

  • Step 3: Use the following command to delete the bucket:

aws s3 rb s3://bucket-name --force
Enter fullscreen mode Exit fullscreen mode

Where, bucket-name is the name of the bucket you want to delete. The --force option is used to confirm the deletion of the bucket.

Note: If the bucket contains any objects, you will not be able to delete the bucket directly. You must delete all objects in the bucket before deleting the bucket. If you want to delete some specific objects, use aws s3 rm command to delete them.

With the steps above, you can delete a bucket in AWS S3 using the user interface or the AWS CLI. Make sure you back up all your data before deleting the bucket, and do this carefully.

Terminate EC2

  • Step 1: Login to AWS Management Console

    • To delete EC2, you first need to log in to the AWS Management Console. This can be done by going to https://aws.amazon.com and logging in with your AWS account.
  • Step 2: Search for EC2 instance to delete

    • After logging in to the AWS Management Console, you need to find the EC2 instance that you want to delete. You can use the search engines or browse the EC2 instance lists to find the instances you want to delete.
  • Step 3: Delete EC2 instance

  • Once you find an EC2 instance to delete, you can delete it by performing the following steps:

    • Right click on the EC2 instance you want to delete.
    • Select "Instance State" from the menu that appears.
    • Select "Terminate" to delete EC2 instance.
    • You will receive a warning to confirm the deletion of the EC2 instance. If you are sure you want to delete the EC2 instance, select "Yes, Terminate".

Delete CloudFront Distribution

  • Step 1: Access AWS Console

  • First, you need to sign in to the AWS Console with your account at https://console.aws.amazon.com/.

  • Step 2: Select CloudFront . service

  • After logging in to the AWS Console, you need to select the CloudFront service by clicking the "Services" icon on the top bar and searching for CloudFront. You can enter the keyword "CloudFront" in the search box to find the service faster.

  • Step 3: Select CloudFront Distribution to delete

  • In the CloudFront screen, you will see a list of CloudFront Distributions. Find and select the CloudFront Distribution you want to remove by clicking on its name.

  • Step 4: Delete CloudFront Distribution

  • After selecting the CloudFront Distribution to delete, you need to click the "Distribution Settings" button. In the distribution settings page you will see a "Delete" button. Click this button and confirm deletion of CloudFront Distribution by entering "Yes" in the confirmation dialog.

Note: When deleting CloudFront Distribution, all data related to it will be deleted from the system and cannot be recovered. Therefore, make sure that you have backed up your important data before performing the delete operation.

Delete Lambda Function

  • Step 1: Log in to your AWS account and go to the Lambda service management page.

  • Step 2: Find and select the Lambda Function you want to delete.

  • Step 3: Click the Actions button and select Delete Function.

  • Step 4: Confirm deletion by pressing Delete.

Note: You cannot restore a deleted Lambda Function.

Remove Lambda Edge

  • Step 1: Log in to your AWS account and go to the Lambda service management page.

  • Step 2: Select the Functions tab and select the Lambda Function used by Lambda Edge.

  • Step 3: Find and click the Triggers tab and select Edge Association.

  • Step 4: Click the Delete button and confirm by pressing Yes.

Note: After removing Lambda Edge, you need to wait about 10 minutes for the changes to take effect across the CDN network.

The following sections

Get started with CloudFront - Part 1: CloudFront Distribution

Get started with CloudFront - Part 2: Distribution Invalidations

Get started with CloudFront - Part 3: Response Headers and Cache Behavior

Get started with CloudFront - Part 4: Lambda@Edge function

Top comments (0)