Les sites web statiques connaissent un regain d’intérêt dans le monde du DevOps et du Cloud. Pourquoi ? Parce qu’ils offrent des performances exceptionnelles, une scalabilité quasi-illimitée et des coûts d’exploitation réduits. Dans cet article, nous allons détailler une architecture type sur AWS utilisant S3, CloudFront et Route 53.

Pour quels types de sites cette infrastructure convient-elle ?

Avant de plonger dans l’architecture, identifions les cas d’usage optimaux pour cette infrastructure :

Sites parfaitement adaptés :

• Sites corporate et vitrine : présentation d’entreprise, landing pages
• Documentation technique : sites générés par Hugo, Jekyll, MkDocs, Docusaurus
• Blogs et sites de contenu : sites statiques générés (Gatsby, Next.js en mode export)
• Single Page Applications (SPA) : React, Vue, Angular buildées en statique
• Sites de portfolio : CVs en ligne, portfolios de designers/développeurs
• Cartes de restaurant en ligne : menus numériques, cartes QR code
• CVs et profils professionnels : pages de présentation personnelle
• Sites événementiels : pages temporaires pour conférences, événements

Avantages techniques :

• Aucun serveur à maintenir (serverless)
• Scalabilité automatique sans limite
• Latence ultra-faible grâce au CDN global
• Coûts prévisibles et optimisés
• Haute disponibilité native (99,99%)
• Sécurité renforcée (pas de backend à compromettre)

Limitations à considérer :

• Pas de contenu dynamique côté serveur (pas de PHP, Python, etc.)
• Pas de base de données traditionnelle
• Pas de gestion de sessions utilisateur côté serveur
• Formulaires nécessitant des services tiers (API Gateway + Lambda, ou services externes)

Architecture détaillée

Voici le schéma d’architecture que nous allons mettre en place :

Flux de requête

1. Utilisateur → Route 53 : Résolution DNS du nom de domaine
2. Route 53 → CloudFront : Redirection vers la distribution CloudFront
3. CloudFront → Certificate Manager : Validation du certificat SSL/TLS
4. CloudFront → S3 : Récupération du contenu statique depuis le bucket source
5. S3 → S3 Logs : Écriture des logs d’accès S3 pour analyse

Composants de l’infrastructure

S3 Static Website Hosting

Amazon S3 est le socle de notre architecture. Configuration recommandée :

Bucket principal :

Nom : votredomaine.com
Région : eu-west-1 (ou la plus proche de vos utilisateurs)
Versioning : Activé (pour rollback facile)
Encryption : AES-256 (SSE-S3)
Block Public Access : Désactivé uniquement pour CloudFront

Politique de bucket : Le bucket doit autoriser CloudFront via OAI (Origin Access Identity) ou OAC (Origin Access Control, recommandé depuis 2022).

CloudFront CDN

CloudFront assure la distribution du contenu avec une latence minimale.

Configuration clé :

• Edge Locations : Plus de 400 points de présence dans le monde
• Price Class : Choisir selon votre audience (All, 200, 100)
• Cache Behavior :
  • TTL par défaut : 86400s (24h)
  • TTL minimum : 0s (pour assets dynamiques)
  • TTL maximum : 31536000s (1 an pour assets versionnés)
• Compression : Activée (Gzip, Brotli)
• HTTP vers HTTPS : Redirect automatique
• HTTP/2 : Activé
• IPv6 : Activé

Optimisations performances :

Cache-Control: public, max-age=31536000, immutable  # Pour JS/CSS versionnés
Cache-Control: public, max-age=3600                 # Pour HTML
Cache-Control: no-cache                             # Pour index.html

aws cloudfront create-invalidation \
  --distribution-id E1234ABCD \
  --paths "/index.html" "/*.html"

Route 53

Service DNS managé d’AWS pour la résolution de noms de domaine.

Configuration :

• Hosted Zone : Zone hébergée publique pour votre domaine
• Record A (Alias) : Pointe vers la distribution CloudFront
• Record AAAA (Alias) : Pour IPv6 vers CloudFront
• TTL : 300s (5 minutes) pour la flexibilité

Avantages Route 53 :

• Intégration native avec CloudFront
• Health checks disponibles
• Routing policies avancées (latency, geolocation, weighted)
• DNS failover automatique

Certificate Manager (ACM)

Gestion des certificats SSL/TLS gratuits pour HTTPS.

Points importants :

• Certificats gratuits tant qu’ils sont utilisés avec des services AWS
• Renouvellement automatique
• Support des certificats wildcard (*.votredomaine.com)
• Validation par DNS (recommandée) ou email

S3 Access Logs

Bucket secondaire pour stocker les logs d’accès du bucket S3 principal.

Configuration du bucket de logs :

