Introduction

Avez-vous déjà constaté que votre site web ralentit à cause de toutes les images et ressources qu'il doit charger ? Ou peut-être avez-vous eu du mal à gérer ces fichiers à mesure que votre site grandit. Voici le truc : stocker et servir des images directement depuis votre serveur web peut sembler pratique au début, mais cela peut rapidement devenir un goulet d'étranglement.

C'est là qu'AWS entre en jeu. Avec des services comme S3 pour le stockage et CloudFront en tant que puissant CDN, vous pouvez facilement gérer, optimiser et livrer des images et des ressources à vos utilisateurs à la vitesse de l'éclair, peu importe où ils se trouvent dans le monde.

Dans ce guide, je vais vous expliquer pourquoi il est mauvais de garder des images sur le serveur de votre application web, pourquoi séparer les services est un changement de jeu, et comment les outils AWS peuvent rendre votre vie beaucoup plus facile. Plongeons-y !

Pourquoi stocker des images sur votre serveur web est une mauvaise idée

Charge accrue sur le serveur

Lorsque votre serveur web est responsable à la fois de l'exécution de votre application et du service des images, il peut rapidement être submergé. Chaque demande d'image ajoute du travail supplémentaire, ralentissant tout. Si votre site reçoit beaucoup de trafic, le serveur peut avoir du mal à suivre, entraînant des retards ou même des plantages. Imaginez essayer de porter toutes vos courses et de courir en même temps — ce n'est tout simplement pas efficace !

Scalabilité limitée

À mesure que votre site grandit, le nombre d'images et d'utilisateurs augmentera également. Un seul serveur web ne peut gérer qu'une certaine quantité avant que vous ne rencontriez un mur. L'augmentation de la capacité signifie souvent dépenser plus d'argent pour des serveurs plus gros ou faire face à la complexité de la migration de tout. Avec le stockage cloud comme AWS S3, vous n'avez pas à vous soucier de manquer d'espace — cela grandit avec vous, sans stress.

Risque de goulets d'étranglement de performance

De gros fichiers image peuvent ralentir votre site à un point tel qu'il devient presque inutilisable, surtout si vous les servez depuis le même serveur qui gère la fonctionnalité de votre application. Quand une partie de votre site est lente, cela peut ralentir tout le reste, laissant les utilisateurs frustrés par des temps de chargement longs. Pensez à un embouteillage sur une route à une voie — tout est bloqué.

Préoccupations de sécurité

Servir des images depuis votre serveur web peut vous exposer à des risques inutiles. Les hackers pourraient exploiter des vulnérabilités pour accéder à des informations sensibles, ou d'autres sites pourraient voler votre bande passante en hotlinkant vos images. Sans protections adéquates, vous pourriez accidentellement révéler des chemins de fichiers du serveur, ce qui revient à laisser votre porte d'entrée grande ouverte.

Pourquoi devrions-nous utiliser un CDN ?

Si vous avez déjà été agacé par un site web qui charge lentement, vous comprendrez pourquoi un CDN (Content Delivery Network) est un changement de jeu. Un CDN, c'est comme avoir un réseau de mini-entrepôts répartis à travers le monde, chacun stockant des copies des images et des ressources de votre site. Au lieu que chaque utilisateur doive attendre que le contenu parcoure tout le chemin depuis votre serveur principal, un CDN le livre depuis l'entrepôt le plus proche, rendant tout plus rapide et fluide.

Le CDN accélère la livraison de contenu en distribuant des données aux serveurs d
Le CDN accélère la livraison de contenu en distribuant des données aux serveurs d'edge mondiaux.

Voici pourquoi utiliser un CDN pour la livraison d'images et de ressources est une évidence :

Temps de chargement plus rapides pour les utilisateurs partout

Disons que votre serveur principal est à New York, mais que quelqu'un à Tokyo visite votre site. Sans un CDN, leur demande doit parcourir la moitié du monde, ce qui prend du temps. Avec un CDN, un serveur près de Tokyo livre le contenu, réduisant le temps de trajet et permettant à votre site de se charger en un clin d'œil. Des temps de chargement plus rapides signifient des utilisateurs plus heureux, et des utilisateurs plus heureux restent plus longtemps.

Latence réduite et expérience utilisateur améliorée

La latence est ce retard ennuyeux entre le moment où un utilisateur clique sur quelque chose et le moment où le contenu apparaît réellement. Plus un utilisateur est éloigné de votre serveur, plus la latence est élevée. Un CDN résout ce problème en rapprochant vos images et ressources de l'utilisateur, réduisant les délais et rendant tout instantané. Que quelqu'un parcoure votre site depuis son canapé à Londres ou dans un café à Sydney, il bénéficiera de la même expérience fluide.

Décharger le trafic de votre serveur principal

