Illustration Cdn AWS
Illustration Cdn AWS

Publié le 19 novembre 2024. Mise à jour le 05 décembre 2024

Installer un CDN d’Images avec S3 et CloudFront

Aujourd'hui, je vais vous montrer comment je met en place un CDN pour otpimiser les images sur AWS en utilisant Amazon S3 et Amazon CloudFront. Cette solution est idéale pour optimiser la vitesse de chargement de vos sites web en distribuant les images via un réseau de serveurs répartis dans le monde entier.

Étape 1 : Créer un bucket S3 pour vos images

  • Connexion à AWS : Rendez-vous sur votre console AWS.
  • Création du bucket S3 :
    • Allez dans la section S3 et cliquez sur Create Bucket.
    • Donnez un nom unique à votre bucket, comme images-mon-site.
    • Choisissez la région AWS la plus proche de vos utilisateurs principaux.
    • Configurez les autorisations :
      • Laissez Block all public access activé pour plus de sécurité. Vous pouvez le décocher temporairement pour tester le CDN, mais en production, privilégiez l’accès contrôlé via CloudFront.
    • Cliquez sur Create Bucket pour valider.
  • Téléchargez vos images dans le bucket :
    • Une fois le bucket créé, cliquez dessus.
    • Rendez-vous dans l'onglet Objects et cliquez sur Upload pour importer vos fichiers.

Étape 2 : Installer le projet aws-samples/image-optimization

  • Accéder au dépôt GitHub :
    Le projet image-optimization est disponible sur GitHub AWS Samples. Il fournit un modèle pour déployer automatiquement une solution d’optimisation d’images dans votre infrastructure AWS.
  • Cloner le dépôt :
    Sur votre machine AWS, utilisez la commande suivante pour cloner le projet :

    git clone https://github.com/aws-samples/image-optimization.git

     

    Aws cloudfront image optimisations

  • Configurer les paramètres AWS :
    Avant de continuer, assurez-vous d’avoir configuré AWS CLI sur votre machine avec un profil utilisateur ayant les permissions nécessaires :

    aws configure
  • Déployer le projet avec AWS SAM :
    • Rendez-vous dans le dossier cloné :

      cd image-optimization
      npm install
      cdk bootstrap
      npm run build
      cdk deploy
      
  • Configurer CloudFront :
    Le projet inclut également une distribution CloudFront pour servir les images optimisées. Une fois le déploiement terminé, vous obtiendrez une URL CloudFront comme dXXXXXX.cloudfront.net.

Étape 3 : Configurer S3 pour un sous-domaine optimisé SEO

  • Activer HTTPS :
    • Configurez un certificat SSL via AWS Certificate Manager (ACM).
    • Assurez-vous que votre sous-domaine utilise le HTTPS pour des raisons de sécurité et de SEO.
  • Créer un sous-domaine dans votre gestionnaire DNS :
    • Accédez au gestionnaire DNS de votre domaine (chez OVH, Google Domains, etc.).
    • Ajoutez un enregistrement CNAME pointant votre sous-domaine (ex. cdn.votredomaine.com) vers le certificat fournis par AWS.

      Dns CNAME certificats SSL Amazon Web Service

       

  • Configurer CloudFront pour le sous-domaine :
    • Une fois le certificat émis par AWS, vous pouvez entrer votre nouveaux certificat.
    • Dans CloudFront, ajoutez votre sous-domaine dans Alternate Domain Names (CNAMEs).
    • Associez-y votre certificat SSL pour sécuriser le trafic.

      Certificats SSL Https avec Amazon Web Service