Nom : votredomaine-logs
Lifecycle Policy :
  - Suppression après 365 jours

Estimation des coûts

Voici une estimation des coûts mensuels pour un site typique (5 000 visiteurs/mois, 50 MB, 3 pages par visite) :

*Gratuit tant que le certificat est utilisé avec des services AWS intégrés (CloudFront, ALB, API Gateway)

Automatisation via CI/CD

L’automatisation du déploiement est essentielle pour une approche DevOps moderne. Voici des exemples d’intégration CI/CD.

stages:
  - build
  - deploy
  - invalidate

variables:
  S3_BUCKET: "votredomaine.com"
  CLOUDFRONT_DISTRIBUTION_ID: "E1234ABCD"

build:
  stage: build
  image: node:18
  script:
    - npm install
    - npm run build
  artifacts:
    paths:
      - dist/
    expire_in: 1 hour
  only:
    - main

deploy_s3:
  stage: deploy
  image: amazon/aws-cli:latest
  script:
    - aws s3 sync dist/ s3://${S3_BUCKET}/
      --delete
      --cache-control "public,max-age=31536000,immutable"
      --exclude "*.html"
    - aws s3 sync dist/ s3://${S3_BUCKET}/
      --exclude "*"
      --include "*.html"
      --cache-control "public,max-age=3600"
  dependencies:
    - build
  only:
    - main

invalidate_cloudfront:
  stage: invalidate
  image: amazon/aws-cli:latest
  script:
    - aws cloudfront create-invalidation
      --distribution-id ${CLOUDFRONT_DISTRIBUTION_ID}
      --paths "/*.html" "/index.html"
  dependencies:
    - deploy_s3
  only:
    - main

name: Deploy to AWS

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Build
        run: |
          npm install
          npm run build

      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v2
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: eu-west-1

      - name: Deploy to S3
        run: |
          aws s3 sync dist/ s3://votredomaine.com/ --delete

      - name: Invalidate CloudFront
        run: |
          aws cloudfront create-invalidation \
            --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} \
            --paths "/*.html" "/index.html"

# S3 Bucket
resource "aws_s3_bucket" "website" {
  bucket = "votredomaine.com"
}

resource "aws_s3_bucket_website_configuration" "website" {
  bucket = aws_s3_bucket.website.id

  index_document {
    suffix = "index.html"
  }

  error_document {
    key = "404.html"
  }
}

# CloudFront Distribution
resource "aws_cloudfront_distribution" "website" {
  enabled             = true
  is_ipv6_enabled     = true
  default_root_object = "index.html"
  aliases             = ["votredomaine.com", "www.votredomaine.com"]

  origin {
    domain_name = aws_s3_bucket.website.bucket_regional_domain_name
    origin_id   = "S3-${aws_s3_bucket.website.id}"

    s3_origin_config {
      origin_access_identity = aws_cloudfront_origin_access_identity.website.cloudfront_access_identity_path
    }
  }

  default_cache_behavior {
    allowed_methods  = ["GET", "HEAD", "OPTIONS"]
    cached_methods   = ["GET", "HEAD"]
    target_origin_id = "S3-${aws_s3_bucket.website.id}"

    forwarded_values {
      query_string = false
      cookies {
        forward = "none"
      }
    }

    viewer_protocol_policy = "redirect-to-https"
    min_ttl                = 0
    default_ttl            = 3600
    max_ttl                = 86400
    compress               = true
  }

  viewer_certificate {
    acm_certificate_arn      = aws_acm_certificate.website.arn
    ssl_support_method       = "sni-only"
    minimum_protocol_version = "TLSv1.2_2021"
  }

  restrictions {
    geo_restriction {
      restriction_type = "none"
    }
  }
}

# Route 53
resource "aws_route53_record" "website" {
  zone_id = aws_route53_zone.main.zone_id
  name    = "votredomaine.com"
  type    = "A"

  alias {
    name                   = aws_cloudfront_distribution.website.domain_name
    zone_id                = aws_cloudfront_distribution.website.hosted_zone_id
    evaluate_target_health = false
  }
}

Avantages et limitations

Conclusion

Cette architecture S3 + CloudFront + Route 53 représente un pattern éprouvé pour l’hébergement de sites web statiques sur AWS. Elle combine haute performance, scalabilité illimitée et coûts maîtrisés.

Points clés à retenir :

• Architecture serverless nécessitant zéro maintenance
• Coûts prévisibles démarrant à ~1$/mois pour les petits sites
• Automatisation complète via CI/CD
• Idéal pour sites corporate, documentation, SPA
• Infrastructure as Code avec Terraform pour la reproductibilité

Prêt à moderniser votre infrastructure web ? Suivez-nous pour découvrir d’autres architectures types dans les prochains articles.