Pensez à votre serveur web comme à un chef occupé dans un restaurant. Sans un CDN, le chef doit tout gérer : cuisiner, servir et même livrer de la nourriture à des clients éloignés. Avec un CDN, le chef (votre serveur) peut se concentrer sur la cuisine (exécuter votre application), tandis que le CDN gère la livraison (servir des images et des ressources). Cela décharge une tonne de trafic de votre serveur principal, évitant les surcharges et maintenant votre site en fonctionnement fluide même lors de pics de trafic.

Qu'est-ce que S3 et CloudFront ?

S3 (Simple Storage Service)

S3 est la solution de stockage cloud sécurisée, évolutive et hautement fiable d'Amazon. Elle est conçue pour stocker tout type de données, y compris des images, des vidéos et d'autres ressources, ce qui en fait un choix idéal pour les sites web et les applications. Que vous hébergiez un petit blog personnel ou gériez une grande plateforme de commerce électronique, S3 peut gérer vos besoins de stockage sans effort. De plus, elle offre des niveaux de stockage flexibles, vous ne payez donc que pour ce que vous utilisez.

CloudFront

CloudFront est le service de réseau de distribution de contenu (CDN) d'Amazon qui garantit une livraison rapide et sécurisée du contenu. Il fonctionne en mettant en cache vos images et ressources sur des serveurs d'edge situés dans le monde entier, afin que les utilisateurs puissent y accéder rapidement depuis le serveur le plus proche d'eux. Lorsqu'il est combiné avec S3, CloudFront optimise le processus de livraison en récupérant sans effort les ressources stockées et en les servant avec une latence minimale. Ensemble, S3 et CloudFront offrent une solution puissante, efficace et évolutive pour gérer et livrer le contenu des sites web.

Coût de l'utilisation de S3 et CloudFront

L'un des meilleurs aspects d'AWS est que vous ne payez que pour ce que vous utilisez. Voici un aperçu rapide :

  • Coûts S3 :
    • Coûts de stockage : Vous payez par Go de données stockées, avec des tarifs différents selon le niveau de stockage (par exemple, Standard, Accès Infrequent, Glacier).
    • Coûts de requête : Des frais s'appliquent pour les requêtes PUT, GET et autres effectuées sur votre bucket.
    • Transfert de données : Le transfert de données de S3 vers Internet entraîne des frais supplémentaires.
  • Coûts CloudFront:
    • Transfert de données : Vous payez pour la quantité de données livrées aux utilisateurs via les emplacements d'edge.
    • Requêtes : Des frais s'appliquent pour les requêtes HTTP/HTTPS effectuées sur CloudFront.
    • Tarification régionale : Les coûts peuvent varier en fonction de l'emplacement de vos utilisateurs.

Vous pouvez consulter les tarifs d'Amazon S3 et les tarifs d'Amazon CloudFront pour des informations détaillées.

Exemple : Coût de l'utilisation de S3 et CloudFront

Disons que vous gérez un petit site de commerce électronique et que vous devez stocker et servir des images de produits. Voici un aperçu simplifié des coûts :

Détails du scénario

  • Stockage : 100 Go d'images stockées dans S3 (Niveau Standard).
  • Requêtes : 50 000 requêtes GET et 10 000 requêtes PUT vers S3 par mois.
  • Transfert de données : 100 Go de données transférées vers CloudFront.
  • Livraison de données CloudFront : 100 Go de données livrées aux utilisateurs finaux via le CDN.

Coûts S3

  1. Coûts de stockage :
  • 100 Go dans le stockage standard S3 = $2.30 par mois (environ $0.023 par Go).
  1. Coûts de requête :
  • 50 000 requêtes GET = $0.04 (environ $0.0004 par 1 000 requêtes).
  • 10 000 requêtes PUT = $0.05 (environ $0.005 par 1 000 requêtes).
  1. Coûts de transfert de données (vers CloudFront) :
  • 100 Go = $0 (le transfert de données de S3 vers CloudFront est gratuit).

Coût total de S3 : $2.39/mois

Coûts CloudFront

  1. Coûts de transfert de données (de CloudFront vers les utilisateurs) :
  • 100 Go livrés aux utilisateurs finaux = $8.50 (environ $0.085 par Go pour les 10 premiers To).
  1. Coûts de requête :
  • 50 000 requêtes HTTP/HTTPS = $0.10 (environ $0.002 par 1 000 requêtes).

Coût total de CloudFront : $8.60/mois

Total général

Coût mensuel total : $2.39 + $8.60 = $10.99

Configurer AWS S3 et CloudFront pour l'hébergement d'images et de ressources

Ce guide vous expliquera comment configurer AWS S3 et CloudFront pour servir des images efficacement avec un sous-domaine personnalisé.

