CloudFront

Le réseau de diffusion de contenu (CDN) mondial d'AWS pour accélérer la distribution de vos sites web et applications avec une latence minimale et des performances maximales.

Retour aux compétences Documentation officielle

Pour les non-initiés

Qu'est-ce que CloudFront ?

Imaginez que vous possédez un magasin populaire. Si vous n'avez qu'un seul emplacement à Paris, les clients de Marseille, Lyon ou Lille doivent parcourir une longue distance pour vous atteindre. Ce serait beaucoup plus pratique d'avoir des succursales dans chaque ville importante pour servir les clients localement.

AWS CloudFront fonctionne selon ce même principe, mais pour le contenu web. C'est un réseau de diffusion de contenu (CDN) qui crée des copies de votre site web ou application dans des points de présence (comme des succursales) situés partout dans le monde.

Comment fonctionne CloudFront ?

Vitesse maximale

Quand un visiteur accède à votre site, il est automatiquement dirigé vers le serveur le plus proche de lui, réduisant considérablement le temps de chargement.

Protection accrue

CloudFront offre une protection contre les attaques web courantes et peut absorber des pics de trafic importants sans ralentissement.

En résumé, CloudFront est comme un système de distribution mondial qui rapproche votre contenu web des utilisateurs, où qu'ils soient. Le résultat ? Des sites plus rapides, une meilleure expérience utilisateur et une capacité à gérer de nombreux visiteurs simultanés sans problème.

Pour les développeurs

Fonctionnement technique

CloudFront est le service CDN (Content Delivery Network) d'AWS qui permet de diffuser du contenu statique et dynamique, des vidéos en streaming, des applications interactives et des API avec une faible latence et un débit élevé, grâce à un réseau mondial de points de présence.

Architecture et composants

Points de présence (PoP)

Le réseau CloudFront comprend plus de 410 points de présence (225+ emplacements périphériques et 13+ caches périphériques régionaux) répartis dans 90+ villes à travers 47 pays. Ces serveurs mettent en cache le contenu au plus près des utilisateurs finaux.

Edge Locations : Les points de présence périphériques qui servent directement le contenu aux utilisateurs
Regional Edge Caches : Des emplacements de cache de plus grande taille qui servent de couche intermédiaire entre l'origine et les emplacements périphériques
Distribution géographique : Couverture mondiale optimisée pour minimiser la latence

Distributions

Une distribution CloudFront est la configuration de base qui définit d'où provient le contenu d'origine et comment il sera diffusé aux utilisateurs finaux.

Origin : La source du contenu (S3, EC2, ELB, Route 53, etc.)
Cache Behaviors : Règles définissant comment différents types de contenu sont mis en cache
TTL (Time To Live) : Durée pendant laquelle les objets restent en cache
Price Class : Contrôle quels emplacements périphériques sont utilisés (compromis coût/couverture)

Gestion du cache

CloudFront offre un contrôle précis sur la façon dont le contenu est mis en cache et servi aux utilisateurs.

Cache Policies : Contrôlent quels en-têtes, cookies et chaînes de requête influencent la mise en cache
Origin Request Policies : Déterminent quelles informations sont transmises à l'origine
Invalidation : Mécanisme pour forcer le rafraîchissement du contenu mis en cache
Cache Key : L'identifiant unique utilisé pour stocker et récupérer les objets en cache

Sécurité

CloudFront intègre diverses fonctionnalités de sécurité pour protéger votre contenu et vos utilisateurs.

HTTPS et TLS : Chiffrement en transit avec gestion des certificats SSL/TLS
AWS WAF : Protection contre les attaques web courantes (intégration native)
AWS Shield : Protection contre les attaques DDoS
Signed URLs / Cookies : Contrôle d'accès au contenu privé
Field-Level Encryption : Chiffrement des données sensibles dès la périphérie
OAI/OAC : Origin Access Identity/Control pour sécuriser les buckets S3

Fonctionnalités avancées

Lambda@Edge

Lambda@Edge permet d'exécuter du code JavaScript au niveau des emplacements périphériques CloudFront, au plus près des utilisateurs, pour personnaliser le contenu diffusé.

Quatre points d'intégration sont disponibles dans le flux de requête/réponse :

Viewer Request : Déclenché lorsque CloudFront reçoit une requête d'un utilisateur
Origin Request : Déclenché avant que CloudFront transmette la requête à l'origine
Origin Response : Déclenché lorsque CloudFront reçoit la réponse de l'origine
Viewer Response : Déclenché avant que CloudFront renvoie la réponse à l'utilisateur

