Uso de AWS Lambda @ Edge con CloudFront

Lambda @ Edge es una adición al servicio de cómputo AWS Lambda que se utiliza para personalizar el contenido que ofrece cloudfront.

El diagrama de bloques que muestra el funcionamiento de AWS Lambda con cloudfront de AWS se muestra a continuación:

Hay cuatro formas en las que se puede utilizar AWS Lambda:

  • Viewer Request − El usuario final realiza la solicitud llamada Solicitud de visor a CloudFront

  • Origin Request − CloudFront reenvía la solicitud al origen

  • Origin Response − CloudFront recibe la respuesta del origen

  • Viewer Response − CloudFront envía la respuesta al espectador

Podemos usar Lambda @ Edge para los siguientes propósitos:

  • Cambiar los encabezados a pedido y tiempo de respuesta.

  • Agregue detalles de cookies a los encabezados. Realice pruebas AB en función de la solicitud y la respuesta.

  • Redirija la URL a otro sitio, según los detalles del encabezado.

  • Podemos buscar el agente de usuario de los encabezados y averiguar los detalles del navegador, sistema operativo, etc.

Requisitos

Para comenzar a trabajar en CloudFront y Lambda @ Edge, necesitamos lo siguiente:

  • Cree un depósito de almacenamiento S3 con detalles de archivo

  • Cree un rol que permitirá el permiso para trabajar con CloudFront y Lambda @ Edge

  • Cree una distribución de CloudFront

  • Crear función lambda

  • Agregar detalles de la función lambda a cloudfront

  • Verifique la URL de Cloudfront en el navegador

Trabajaremos en un ejemplo con CloudFront y Lambda @ Egde, en el que alojaremos la página y cambiaremos la respuesta cuando se detecte como escritorio y dispositivos.

Crear depósito de almacenamiento S3 con detalles de archivo

Inicie sesión en la consola de AWS, cree un bucket en S3 y agregue el . html archivo que desea mostrar.

Haga clic en S3 y Create bucket como se muestra a continuación -

Ahora, haga clic en Create bucket y agregue los detalles del cubo como se muestra a continuación:

Haga clic en Create y cargue el .html en él.

Crear rol

Vaya a la consola de AWS y haga clic en IAM.

Ahora, haga clic en Roles -> Create role botón como se muestra -

Elija el permiso para S3, Lambda y Cloudfront. Es una buena práctica crear la política dando permiso solo a la función requerida, el almacenamiento, utilizando los detalles del ARN.

En el ejemplo que se analiza a continuación, mostramos el Full Accesspermiso. Políticas para el nombre del rolrole for cloudfrontse agrega como se muestra arriba. Haga clic en Crear rol.

Toda la política requerida para lambda @ edge y cloudfront se muestra arriba. Hay un paso adicional que debe realizarse aquí, ya que en caso de Cloudfront, la URL estará disponible en toda la región y necesita una relación de confianza entre los servicios que estamos utilizando.

Ahora, para el rol creado, haga clic en Trust relationships pestaña como se muestra -

Haga clic en Edit Trust Relationship como se muestra a continuación -

Muestra un documento de política. Necesitamos agregar los otros servicios en elPrincipal -> Serviceque estamos planeando utilizar. El documento final de la política de relación de confianza se muestra a continuación:

Hacer clic Update Trust Policy para guardar los cambios.

Crear distribución de CloudFront

Vaya al servicio CloudFront como se muestra a continuación:

Haga clic en el servicio CloudFront y haga clic en Create Distribution -

Configuración de origen, configuración de comportamiento y configuración de distribución

Echemos un vistazo a estos ajustes uno por uno:

Origin Settings

Varios parámetros de la configuración de origen se explican a continuación:

Origin Domain Name −Este es el nombre del bucket de S3 donde hemos almacenado los archivos html. También podemos almacenar imágenes, si las hay, en el depósito de S3 creando carpetas de nuestra elección.

Origin Path −Aquí debe ingresar el nombre de la carpeta donde se almacenan los archivos. Actualmente, no tenemos esta carpeta, así que la dejaremos en blanco por ahora.

Origin ID −Se completa cuando se selecciona el nombre de dominio de origen. Puede cambiar la identificación según su elección.

Restrict Bucket Access − En este, elegiremos la opción yes. Aquí necesitamos seguridad para el depósito S3 para que nadie tenga acceso al depósito S3. Para esta opción hay algunas opciones más pobladas comoOrigin Access Identity, Comment and Grant Read Permission on Bucket.

Origin Access Identity −Hemos utilizado crear una nueva opción de identidad. También puede elegir la identidad existente. Esto crea una nueva identidad que utiliza CloudFront para leer los detalles del depósito S3.

Grand Read Permission on Bucket − Para esto, elija la opción Yes.

