Déployer un environnement de production avec AWS S3, CloudFront et Route 53

📅 2026-01-31

✅Première partie: Préalabilité

Liste de contrôle de la préparation

  • Compte AWS (avec la méthode de paiement activée)
  • Votre propre nom de domaine (par exemple: example.com)
  • Les fichiers du site sont prêts (HTML/CSS/JS)
  • Navigateur ouvert à la console AWS (console.aws.amazon.com)

Concepts clés compréhensibles

  • Bouquet S3: Contenant pour le stockage de fichiers de sites Web
  • CloudFront: CDN mondial, accélère la distribution de contenu
  • Route 53: service de résolution DNS, domaines associés
  • L'ACM: Service gratuit de certificats SSL/TLS
  • OAC: Contrôle d'accès d'origine, garantit que seul CloudFront peut accéder à S3

💾Deuxième partie: Création et configuration du seau S3

1Créer un seau S3

Parcours: AWS Console Home → S3 → Buckets → Créez Bucket

Des étapes détaillées

  1. Connectez-vous à la console AWS
  2. Dans la zone de recherche supérieure, tapez S3 → Cliquez pour entrer dans le service S3
  3. Dans la barre latérale gauche, cliquez sur "Les seins"
  4. Cliquez sur le "Créer un seau" bouton (bleu)

Remplissez le formulaire

─ Nom du seau │ Entrez: exemple-com-site web │ ✓ Unique au niveau mondial │ ✓ Lettres minuscules, chiffres, hyphens uniquement │ ✓ Ne peut pas commencer par "xn--" │ ─ Région │ Sélectionnez: us-est-1 (ou la région la plus proche de vous) │ Recommandé d'utiliser us-est-1 pour réduire les coûts de CloudFront │ ─ Propriété d'objet │ Sélectionnez: ACL désactivé │ ─ Bloc des paramètres d'accès public │
✅ Indicateur de réussite: Nouveau seau apparaît dans la liste de seau avec l'état ✓

2Activer l' hébergement du site Web statique

Parcours: S3 Bucket → Propriétés → Modifier l'hébergement Web statique

Des étapes détaillées

  1. Cliquez sur le nom du seau que vous venez de créer (exemple-com-site web)
  2. Cliquez sur le "Propriétés" onglet (cinquième de droite)
  3. Faites défiler vers le bas pour trouver le "L'hébergement Web statique" section
  4. Cliquez sur le "Éditer" bouton

Articles de configuration

─ Hébergement de site Web statique │ ○ Activation ← Vous devez sélectionner cette option │ ─ type d'hébergement │ ○ héberger un site Web ← Sélectionnez cette option (ne sélectionnez pas les demandes de redirection) │ ─ Document d'index │ Entrez: index.html │ Description: Fichier retourné lorsque l'utilisateur accède / │ ─ Document d'erreur │ Entrez: error.html │ Description: Fichier retourné lorsque des erreurs 404/403 se produisent │ ─ Enregistrer les modifications → Cliquez sur le bouton "Enregistrer"
✅ Vérifiez le succès:
  • La page affiche "✓ Mise à jour terminée"
  • Sous "Hosting Web statique" affiche "Activé"
  • Vous verrez une URL d'endpoint du site Web

3Télécharger les fichiers du site

Parcours: S3 Bucket → Objets → téléchargement

Exemple de structure de fichier

my-website/ ── index.html ← Exigé ── error.html ← Exigé ── css/ │ ── style.css ── js/ │ ── app.js ── images/ │ ── logo.png ── about.html

Métodes de téléchargement

Méthode A: glisser-déposer
Tirez le dossier du site Web dans la zone de téléchargement, prend en charge le téléchargement récursif des sous-dossiers

Méthode B: Cliquez pour sélectionner
Cliquez sur " Ajouter du fichier " ou " Ajouter du dossier " et sélectionnez les fichiers un par un
✅ Vérifiez le téléchargement:
  • Voir les progrès de téléchargement atteindre 100%
  • Après le retour à bucket, voir la liste de tous les fichiers