CloudFront Functions

CloudFront Functions est une solution plus légère que Lambda@Edge, conçue pour des manipulations simples à grande échelle (plus rapide et moins coûteuse).

Idéal pour des transformations légères comme les redirections d'URL, la manipulation d'en-têtes ou la réécriture d'URL
Disponible uniquement aux points Viewer Request et Viewer Response
Exécution très rapide (sub-millisecond) et à grande échelle
Environnement d'exécution JavaScript limité mais optimisé

Origin Shield

Origin Shield est une couche de cache supplémentaire qui réduit la charge sur votre origine en consolidant les requêtes provenant de plusieurs emplacements périphériques.

Agit comme un cache intermédiaire entre les emplacements périphériques et votre origine
Réduit considérablement la charge sur l'origine, surtout en cas de pic de trafic
Améliore le taux de cache hit, réduisant les coûts et la latence
Particulièrement utile pour les origines situées à distance des utilisateurs ou à capacité limitée

Streaming et Realtime

CloudFront peut diffuser efficacement du contenu en streaming et des applications en temps réel.

Live Streaming : Support pour HLS, DASH, CMAF et autres protocoles
VOD (Video On Demand) : Distribution optimisée des fichiers vidéo
WebSockets : Support complet pour les connexions bidirectionnelles persistent
HTTP/3 with QUIC : Transport moderne pour des connexions plus rapides et plus fiables

Implémentation

Voyons comment configurer et utiliser CloudFront dans différents scénarios avec des exemples de code.

1. Configuration d'une distribution CloudFront

Voici comment créer une distribution CloudFront avec le SDK AWS :

Configuration d'une distribution CloudFront avec SDK AWS

// Configuration d'une distribution CloudFront avec AWS SDK v3
const { CloudFrontClient, CreateDistributionCommand } = require("@aws-sdk/client-cloudfront");

const client = new CloudFrontClient({ region: "us-east-1" }); // CloudFront est un service global, mais nous utilisons la région us-east-1

async function createDistribution() {
  try {
    const command = new CreateDistributionCommand({
      DistributionConfig: {
        CallerReference: `my-distribution-${Date.now()}`, // Identifiant unique
        DefaultRootObject: "index.html",
        Origins: {
          Quantity: 1,
          Items: [
            {
              Id: "my-s3-origin",
              DomainName: "my-website-bucket.s3.amazonaws.com",
              S3OriginConfig: {
                OriginAccessIdentity: "origin-access-identity/cloudfront/E1EXAMPLE" // OAI pour S3
              }
            }
          ]
        },
        DefaultCacheBehavior: {
          TargetOriginId: "my-s3-origin",
          ViewerProtocolPolicy: "redirect-to-https",
          AllowedMethods: {
            Quantity: 2,
            Items: ["GET", "HEAD"],
            CachedMethods: {
              Quantity: 2,
              Items: ["GET", "HEAD"]
            }
          },
          CachePolicyId: "658327ea-f89d-4fab-a63d-7e88639e58f6", // CachingOptimized policy
          OriginRequestPolicyId: "88a5eaf4-2fd4-4709-b370-b4c650ea3fcf", // CORS-S3Origin policy
          Compress: true
        },
        Comment: "My Website Distribution",
        Enabled: true,
        PriceClass: "PriceClass_100", // Utilisation des points de présence les moins coûteux
        ViewerCertificate: {
          CloudFrontDefaultCertificate: true
        }
      }
    });

    const response = await client.send(command);
    console.log("Distribution CloudFront créée avec succès:", response);
    return response;
  } catch (error) {
    console.error("Erreur lors de la création de la distribution CloudFront:", error);
    throw error;
  }
}

2. Déploiement d'un site statique S3 + CloudFront avec AWS CDK

Exemple complet d'architecture pour un site web statique sécurisé avec S3, CloudFront, certificat SSL et Route 53 :

Site statique S3 avec CloudFront via AWS CDK

// Configuration CDK pour un site web S3 avec CloudFront
import * as cdk from 'aws-cdk-lib';
import * as s3 from 'aws-cdk-lib/aws-s3';
import * as cloudfront from 'aws-cdk-lib/aws-cloudfront';
import * as origins from 'aws-cdk-lib/aws-cloudfront-origins';
import * as s3deploy from 'aws-cdk-lib/aws-s3-deployment';
import * as acm from 'aws-cdk-lib/aws-certificatemanager';
import * as route53 from 'aws-cdk-lib/aws-route53';
import * as targets from 'aws-cdk-lib/aws-route53-targets';
import { Construct } from 'constructs';

