Objectif
Ce laboratoire vous guidera dans la configuration d’une fonction AWS Lambda@Edge pour modifier les réponses HTTP servies par Amazon CloudFront. Nous allons :
- Créer un bucket S3 statique (qui servira de backend à CloudFront).
- Déployer une distribution CloudFront associée au bucket S3.
- Créer une fonction AWS Lambda pour ajouter un header HTTP personnalisé.
- Déployer cette fonction sur Lambda@Edge.
- Tester la réponse HTTP pour vérifier que la modification a bien été appliquée.
Prérequis
✅ Un compte AWS actif.
✅ Des permissions IAM pour CloudFront, Lambda, IAM et S3.
Étape 1 : Création d’un bucket S3 pour le contenu statique
- Accédez à la console AWS > S3.
- Cliquez sur Créer un bucket.
- Nom du bucket : my-cloudfront-bucket-lambda-edge.
- Région : Sélectionnez la région la plus proche (ex : eu-west-3).
- Désactivez le blocage d’accès public (important pour que CloudFront puisse y accéder) :
- Cochez “Supprimer la case à cocher Bloquer tout l’accès public”.
- Confirmez l’avertissement et validez.
- Cliquez sur Créer un bucket.
1.1 Ajout d’un fichier de test dans S3
- Accédez à votre bucket > Onglet “Objets” > Téléverser un fichier HTML (ex: index.html).
Ouvrez un éditeur de texte et créez un fichier index.html avec ce contenu :
<html>
<head><title>Test Lambda@Edge</title></head>
<body data-rsssl=1><h1>Bienvenue sur mon site CloudFront</h1></body>
</html>
- Téléversez ce fichier dans votre bucket S3.
- Rendez le fichier public :
- Sélectionnez index.html, cliquez sur Permissions > Modifier l’accès public.
- Ajoutez une règle de bucket policy (dans l’onglet “Permissions”) :
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::my-cloudfront-bucket-lambda-edge/*"
}
]
}
- Copiez l’URL publique du fichier pour tester l’accès via le navigateur.
Étape 2 : Création de la distribution CloudFront
- Accédez à la console AWS > CloudFront.
- Cliquez sur Créer une distribution.
2.1 Configuration de la distribution CloudFront
- Origine
- Nom de l’origine : Sélectionnez my-cloudfront-bucket-lambda-edge.
- Protocole : HTTPS uniquement.
- Comportement de cache :
- Méthodes autorisées : GET, HEAD.
- Politique de cache : Sélectionnez Managed-CachingOptimized.
- Paramètres de distribution
- Prix et région : Sélectionnez “Toutes les régions”.
- Compression : Activez Gzip et Brotli.
- Journalisation : Désactivée (optionnel).
- Distribution Status : Active.
- Cliquez sur “Créer la distribution”.
Une fois la distribution créée, copiez le domaine CloudFront (dxxxxxxx.cloudfront.net).
Testez CloudFront dans le navigateur :
- Accédez à https://dxxxxxxx.cloudfront.net/index.html.
- Vous devriez voir la page HTML s’afficher.
Étape 3 : Création d’une fonction Lambda pour Lambda@Edge
- Accédez à la console AWS > Lambda > Créer une fonction.
- Nom de la fonction : AddCustomHeaderLambda.
- Runtime : Node.js 18.x.
- Type de déploiement : Créer à partir de zéro.
- Permissions :
- Créez un rôle IAM avec la politique AWSLambdaEdgePolicy et AWSLambdaBasicExecutionRole.
Cliquez sur Créer la fonction.
3.1 Ajoutez le code suivant à la fonction Lambda :
exports.handler = async (event) => {
const response = event.Records[0].cf.response;
// Ajout du header personnalisé
response.headers['x-custom-header'] = [{ key: 'X-Custom-Header', value: 'Hello from Lambda@Edge!' }];
return response;
};
Cliquez sur Déployer.
Étape 4 : Déploiement de la fonction sur Lambda@Edge
- Allez dans la console Lambda > Sélectionnez votre fonction AddCustomHeaderLambda.
- Cliquez sur Actions > Deploy to Lambda@Edge.
- Sélectionnez us-east-1 (obligatoire pour Lambda@Edge).
- Sélectionnez votre CloudFront Distribution (dxxxxxxx.cloudfront.net).
- Event Trigger : Origin Response.
- Cliquez sur “Deploy”.
🚀 AWS va maintenant répliquer votre fonction Lambda@Edge dans plusieurs régions AWS.
Étape 5 : Test de la configuration
- Attendez quelques minutes que la distribution CloudFront se mette à jour.
Ouvrez un terminal et exécutez la commande suivante (remplacez dxxxxxxxxxxx.cloudfront.net par votre domaine CloudFront) :
curl -I https://dxxxxxxxxxxx.cloudfront.net/index.html
Résultat attendu :
HTTP/2 200
content-type: text/html
x-custom-header: Hello from Lambda@Edge!
Si le header X-Custom-Header est présent, cela signifie que Lambda@Edge fonctionne bien ! 🎉
Conclusion
✅ Lambda@Edge permet d’exécuter du code au plus proche de l’utilisateur grâce à CloudFront.
✅ Idéal pour ajouter des headers, effectuer des redirections, ou du filtrage basé sur l’utilisateur.
✅ Solution Serverless, distribuée mondialement, optimisée pour les performances ! 🚀