🔐Troisième partie: Créer un contrôle d'accès à l'origine (OAC)

4Créer une OAC

Parcours: CloudFront → Sécurité → Accès à l' origine

Des étapes détaillées

  1. Dans la zone de recherche supérieure, tapez CloudFront → Entrez dans le service CloudFront
  2. Dans la barre latérale gauche, élargir le "La sécurité" menu
  3. Cliquez sur "Accès à l'origine"
  4. Cliquez sur le "Créer un contrôle d'accès à l'origine" bouton

Remplissez le formulaire

─ Nom du contrôle d'accès à l'origine │ Entrez: s3-site-oac │ Description: Pour une identification facile, personnalisable │ ─ Type d'origine │ ✓ S3 ← Vous devez sélectionner S3 │ ─ Description (facultatif) │ Entrez: Par exemple.com site Web statique │ ─ Créez le bouton Cliquez sur "Créer"
✅ Indicateur de réussite:
  • L' OAC nouvellement créé apparaît sur la page
  • Copie de l'identifiant OAC affiché (p. ex.: E127EXAMPLE51Z)
️ Note importante: Rappelez-vous l'ID OAC, vous en aurez besoin pour la configuration ultérieure

⚡Quatrième partie: Créer une distribution CloudFront

5Créer une distribution CloudFront

Parcours: CloudFront → Distribution → Créer une distribution

Configuration de l'origine - Section de l'origine

─ Domaine d'origine │ Cliquez sur la case d'entrée → Sélectionnez le seau S3 à partir de la zone déroulante │ Doit s'afficher: exemple-com-website.s3.us-east-1.amazonaws.com │ ️ Ne pas sélectionner le point d'extrémité du site web s3, sélectionnez l'URL standard S3 │ ─ Access d'origine │ ○ Configuration du contrôle d'accès à l'origine ← Sélectionnez cette option │ ─ Control d'accès à l'origine │ Cliquez en zone déroulante → Sélectionnez "s3-website-oac" créé plus tôt │ ─ Protocole lorsque S3 est l'origine HTTPS uniquement ← Recommandé de sélectionner (plus sécurisé)

Configuration de comportement de cache par défaut

─ Politique du protocole d'affichage │ ○ Rediriger HTTP vers HTTPS ← Sélectionnez cette option │ Description: redirige automatiquement HTTP vers HTTPS │ ─ Méthodes HTTP autorisées │ ✓ GET, HEAD (maintain par défaut) │ ─ Politique de mise en cache et politique de demande d'origine │ Politique de mise en cache: Cliquez déroulant → Sélectionnez "CachingOptimisé" │ Politique de demande d'origine: Cliquez déroulant → Sélectionnez "S3Origin" │ ─ Comprimer des objets ✓ Activer ← Peut réduire les coûts de données

Configuration de la distribution

─ Activer cette distribution │ ✓ Il faut vérifier │ ─ Nom de domaine alternatif (CNAME) │ ️ Ne remplissez pas pour l'instant, configurez-le plus tard │ ─ Objet racine par défaut │ Entrez: index.html │ Description: Fichier retourné lors de l'accès │ ─ IPv6 │ ✓ Activer (déjà par défaut) │ ─ Créer une distribution Cliquez sur le bouton "Créer une distribution"
Attendez: Déploiement de distribution prend 5 à 10 minutes, changement d'état de "en cours" à "déployé"

6Copier le nom de domaine CloudFront

Parcours: CloudFront → Distributions → Détails de distribution

  1. Une fois la distribution créée, cliquez sur l'ID de distribution
  2. Dans le "Détails de distribution" l'onglet affiche les informations suivantes
  3. Copie du nom de domaine de distribution (d111111abcd.cloudfront.net)
Nom de domaine de distribution: d111111abcd.cloudfront.net ↑ Copiez cet élément (pour une utilisation ultérieure) ID de distribution: E1234ABCD

