Pourquoi un CDN

Un CDN (Content Delivery Network) distribue votre contenu depuis des serveurs proches de vos visiteurs. Résultat : temps de chargement réduit, meilleure expérience utilisateur et meilleur SEO.

Lueur Externe déploie CloudFront pour tous ses projets web afin de garantir des performances optimales.

Configuration de base

Distribution pour un site statique (S3)

{
  "Origins": [{
    "DomainName": "mon-site.s3.eu-west-3.amazonaws.com",
    "S3OriginConfig": {
      "OriginAccessIdentity": "origin-access-identity/cloudfront/EXAMPLE"
    }
  }],
  "DefaultCacheBehavior": {
    "ViewerProtocolPolicy": "redirect-to-https",
    "CachePolicyId": "658327ea-f89d-4fab-a63d-7e88639e58f6",
    "Compress": true
  },
  "DefaultRootObject": "index.html",
  "PriceClass": "PriceClass_100"
}

Distribution pour un site dynamique

{
  "Origins": [{
    "DomainName": "api.example.com",
    "CustomOriginConfig": {
      "HTTPSPort": 443,
      "OriginProtocolPolicy": "https-only"
    }
  }],
  "DefaultCacheBehavior": {
    "ViewerProtocolPolicy": "redirect-to-https",
    "AllowedMethods": ["GET", "HEAD", "OPTIONS", "PUT", "POST", "PATCH", "DELETE"],
    "CachePolicyId": "4135ea2d-6df8-44a3-9df3-4b5a84be39ad",
    "OriginRequestPolicyId": "216adef6-5c7f-47e4-b989-5492eafa07d3"
  }
}

Politiques de cache

Cache optimisé pour les assets statiques

Cache-Control: public, max-age=31536000, immutable

Pour les fichiers avec hash dans le nom (style.a1b2c3.css), utilisez un TTL long (1 an). CloudFront respecte les headers Cache-Control de l’origine.

Cache pour le HTML

Cache-Control: public, max-age=3600, s-maxage=86400

Le HTML change plus souvent : TTL court côté navigateur, plus long côté CDN avec invalidation à la mise à jour.

Fonctions edge

CloudFront Functions (léger, rapide)

// Redirection www vers non-www
function handler(event) {
  var request = event.request;
  var host = request.headers.host.value;

  if (host.startsWith('www.')) {
    return {
      statusCode: 301,
      statusDescription: 'Moved Permanently',
      headers: {
        location: { value: `https://${host.slice(4)}${request.uri}` }
      }
    };
  }

  return request;
}

Lambda@Edge (plus puissant)

// A/B testing au niveau du CDN
exports.handler = async (event) => {
  const request = event.Records[0].cf.request;
  const cookie = request.headers.cookie?.[0]?.value || '';

  if (!cookie.includes('ab-variant=')) {
    const variant = Math.random() < 0.5 ? 'A' : 'B';
    request.headers['x-ab-variant'] = [{ value: variant }];
  }

  return request;
};

Sécurité

  • SSL/TLS gratuit avec ACM (AWS Certificate Manager)
  • Protection DDoS avec AWS Shield (inclus)
  • WAF (Web Application Firewall) pour filtrer les requêtes
  • Geo-restriction pour bloquer certains pays
  • Signed URLs pour le contenu privé

Monitoring

  • CloudWatch metrics : requêtes, erreurs, latence
  • Access logs dans S3 pour l’analyse détaillée
  • Real-time logs avec Kinesis Data Streams
  • Alertes sur les taux d’erreur

Conclusion

CloudFront est un composant essentiel d’une architecture web performante sur AWS. Lueur Externe configure et optimise CloudFront pour garantir des temps de chargement minimaux à l’échelle mondiale.