export class StaticWebsiteStack extends cdk.Stack {
  constructor(scope: Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    // Définir le nom de domaine
    const domainName = 'example.com';
    const siteDomain = `www.${domainName}`;

    // Bucket S3 pour l'hébergement
    const siteBucket = new s3.Bucket(this, 'SiteBucket', {
      bucketName: siteDomain,
      websiteIndexDocument: 'index.html',
      websiteErrorDocument: 'error.html',
      publicReadAccess: false,
      blockPublicAccess: s3.BlockPublicAccess.BLOCK_ALL,
      removalPolicy: cdk.RemovalPolicy.DESTROY, // Uniquement pour les environnements de développement
      autoDeleteObjects: true, // Uniquement pour les environnements de développement
    });

    // Récupérer la zone hébergée Route 53
    const zone = route53.HostedZone.fromLookup(this, 'Zone', {
      domainName: domainName,
    });

    // Certificat TLS pour HTTPS
    const certificate = new acm.DnsValidatedCertificate(this, 'SiteCertificate', {
      domainName: siteDomain,
      hostedZone: zone,
      region: 'us-east-1', // Obligatoire pour les certificats utilisés avec CloudFront
    });

    // Création d'une Origin Access Identity pour CloudFront
    const originAccessIdentity = new cloudfront.OriginAccessIdentity(this, 'OriginAccessIdentity', {
      comment: `OAI pour ${siteDomain}`,
    });
    
    // Donner à l'OAI l'accès au bucket
    siteBucket.grantRead(originAccessIdentity);

    // Distribution CloudFront pour servir le site
    const distribution = new cloudfront.Distribution(this, 'SiteDistribution', {
      certificate: certificate,
      defaultRootObject: 'index.html',
      domainNames: [siteDomain],
      minimumProtocolVersion: cloudfront.SecurityPolicyProtocol.TLS_V1_2_2021,
      defaultBehavior: {
        origin: new origins.S3Origin(siteBucket, {
          originAccessIdentity: originAccessIdentity,
        }),
        compress: true,
        allowedMethods: cloudfront.AllowedMethods.ALLOW_GET_HEAD_OPTIONS,
        viewerProtocolPolicy: cloudfront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
        cachePolicy: cloudfront.CachePolicy.CACHING_OPTIMIZED,
      },
      errorResponses: [
        {
          httpStatus: 404,
          responseHttpStatus: 200,
          responsePagePath: '/index.html', // Pour les SPAs comme React, Vue, etc.
          ttl: cdk.Duration.minutes(30),
        },
      ],
      priceClass: cloudfront.PriceClass.PRICE_CLASS_100, // Utiliser uniquement les emplacements les moins chers
    });

    // Route53 alias record pour le domaine
    new route53.ARecord(this, 'SiteAliasRecord', {
      recordName: siteDomain,
      target: route53.RecordTarget.fromAlias(new targets.CloudFrontTarget(distribution)),
      zone,
    });

    // Déploiement des fichiers du site dans le bucket
    new s3deploy.BucketDeployment(this, 'DeployWebsite', {
      sources: [s3deploy.Source.asset('./website-dist')],
      destinationBucket: siteBucket,
      distribution,
      distributionPaths: ['/*'],
    });

    // Exporter les valeurs importantes
    new cdk.CfnOutput(this, 'DistributionDomainName', {
      value: distribution.distributionDomainName,
    });
    
    new cdk.CfnOutput(this, 'SiteBucketName', {
      value: siteBucket.bucketName,
    });
  }
}

3. Lambda@Edge pour la personnalisation de contenu

Exemple de fonction Lambda@Edge pour ajouter des en-têtes de sécurité à toutes les réponses :

Fonction Lambda@Edge pour les en-têtes de sécurité

// Fonction Lambda@Edge pour personnaliser le contenu HTTP à la périphérie
// Exemple : ajout d'en-têtes de sécurité à toutes les réponses
exports.handler = async (event) => {
  // Récupérer la réponse CloudFront
  const response = event.Records[0].cf.response;
  const headers = response.headers;

  // Ajouter des en-têtes de sécurité
  headers['strict-transport-security'] = [{
    key: 'Strict-Transport-Security',
    value: 'max-age=31536000; includeSubdomains; preload'
  }];
  
  headers['content-security-policy'] = [{
    key: 'Content-Security-Policy',
    value: "default-src 'self'; img-src 'self' data: https:; script-src 'self' https://cdn.example.com; style-src 'self' 'unsafe-inline';"
  }];
  
  headers['x-content-type-options'] = [{
    key: 'X-Content-Type-Options',
    value: 'nosniff'
  }];
  
  headers['x-frame-options'] = [{
    key: 'X-Frame-Options',
    value: 'DENY'
  }];
  
  headers['x-xss-protection'] = [{
    key: 'X-XSS-Protection',
    value: '1; mode=block'
  }];
  
  headers['referrer-policy'] = [{
    key: 'Referrer-Policy',
    value: 'strict-origin-when-cross-origin'
  }];
  
  // Ajouter un en-tête personnalisé pour indiquer que la réponse a été modifiée
  headers['x-powered-by'] = [{
    key: 'X-Powered-By',
    value: 'AWS Lambda@Edge'
  }];
  
  // Retourner la réponse modifiée
  return response;
};