7Appliquer la politique de bouquet S3

Parcours: S3 → Bucket → Permissions → Politique de bucket

Les étapes de l'opération

  1. Retour au service S3
  2. Sélectionnez votre bouquet de site (exemple-com-site)
  3. Cliquez sur le "Permissions" étiquette
  4. Faites défiler vers le bas pour trouver "Politique des seins" et cliquez "Éditer"
  5. Collez le JSON suivant dans la case d'édition

JSON (exige une modification)

{ "Version": "2012-10-17", "Statement": [ { "Sid": "AllowCloudFrontOAC", "Effect": "Allow", "Principal": { "Service": "cloudfront.amazonaws.com" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3:::example-com-website/*", "Condition": { "StringEquals": { "AWS:SourceArn": "arn:aws:cloudfront::123456789012:distribution/E1234ABCD" } } } } } } }
️ Trois éléments que vous devez modifier:
  • example-com-website → Remplacez par votre nom de seau
  • 123456789012 → Remplacez par votre ID de compte AWS
  • E1234ABCD → Remplacez par votre identifiant de distribution CloudFront
✅ ComplèteCliquez sur: "Enregistrer les changements"

🔒Partie cinq: Demande de certificat ACM

8Demander un certificat SSL/TLS

Parcours: ACM (Gestionnaire de certificats AWS) → Certificats → Certificat de demande

Remarque importante

️ La région est très importanteVeillez à ce que la région soit États-Unis de l'Est (N. Virginia), CloudFront ne prend en charge que les certificats de cette région

Des étapes détaillées

  1. Dans la zone de recherche supérieure, tapez Certificate Manager → Entrer dans le service ACM
  2. Assurez-vous que la région est États-Unis de l'Est (N. Virginia)
  3. Cliquez sur le "Certificat de demande" bouton

Remplissez le formulaire

─ Type de certificat │ ○ Certificat public ← Vous devez sélectionner cette option │ ─ Ajouter des noms de domaine │ Cliquez sur " Ajouter un nom de domaine " → Entrez: example.com │ Cliquez à nouveau → Entrez: *.example.com │ │ Affichage final: │ ✓ *.example.com │ ─ Méthode de validation │ ─ Validation DNS ← Sélectionnez cette option (plus rapide que le courrier électronique) │ ─ Algorithme clé │ ○ RSA 2048 (maintain par défaut) │ ─ Tags (optionnel) │ Entrez: site-cert │ ─ Cliquez sur le bouton "Demande"

Validation DNS ultérieure

Après avoir demandé, la page vous demandera de valider le domaine:

Les étapes:
  1. Dans le "Validation du domaine" section vous verrez les dossiers de validation
  2. Cliquez sur le "Créer un enregistrement Route53" bouton
  3. AWS ajoutera automatiquement un enregistrement CNAME dans Route53
  4. Attendez 5 à 30 minutes, l'état changera à "Édité"
✅ Complète: Le statut du certificat sera modifié à "Émis"

🌐Partie 6: Configuration du DNS de route53

9Créer une zone d' hébergement Route53

Parcours: Route53 → Zones hébergées → Créer une zone hébergée

Des étapes détaillées

  1. Dans la zone de recherche supérieure, tapez Route53 → Entrer dans le service Route53
  2. Dans la barre latérale gauche, cliquez sur "Zones d'accueil"
  3. Cliquez sur le " Créer une zone d'accueil " bouton

Remplissez le formulaire

─ Nom de domaine │ Entrez: example.com │ ️ Ne pas inclure www ou http:// │ ─ Description (facultatif) │ Entrez: hébergement de sites Web │ ─ Type │ ○ Zone hébergée publique ← Sélectionnez cette option │ ─ Créer une zone hébergée Cliquez sur le bouton " Créer une zone hébergée "

Enregistrez des renseignements importants

Identification de zone hébergée: Z1234567890ABC ↑ Copiez et notez cet article Nom des serveurs (enregistrements NS): ns-1111.awsdns-22.com ns-2222.awsdns-33.co.uk ns-3333.awsdns-44.org ns-4444.awsdns-55.net ↑ Copiez ces 4 enregistrements NS

10Mise à jour des paramètres DNS du registraire de domaine

Opérer à l' Registreur de domaine (comme GoDaddy, Namecheap, Aliyun, etc.)

Les étapes

  1. Connectez-vous à votre compte de registraire de domaine
  2. Trouver "Gestion du DNS" ou "Gestion du domaine"
  3. Modifiez les serveurs de noms (enregistrements NS) aux 4 que vous avez copiés ci-dessus
  4. Enregistrer les modifications
Propagation du DNS: Cela peut prendre 1 à 48 heures, vous pouvez vérifier avec la commande suivante:
nslookup example.com # Vous devriez voir les enregistrements AWS NS

11Créer des enregistrements alias dans Route53

Parcours: Route53 → Zones hébergées → Créer un enregistrement

Créer le premier enregistrement (domaine racine)

─ Nom d'enregistrement │ Laissez vide (représente le domaine racine example.com) │ ─ Type d'enregistrement │ Cliquez en bas de page → Sélectionnez "A" │ ─ Alias │ ✓ Activer les alias ← Vous devez vérifier ceci │ ─ Sélectionner la politique de trafic │ ○ Routing simple ← Maintenir par défaut │ ─ Route de trafic │ Cliquez en bas de page → Sélectionnez " CloudFront Distribution " │ ─ Sélectionnez la distribution │ Cliquez en bas de page → Sélectionnez votre distribution (d11111111abcd.cloudfront.net) │ ─ Évaluer la santé de la cible │ ○ Non (maintain par défaut) │ ─ Cliquez sur " Créer un enregistrement "

Créer un deuxième enregistrement (www sous-domaine)

Répétez les étapes ci-dessus, mais changez " Nom d'enregistrement " à www, le reste de la configuration est le même.

✅ Complète: Les deux enregistrements doivent indiquer la même distribution CloudFront

12Configurer le nom et le certificat de CloudFront

Parcours: CloudFront → Distributions → Modifier

Les étapes

  1. Retour au service CloudFront
  2. Sélectionnez votre distribution (cliquez sur ID de distribution)
  3. Cliquez sur le "Éditer" bouton
  4. Trouvez le "Les noms de domaine alternatifs (CNAME) " champ
  5. Cliquez sur la case d'entrée et ajoutez deux noms de domaine
Ajouter dans la case de saisie des noms de domaine alternatifs: example.com www.example.com

Sélectionnez le certificat SSL

Faites défiler vers le bas pour trouver "Certificat SSL personnalisé" ou "Certificat SSL" ─ Certificat SSL │ ✓ Certificat SSL personnalisé │ ─ Sélectionnez Certificat │ Cliquez en bas de page → Sélectionnez le certificat que vous avez demandé plus tôt │ Il devrait s'afficher: example.com (et *.example.com) │ ─ Enregistrer Cliquez sur "Enregistrer les changements"
Attendre le déploiement: Modification de l'état de distribution de " En cours " à " Déployé " (généralement de 5 à 10 minutes)

⚙️Septième partie: Configurer une politique de mise en cache

13Configurer le cache pour différents types de fichiers

Parcours: CloudFront → Distributions → Comportements → Modifier

Cette étape est utilisée pour optimiser les coûts et les performances.

Configuration du comportement par défaut

1. Retournez à la page d'édition de la distribution CloudFront 2. Cliquez sur l'onglet "Comportements" 3. Sélectionnez Comportement par défaut → Cliquez sur "Éditer" ─ Cache Key and Origin Request │ Politique de cache: CachageOptimisé (déjà configuré) │ ─ Titres de requête de contrôle de cache du spectateur │ ✓ Utilisez les titres de contrôle de cache d'origine │ ─ Enregistrer Cliquez sur "Enregistrer"

Optionnel: Créer un comportement séparé pour HTML

Pour un contrôle plus précis, vous pouvez créer différentes règles de comportement pour différents types de fichiers:

Comportement des fichiers HTML:
Pattern de chemin: *.html Politique de cache: Cache désactivé (ne pas mettre en cache, obtenir le dernier à chaque fois) Politique de demande d'origine: S3Origin
Comportement des fichiers JavaScript:
Mode de parcours: *.js Politique de cache: CachageOptimisé Compresser: Activer

✔️Partie huitième: Épreuves et vérification

14Examen de l'accès au site

Les URL de test

Accès dans le navigateur: https://example.com https://www.example.com https://d111111abcd.cloudfront.net (URL directe de CloudFront)

Indicateurs de réussite

  • ✅ Charges de page normalement
  • ✅ HTTPS est valide (la barre d'adresse affiche l'icône de verrouillage)
  • ✅ Les informations du certificat sont correctes (cliquez sur l'icône de verrouillage pour voir)

Tableau de dépannage

Problème La cause Solution
Affiche la page d'erreur AWS S3 Politique de bouquet S3 non configurée correctement Vérifiez l'identifiant de distribution dans la politique de bouquet
Il montre que "l'accès est refusé" L'OAC n'a pas été correctement appliqué Confirmer l'existence de l' OAC dans la politique S3
Nom de domaine personnalisé ne fonctionne pas Route53 Le DNS n'est pas en vigueur Attendre la propagation du DNS (maximum 48 heures)
Certificat SSL invalide Certificat ACM non déployé sur CloudFront Sélectionnez le certificat correct dans CloudFront
L' accès est lent. Le cache ne fonctionne pas Vérifiez la configuration de l'en-tête Cache-Control

🚀Neufième partie: Optimisation des performances

15Configurer l'optimisation des en-têtes de cache

La mise en place d'en-têtes appropriés Cache-Control pour les fichiers dans S3 peut réduire considérablement les coûts et améliorer les performances.

Méthode A: par l'intermédiaire de la console AWS

  1. S3 → Seau → Objets
  2. Sélectionnez le fichier → "Les actions de l'objet" → "Éditer les métadonnées"
  3. Ajouter des métadonnées personnalisées (Clé: Cache-Control)

Recommandations sur le temps de mise en cache

Type de fichier Value de contrôle de cache Définition
Fichier HTML public, max-age=300, must-revalidate 5 minutes, doit être renouvelée
CSS/JS/Image public, max-age=31536000, immutable 1 an, nécessite une version des noms de fichiers
Réponse de l'API public, max-age=0 Pas de cache, obtenez les dernières nouvelles à chaque fois

Méthode B: par l'intermédiaire d'AWS CLI

# Charger et configurer le cache HTML aws s3 cp index.html s3://example-com-website/index.html \ --metadata "Cache-Control=public, max-age=300" # Charger et configurer le cache à long terme pour JS/CSS aws s3 cp app.a1b2c3d4.js s3://example-com-website/ \ --metadata "Cache-Control=public, max-age=31536000, immutable"

16Activer la compression Gzip

L'activation de la compression automatique dans CloudFront peut réduire le trafic de 60 à 70%.

Les étapes

  1. CloudFront → Distributions → Modifier
  2. Trouver "Comportement de cache par défaut"
  3. Vérifiez "Activer la compression" ✓
Économies de coûts: Après avoir activé la compression, les fichiers texte (HTML, CSS, JS) peuvent réduire le volume de transfert de 60-70%

📊Dixième partie: Surveillance et contrôle des coûts

17Installez des alertes de surveillance

Surveiller les coûts de CloudFront

  1. Entrez CloudWatch ou Gestion des coûts
  2. Mise en place d'alertes budgétaires
Nom du budget: Site Web Compte mensuel Compte budgétaire: 10 $ (exemple) seuil d'alerte: avis lorsque 80% est atteint

Surveiller les principaux indicateurs de performance

Voir les métriques suivantes dans la distribution CloudFront:

  • Nombre de demandes: Total des demandes par jour
  • Volume de transfert de données: Taille du trafic sortant
  • Taux d'accès au cache: devrait être > 90%
  • Taux d'erreur: devrait être proche de 0%

Tableau d'estimation des coûts (ménaux)

Le service Le coût Définition
Réglage S3 $0.23 10 Go × 0,023 $
Les demandes de S3 GET $0.04 1M ÷ 1000 × $0.0004
CloudFront sortant Gratuit 1 TB de niveau gratuit (100 Go utilisés)
Les demandes de CloudFront Gratuit 10 M de niveau libre (1 M utilisé)
Route 53 $0.5 Frais mensuels pour la zone d'hébergement
Certificat ACM Gratuit Gratuit pour une utilisation interne AWS
Total 0,77 $ par mois

Questions fréquemment posées

Q1: Comment mettre à jour les fichiers du site ?

# Méthode 1: Utilisez AWS CLI aws s3 cp./new-file.html s3://example-com-website/ aws s3 synchronisation ./website-files/ s3://example-com-website/ --supprimer # Méthode 2: Utilisez AWS Console # S3 → Bucket → Charger → Sélectionnez le fichier → Charger

Q2: Comment effacer le cache CloudFront ?

  1. CloudFront → Distributions → Invalidations
  2. Créez Invalidation → Entrez le chemin /* → Créer
Astuce: Cela effacera tous les fichiers en cache (habituellement prend effet en 5 minutes)

Q3: Quel est le flux de transfert de données de S3 + CloudFront ?

Utilisateur → Node Edge CloudFront → S3 Bucket ↓ Retourner le contenu en cache (rapide)

Q4: Comment puis-je mettre en œuvre le redirectionnement HTTPS ?

Déjà configuré dans CloudFront:

  • Politique du protocole du spectateur: rediriger HTTP vers HTTPS

Toutes les demandes HTTP seront automatiquement redirigées vers HTTPS.

✅Résumé Liste de contrôle

Après déploiement, vérifiez les éléments suivants

  • Bouquet S3 créé et fichiers téléchargés
  • L'hébergement statique du site Web activé (index.html, error.html)
  • Création de l'OAC
  • Distribution CloudFront créée et déployée
  • Certificat ACM demandé et vérifié
  • Zone hébergée par Route53 créée
  • DNS du registraire de domaine mis à jour vers Route53 NS
  • Enregistrements alias (enregistrements A) créés
  • Le nom CNAME de CloudFront est configuré
  • Certificat ACM de CloudFront appliqué
  • https://example.com accessible normally
  • Politique de cache optimisée
  • Compression activée
  • Mise en place de la surveillance des coûts

Maintenance ultérieure

Opérations quotidiennes

  • Vérifiez régulièrement le taux de succès du cache CloudFront (il devrait être > 90%)
  • Surveiller les coûts mensuels
  • Utilisation aws s3 sync commande lors de la mise à jour du contenu du site

Maintenance régulière

  • Vérifiez la date d'expiration du certificat ACM (renouvellement automatique)
  • Vérifiez que la configuration DNS de Route53 est correcte
  • Nettoyer les anciennes versions d'objets S3 (si la mise en version est activée)

Optimisation des performances

  • Utilisez les journaux en temps réel de CloudFront pour analyser le taux de succès du cache
  • Ajustez régulièrement la configuration de l'en-tête Cache-Control
  • Considérez l'utilisation de Lambda@Edge pour l'informatique de bord

Déploiement complet

Vous disposez désormais d'une solution d'hébergement de site Web statique de qualité de production, à faible coût

Coût: 0,5 à 5 dollars par mois en moyenne
Performance: temps de chargement global < 500 ms
Sécurité: protection HTTPS + DDoS
Évolutivité: gère automatiquement la croissance du trafic