AWS S3 + CloudFront : héberger un site statique

Créer et configurer le bucket S3

S3 (Simple Storage Service) stocke tes fichiers statiques (HTML, CSS, JS, images). On le configure pour servir un site web directement.

Configure la politique de bucket pour autoriser CloudFront:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AllowCloudFront",
      "Effect": "Allow",
      "Principal": {
        "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity/ABCDEFG1234567"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::mon-site-prod/*"
    }
  ]
}

Ensuite, configure le site web statique (propriétés du bucket → Static website hosting):

Index document: index.html
Error document: 404.html

Créer la distribution CloudFront

CloudFront est un CDN qui distribue ton contenu dans + de 200 datacenters mondiaux, donc bien plus rapide que S3 seul.

Crée la distribution:

AWS Console → CloudFront → Create distribution

1. Origin domain: sélectionner le bucket S3
2. Origin access: "Origin access control settings"
   - Créer une OAC (Origin Access Control)

3. Viewer protocol: Redirect HTTP to HTTPS

4. Allowed HTTP methods: GET, HEAD

5. Cache policy: CachingOptimized (défaut)

6. Compress objects automatically: ON

7. Alternate domain names (CNAME):
   monsite.com
   www.monsite.com

Après création, AWS te donne une URL CloudFront: d1234abc.cloudfront.net

Connecter un domaine personnel

Pour que ton site soit accessible via monsite.com au lieu du long URL CloudFront.

Avec Route 53:

AWS Console → Route 53 → Hosted zones

1. Créer hosted zone pour "monsite.com"
2. Créer un record:
   - Type: A (alias)
   - Name: monsite.com
   - Alias target: distribution CloudFront
   - Routing policy: Simple
3. Copier les nameservers Route 53 chez ton registrar

Avec un registrar externe (exemple Namecheap):

1. Aller sur ton registrar
2. Créer CNAME record:
   - Host: www
   - Type: CNAME
   - Value: d1234abc.cloudfront.net

3. Pour l'apex (monsite.com), utiliser ALIAS ou effectuer la redirection www

Gérer le cache et les invalidations

CloudFront met en cache le contenu. C'est performant mais tu dois contrôler l'expiration pour les mises à jour.

Configure la cache policy pour les fichiers HTML:

Au moment du build, ajoute des headers de cache:

index.html: Cache-Control: max-age=300 (5 min)
*.css, *.js, *.png: Cache-Control: max-age=31536000 (1 an)

Pour invalider manuellem, crée une invalidation CloudFront:

AWS CLI:
aws cloudfront create-invalidation \
  --distribution-id D1234ABC \
  --paths "/*"

Cela force le rafraîchissement de tous les fichiers.

Ou via la console CloudFront → Distributions → Invalidations → Create invalidation

Sécurité et HTTPS

CloudFront inclut HTTPS gratuit avec ACM (AWS Certificate Manager). Active-le obligatoirement en production.

Dans CloudFront, ajoute les headers de sécurité via une fonction Lambda@Edge ou via une policy personnalisée:

Headers de sécurité recommandés:

Strict-Transport-Security: max-age=31536000; includeSubDomains
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'

Déploiement automatisé

À la place de uploader manuellement chaque fichier, automatise le build et déploiement avec GitHub Actions + AWS CLI.

# fichier: .github/workflows/deploy.yml

name: Deploy to AWS

on:
  push:
    branches: [main]

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

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

      - name: Sync to S3
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        run: |
          aws s3 sync dist/ s3://mon-site-prod --delete

      - name: Invalidate CloudFront
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        run: |
          aws cloudfront create-invalidation \
            --distribution-id D1234ABC \
            --paths "/*"