Cette configuration garantit que :

  • Les requêtes de vos domaines autorisés (par exemple, votre site.com) peuvent accéder aux ressources.
  • Les requêtes sans en-tête Referer (par exemple, accès direct aux URL S3) sont bloquées.
  • Les requêtes provenant de sites non autorisés (hotlinking) sont refusées.
  1. Créer un certificat SSL dans AWS Certificate Manager (ACM)

Puisque CloudFront nécessite un certificat SSL valide pour utiliser HTTPS avec un domaine personnalisé, la première étape consiste à générer un certificat SSL.

  • Allez dans AWS Certificate Manager (ACM).
  • Cliquez sur Demander un certificat.
  • Choisissez Demander un certificat public.
  • Entrez votre sous-domaine (images.votresite.com), et ajoutez éventuellement *.votresite.com si vous souhaitez un certificat wildcard.
  • Sélectionnez Validation DNS (recommandé).
  • Après soumission, AWS fournira des enregistrements CNAME que vous devez ajouter chez votre fournisseur DNS (par exemple, Route 53, Cloudflare, GoDaddy).
  • Une fois l'enregistrement DNS validé, le certificat sera émis.
AWS Certificate Manager : Certificat SSL émis avec succès pour les sous-domaines
AWS Certificate Manager : Certificat SSL émis avec succès pour les sous-domaines
  1. Créer un sous-domaine pour servir des images

Maintenant que le certificat SSL est prêt, configurez un sous-domaine (images.votresite.com) pour servir vos images.

  • Allez chez votre fournisseur DNS (Route 53, Cloudflare, ou un autre).
  • Créez un enregistrement CNAME :
    • Nom de l'enregistrement : images
    • Type : CNAME
    • Valeur : <votre-id-de-distribution-cloudfront>.cloudfront.net
  1. Créer une distribution CloudFront

Maintenant, configurez CloudFront pour servir des images depuis S3.

  • Allez dans AWS CloudFront → Créer une distribution.
  • Sous Origine, configurez :
    • Nom de domaine d'origine : Sélectionnez votre bucket S3.
    • Accès d'origine : Choisissez Identités d'accès héritées → Créer une identité d'accès d'origine (OAI).
    • Politique de bucket : Sélectionnez Je mettrai à jour la politique du bucket manuellement.
  • Configurer les comportements :
    • Compresser les objets automatiquement : ✅ Oui
    • Politique de protocole de visualiseur : Rediriger HTTP vers HTTPS
    • Méthodes HTTP autorisées : GET, HEAD
    • Restreindre l'accès des visualiseurs : ❌ Non (sauf si vous souhaitez des URL signées)
  • Paramètres de mise en cache et de requête d'origine :
    • Politique de mise en cache : ✅ CachingOptimized
    • Politique de requête d'origine : ✅ UserAgentRefererHeaders (transmet le Referer à S3)
  • Attribuer le certificat SSL :
    • Sous Paramètres, choisissez Certificat SSL personnalisé.
    • Sélectionnez le certificat que vous avez créé dans AWS Certificate Manager.
  • Cliquez sur Créer une distribution.
CloudFront : Configuration d
CloudFront : Configuration d'origine
CloudFront : Configuration des comportements
CloudFront : Configuration des comportements
  1. Configurer les autorisations du bucket S3

Par défaut, un bucket S3 est privé. Nous devons permettre à CloudFront d'y accéder.

  • Allez dans S3 → Sélectionnez votre bucket.
  • Autorisations → Activez ✅ Bloquer tout accès public (puisque CloudFront gérera l'accès).
  • Mettez à jour la politique du bucket :

Remplacez <nom du bucket> et <oai cloud front> par vos valeurs réelles :

  1. Étapes finales
  • Déployez CloudFront : Attendez que la distribution CloudFront termine son déploiement.
  • Tester le chargement d'une image :
    • Essayez d'accéder à une image : https://images.votresite.com/chemin/vers/image.jpg
  • Si vous obtenez 403 Forbidden, vérifiez que :
    • Le OAI CloudFront est correctement attribué.
    • La politique du bucket S3 inclut l'ARN de l'OAI.
    • L'en-tête Referer est transmis.

✅ Maintenant, vous avez une configuration complète, optimisée et sécurisée pour servir des images avec AWS S3 et CloudFront ! 🚀

Conclusion

Et voilà ! Avec AWS S3 et CloudFront travaillant ensemble, nous avons construit un moyen rapide, sécurisé et rentable de servir des images comme un pro. Plus besoin de ralentir votre serveur web ou de faire face à des temps de chargement lents — CloudFront s'occupe du gros du travail, tandis que S3 garde tout organisé et sécurisé. En transmettant l'en-tête Referer et en bloquant l'accès direct à S3, nous avons également verrouillé les choses pour prévenir le hotlinking et le trafic indésirable. Maintenant, vos images se chargent à la vitesse de l'éclair, restent protégées et évoluent sans effort. Simple, efficace et conçu pour durer ! 🚀