Étape 4 : Test rapide pour automatiser l’optimisation des images avec le sous-domaine

  • Accédez aux images via votre sous-domaine CloudFront : Assurez-vous que votre sous-domaine est correctement configuré (par exemple media.votredomaine.com) pour servir les images. Vous pouvez accéder à vos images à travers une URL du type :
    https://media.votredomaine.com/images/image.webp.
    Testez l’affichage de l'image sur votre site ou directement dans votre navigateur.
    https://media.votredomaine.com/images/image.webp?format=jpeg.
  • Testez le changement de format d’image :

    Vous pouvez tester le changement dynamique du format de l’image en ajoutant un paramètre à l’URL, comme par exemple :

    https://media.votredomaine.com/images/image.webp?format=jpeg

    Ce paramètre peut déclencher une conversion automatique de l’image en JPEG (si cette option est configurée pour être traitée par CloudFront ou un service d'optimisation d’images). Vérifiez si l’image est correctement convertie au format JPEG lors du téléchargement.

    Test image Cdn AWS cloudfront et router S3

     

  • Testez avec des paramètres de taille d’image dynamique : Pour tester l’ajustement de la taille des images en fonction de la résolution de l'appareil, ajoutez des paramètres de width (largeur) ou height (hauteur) à l'URL. Par exemple, vous pouvez tester avec une largeur de 200px :
  • https://media.votredomaine.com/image.webp?width=200

    Ou spécifiez la hauteur :

    https://media.votredomaine.com/image.webp?height=200
  • Vérification du certificat SSL : Assurez-vous que votre sous-domaine utilise HTTPS avec un certificat SSL valide, en configurant AWS Certificate Manager (ACM). Cela garantit que le trafic est sécurisé et que vos utilisateurs bénéficient d'une expérience de navigation sécurisée, ce qui est également crucial pour le référencement SEO.

Ajouter un fichier robots.txt aux CDN AWS pour améliorer le SEO

Lors de la mise en place d'un CDN pour l'optimisation des images avec Amazon S3 et Amazon CloudFront, il est essentiel de s'assurer que vos ressources sont correctement indexées (ou non indexées) par les moteurs de recherche. Pour ce faire, il est possible d'ajouter un fichier robots.txt à vos buckets S3 utilisés pour le CDN. Voici comment procéder :

  1. Ajouter un dossier dans le bucket
    • Accédez au bucket S3 que vous avez configuré pour l'optimisation des images.
    • Créez un nouveau dossier dans le bucket pour contenir votre fichier robots.txt. Nommez-le robots.txt.
  2. Créer et ajouter le fichier original

    • Créez un fichier original localement avec le contenu souhaité. Par exemple :
    User-agent: *
    Disallow: /
  3. Tester le fichier robots.txt dans votre navigateur
  • Utilisez l'URL de CloudFront associée pour accéder à votre fichier. Par exemple :

    https://picture.theneaumaxime.fr/robots.txt
  • Vérifiez que le fichier est accessible et contient le contenu attendu :
robost.txt CDN AWS Image Optimizer

 

 

 

 

Résultat : Des images rapides et efficaces 🎉

L'optimisation des images est un facteur clé pour améliorer la vitesse de chargement de vos sites web. L'utilisation d'AWS CloudFront pour distribuer vos images via un CDN, combinée à Amazon S3 pour le stockage, permet de garantir une performance maximale sur l'ensemble de vos pages. Dans cet article, nous avons exploré la configuration d'un CDN d'images avec S3 et CloudFront, mais il existe aussi d'autres approches intéressantes pour optimiser vos images à l'échelle.

Si vous cherchez à gérer plusieurs buckets S3 et à automatiser l'optimisation des images en temps réel, je vous recommande de lire également mon article sur Optimiser les Images dans Plusieurs Buckets S3 avec le projet aws-samples/image-optimization. Ce guide vous montrera comment configurer et déployer plusieurs buckets avec AWS CDK tout en optimisant vos images dans chaque bucket, ce qui peut être particulièrement utile pour des sites ayant des catégories d'images distinctes.

En combinant ces deux solutions, vous pourrez maximiser les performances et l'efficacité du traitement des images sur votre site.

 

 

 

 

 

Postez un commentaire !