Origin Custom Headers − Mantendremos los encabezados en blanco aquí, ya que no necesitamos los detalles en este momento.

A continuación, analicemos y completemos el Behaviour Settings para la distribución de Cloudront -

Ahora, seleccione el protocolo: https o http, y la opción de almacenamiento en caché. Tenga en cuenta que el almacenamiento en caché predeterminado es 86400 o 24 horas. Puede cambiar este valor según el requisito.

Hacer clic Object Caching(opción de personalización) para cambiar el almacenamiento en caché. Puedes usarsmooth streamingen caso de que haya algún video en su página. Aquí, mantenemos disponible la opción predeterminada. Una vez que se crea la función lambda, se agregarán sus detalles.

Los detalles de la configuración de distribución se muestran a continuación:

A continuación se explican varios parámetros de la configuración de distribución:

Price class −Tiene detalles como el origen del tráfico de usuarios. Tenga en cuenta que aquí hemos seleccionado el predeterminado:Use All Edge Locations.

AWS WAF Web ACL −Esto es para la selección de firewall de aplicaciones web. Aquí, tiene opción comoNone. Primero, necesitamos crear el firewall en AWS. Proporciona seguridad al sitio.

Alternate Domain Names − Aquí puede especificar el nombre de dominio si lo tiene.

SSL Certificate −Esto tiene todos los detalles para ser seleccionado para el certificado SSL. Conservaremos los predeterminados.

Default Root Object −Aquí especificaremos el nombre del archivo que hemos subido en S3. Para esto, necesitamos que el contenido del .html se muestre por defecto.

Por lo demás, mantendremos la configuración predeterminada.

Hacer clic Create Distribution botón para agregar la distribución.

Tenga en cuenta que la distribución tardará algún tiempo en mostrar el estado como implementado.

Crear función AWS Lambda

Vaya a la consola de AWS y cree la función Lambda.

En el código de AWS Lambda, tomaremos los encabezados de la solicitud y verificaremos el agente de usuario. Si el agente de usuario es de escritorio, cambiaremos la respuesta para mostrar el mensaje como“DESKTOP : Welcome to AWS Lambda with Cloudfront!” y si el dispositivo será el mensaje“MOBILE DEVICES : Hello from [email protected]!”

El código AWS Lambda correspondiente se muestra a continuación:

let content = `
<\!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Simple [email protected] Static Content Response</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   
   <body>
      <h1>MOBILE DEVICES : Hello from [email protected]!</h1>
   </body>
</html>
`;
let content1 = `
<\!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>Simple [email protected] Static Content Response</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   
   <body>
      <h1>DESKTOP : Welcome to AWS Lambda with Cloudfront!</h1>
   </body>
</html>
`;
exports.handler = (event, context, callback) => {
   let request = event.Records[0].cf.request;
   let finalrequest = JSON.stringify(request);
   let headers = request.headers;
   let useragent = JSON.stringify(headers["user-agent"][0].value);
   let str = "";
   if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i.test(useragent)) {
      str = content;
   } else {
      str = content1;
   }
   const response = {
      status: '200',
      statusDescription: 'OK',        
      body: str+useragent,
   };
   callback(null, response);
};

Ahora, guarde la función Lambda. Tenga en cuenta que debemos publicar la función Lambda para que pueda usarse con todas las regiones. Para publicar, debemos hacer lo siguiente:

En el menú desplegable Acciones, seleccione Publish new version como se muestra a continuación -

Si es usted, haga clic en Publish new version, muestra la siguiente pantalla -

Ahora, ingrese la descripción de la versión y haga clic en Publish. El ARN mostrará la versión de la función AWS Lambda creada como se muestra a continuación:

Agregue el disparador de CloudFront a la nueva versión creada como se muestra a continuación:

Ahora, agregue los detalles de configuración para CloudFront. El evento CloudFront tiene la opción deViewer request, Origin request, Origin responsey Viewer response.

A continuación, elija la distribución de CloudFront creada anteriormente. Desdeevents, seleccionaremos Viewer request. Según la solicitud del espectador, se decidirá el escritorio / dispositivo del agente de usuario y se cambiará la respuesta. A continuación, agregue los detalles del disparador.

Una vez que se agrega el disparador, debemos esperar a que se implemente la distribución de CloudFront.

Una vez que el estado cambia a Deployed, podemos probar la URL de CloudFront y verificar el nombre de dominio en el navegador.

La pantalla en el navegador de escritorio es como se muestra a continuación. Aquí hemos impreso el agente de usuario del evento de solicitud de espectador.

Esta es la pantalla en el dispositivo móvil.

Por lo tanto, en el ejemplo anterior, hemos utilizado Lambda @ Edge para cambiar la respuesta en el escritorio y el dispositivo móvil.