Utilisation d'AWS Lambda @ Edge avec CloudFront

Lambda @ Edge est un ajout au service de calcul AWS Lambda qui est utilisé pour personnaliser le contenu fourni par cloudfront.

Le diagramme qui montre le fonctionnement d'AWS Lambda avec cloudfront d'AWS est illustré ci-dessous:

AWS Lambda peut être utilisé de quatre manières:

Viewer Request − L'utilisateur final envoie la demande appelée Viewer Request à CloudFront
Origin Request − CloudFront transmet la demande à l'origine
Origin Response − CloudFront reçoit la réponse de l'origine
Viewer Response − CloudFront envoie la réponse au spectateur

Nous pouvons utiliser Lambda @ Edge aux fins suivantes -

Pour changer les en-têtes à la demande et le temps de réponse.
Ajoutez les détails des cookies aux en-têtes. Effectuez des tests AB en fonction de la demande et de la réponse.
Redirigez l'URL vers un autre site, en fonction des détails de l'en-tête.
Nous pouvons récupérer l'agent utilisateur à partir des en-têtes et connaître les détails du navigateur, du système d'exploitation, etc.

Conditions requises

Pour commencer à travailler sur CloudFront et Lambda @ Edge, nous avons besoin des éléments suivants:

Créer un compartiment de stockage S3 avec les détails du fichier
Créez un rôle qui autorisera l'utilisation de CloudFront et Lambda @ Edge
Créer une distribution CloudFront
Créer une fonction lambda
Ajouter les détails de la fonction lambda à cloudfront
Vérifiez l'URL cloudfront dans le navigateur

Nous travaillerons sur un exemple avec CloudFront et Lambda @ Egde, dans lequel nous hébergerons la page et changerons la réponse lorsqu'elle sera détectée en tant que bureau et appareils.

Créer un compartiment de stockage S3 avec les détails du fichier

Connectez-vous à la console AWS, créez un compartiment dans S3 et ajoutez le . html fichier que vous souhaitez afficher.

Cliquer sur S3 et Create bucket comme indiqué ci-dessous -

Maintenant, cliquez sur Create bucket et ajoutez les détails du seau comme indiqué ci-dessous -

Cliquer sur Create et téléchargez le .html dedans.

Créer un rôle

Accédez à la console AWS et cliquez sur IAM.

Maintenant, cliquez sur Roles -> Create role bouton comme indiqué -

Choisissez l'autorisation pour S3, Lambda et Cloudfront. Il est recommandé de créer la stratégie en autorisant uniquement la fonction requise, le stockage, à l'aide des détails ARN.

Dans l'exemple présenté ci-dessous, nous montrons le Full Accessautorisation. Stratégies pour le nom du rôlerole for cloudfrontest ajouté comme indiqué ci-dessus. Cliquez sur Créer un rôle.

Toutes les règles requises pour lambda @ edge et cloudfront sont indiquées ci-dessus. Il y a une étape supplémentaire à faire ici car en cas de cloudfront, l'URL sera disponible dans toute la région et nécessite une relation de confiance entre les services que nous utilisons.

Maintenant, pour le rôle créé, cliquez sur Trust relationships onglet comme indiqué -

Cliquer sur Edit Trust Relationship comme indiqué ci-dessous -

Il affiche un document de politique. Nous devons ajouter les autres services dans lePrincipal -> Serviceque nous prévoyons d'utiliser. Le document final de politique de relation de confiance est présenté ci-dessous -

Cliquez sur Update Trust Policy bouton pour enregistrer les modifications.

Créer une distribution CloudFront

Accédez au service CloudFront comme indiqué ci-dessous -

Cliquez sur le service CloudFront et cliquez sur Create Distribution -

Paramètres d'origine, paramètres de comportement et paramètres de distribution

Examinons ces paramètres un par un -

Origin Settings

Différents paramètres des réglages d'origine sont expliqués ci-dessous -

Origin Domain Name −C'est le nom du compartiment S3 dans lequel nous avons stocké les fichiers html. Nous pouvons également stocker des images, le cas échéant, dans le compartiment S3 en créant des dossiers de notre choix.

Origin Path −Ici, vous devez entrer le nom du dossier dans lequel les fichiers sont stockés. À l'heure actuelle, nous n'avons pas ce dossier, nous le garderons donc vide pour le moment.

Origin ID −Il est rempli lorsque le nom de domaine d'origine est sélectionné. Vous pouvez changer l'identifiant selon votre choix.

Restrict Bucket Access − En cela, nous choisirons l'option yes. Ici, nous avons besoin de sécurité pour le compartiment S3 afin que personne n'ait accès au compartiment S3. Pour cette option, d'autres options sont disponibles, telles queOrigin Access Identity, Comment and Grant Read Permission on Bucket.