4. CloudFront Function pour la redirection d'URL

Fonction légère pour gérer les redirections et les applications SPA :

CloudFront Function pour la redirection d'URL

// CloudFront Function pour la redirection d'URL
function handler(event) {
  // Récupérer la requête
  var request = event.request;
  var uri = request.uri;
  
  // Rediriger les URLs sans slash final vers la version avec slash
  // Ex: /products -> /products/
  if (uri.endsWith('/') === false && uri.includes('.') === false) {
    var response = {
      statusCode: 301,
      statusDescription: 'Moved Permanently',
      headers: {
        'location': {
          value: uri + '/'
        }
      }
    };
    return response;
  }
  
  // Normaliser les URLs pour les applications Single Page (SPA)
  // Si le chemin ne contient pas d'extension et n'est pas la racine, 
  // on sert index.html
  if (uri !== '/' && !uri.includes('.')) {
    // Vérifier si c'est une API ou un chemin spécial à exclure
    if (!uri.startsWith('/api/') && !uri.startsWith('/assets/')) {
      request.uri = '/index.html';
    }
  }
  
  // Retourner la requête modifiée
  return request;
}

Avantages techniques

Performance globale : Réduction significative de la latence pour les utilisateurs du monde entier
Évolutivité automatique : Gestion transparente des pics de trafic sans provisionnement manuel
Intégration AWS : Connexion native avec S3, EC2, ELB, API Gateway et d'autres services AWS
Économies de coûts : Réduction de la charge sur les origines et optimisation du transfert de données
Diversité de contenus : Support pour le contenu statique, dynamique, streaming et API
Personnalisation : Lambda@Edge et CloudFront Functions pour adapter le contenu aux besoins spécifiques

Applications concrètes

Cas d'usage

Distribution de sites web statiques

Idéal pour les sites HTML/CSS/JavaScript hébergés sur S3. CloudFront assure une distribution rapide des assets, supporte HTTPS, et améliore le référencement grâce à des temps de chargement réduits.

Streaming vidéo

Diffusion efficace de contenu vidéo en direct ou à la demande. CloudFront optimise la livraison avec une mise en mémoire cache intelligente, des protocoles adaptés aux appareils, et un débit constant.

API et applications dynamiques

Accélération d'API REST ou GraphQL avec mise en cache des réponses. Peut être couplé à API Gateway pour créer des points d'accès rapides partout dans le monde tout en réduisant la charge sur les backends.

Sécurité et protection

Protection des applications contre les attaques par force brute, injection SQL, XSS et CSRF grâce à l'intégration avec AWS WAF et Shield. Offre également une couche de défense contre les attaques DDoS.

Applications pratiques par secteur

E-commerce

Distribution rapide des catalogues produits, des images haute résolution et des assets JavaScript pour créer des expériences d'achat fluides. Capable de gérer les pics de trafic saisonniers sans surinvestissement en infrastructure.

Médias et divertissement

Livraison de contenu vidéo, audio et images à grande échelle. Parfait pour les diffuseurs, plateformes VOD et services de streaming musical qui nécessitent des performances constantes même lors d'événements très populaires.

SaaS et applications web

Accélération des applications SaaS mondiales en distribuant les assets statiques (JS, CSS, images) via CloudFront tout en gardant les données dynamiques sur les serveurs d'origine. Réduit les temps de chargement et améliore l'expérience utilisateur.

Jeux et applications mobiles

Distribution des mises à jour, assets et contenu téléchargeable pour les jeux et applications. Permet une distribution rapide des fichiers volumineux et réduit les temps d'attente pour les utilisateurs du monde entier.

Ressources complémentaires

Toutes les compétences

Technologies associées

AWS S3

Route 53

AWS Lambda

API Gateway

AWS EC2

Explorer toutes mes compétences