Origin Access Identity −Nous avons utilisé créer une nouvelle option d'identité. Vous pouvez également choisir l'identité existante. Cela crée une nouvelle identité qui est utilisée par CloudFront pour lire les détails du compartiment S3.

Grand Read Permission on Bucket − Pour cela, choisissez l'option Yes.

Origin Custom Headers − Nous garderons les en-têtes vides ici, car nous n'avons pas besoin des détails pour le moment.

Ensuite, discutons et remplissons le Behaviour Settings pour la distribution Cloudront -

Maintenant, sélectionnez le protocole - https ou http, et l'option de mise en cache. Notez que la mise en cache par défaut est 86400 ou 24 heures. Vous pouvez modifier cette valeur selon l'exigence.

Cliquez sur Object Caching(option de personnalisation) pour modifier la mise en cache. Vous pouvez utilisersmooth streamingau cas où il y a des vidéos sur votre page. Ici, nous gardons l'option par défaut disponible. Une fois la fonction lambda créée, ses détails seront ajoutés.

Les détails des paramètres de distribution sont indiqués ci-dessous -

Différents paramètres des réglages de distribution sont expliqués ci-dessous -

Price class −Il contient des détails comme l'origine du trafic des utilisateurs. Notez qu'ici nous avons sélectionné celui par défaut -Use All Edge Locations.

AWS WAF Web ACL −Ceci est pour la sélection du pare-feu d'application Web. Ici, il a l'option commeNone. Tout d'abord, nous devons créer le pare-feu dans AWS. Il assure la sécurité du site.

Alternate Domain Names − Ici, vous pouvez spécifier le nom de domaine si vous avez.

SSL Certificate −Cela a tous les détails à sélectionner pour le certificat SSL. Nous conserverons ceux par défaut.

Default Root Object −Ici, nous allons spécifier le nom de fichier que nous avons téléchargé dans S3. Pour cela, nous avons besoin que le contenu du .html soit affiché par défaut.

Pour le reste, nous conserverons le réglage par défaut.

Cliquez sur Create Distribution bouton pour ajouter la distribution.

Notez que la distribution prendra un certain temps pour afficher l'état comme déployé.

Créer une fonction AWS Lambda

Accédez à la console AWS et créez la fonction Lambda.

Dans le code AWS Lambda, nous prendrons les en-têtes de requête et vérifierons l'agent utilisateur. Si l'agent utilisateur provient du bureau, nous modifierons la réponse pour afficher le message comme“DESKTOP : Welcome to AWS Lambda with Cloudfront!” et si appareil, le message sera“MOBILE DEVICES : Hello from [email protected]!”

Le code AWS Lambda correspondant est indiqué ci-dessous -

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);
};

Maintenant, enregistrez la fonction Lambda. Notez que nous devons publier la fonction Lambda afin qu'elle puisse être utilisée avec toutes les régions. Pour publier, nous devons faire ce qui suit -

Dans la liste déroulante Actions, sélectionnez Publish new version comme indiqué ci-dessous -

Si vous, cliquez sur Publish new version, il affiche l'écran suivant -

Maintenant, entrez la description de la version et cliquez sur Publish. L'ARN affichera la version de la fonction AWS Lambda créée comme indiqué ci-dessous -

Ajoutez le déclencheur CloudFront à la nouvelle version créée comme indiqué ci-dessous -

Maintenant, ajoutez les détails de configuration pour CloudFront. L'événement CloudFront a une option pourViewer request, Origin request, Origin response, et Viewer response.

Ensuite, choisissez la distribution CloudFront créée précédemment. Deevents, nous sélectionnerons Viewer request. En fonction de la demande de la visionneuse, le bureau / périphérique de l'agent utilisateur sera décidé et la réponse sera modifiée. Ensuite, ajoutez les détails du déclencheur.

Une fois le déclencheur ajouté, nous devons attendre que la distribution de CloudFront soit déployée.

Une fois le statut changé en Deployed, nous pouvons tester l'url CloudFront et vérifier le nom de domaine dans le navigateur.

L'affichage dans le navigateur de bureau est comme indiqué ci-dessous. Ici, nous avons imprimé l'agent utilisateur à partir de l'événement de demande de visionneuse.

Ceci est l'affichage dans l'appareil mobile.

Ainsi, dans l'exemple ci-dessus, nous avons utilisé Lambda @ Edge pour modifier la réponse sur les ordinateurs de bureau et les appareils mobiles.

↰ Previous page Next page ↱