Déployez votre site Astro sur AWS

AWS est une plateforme d’hébergement d’applications web complète qui peut être utilisée pour déployer un site Astro.

Pour déployer votre projet sur AWS, vous devez utiliser la console AWS. (La plupart de ces actions peuvent également être effectuées à l’aide de AWS CLI). Ce guide vous accompagnera dans le processus de déploiement de votre site sur AWS, en commençant par la méthode la plus basique. Ensuite, il vous montrera comment ajouter des services supplémentaires pour améliorer la rentabilité et les performances.

AWS Amplify

Titre de la section AWS Amplify

AWS Amplify est un ensemble d’outils et de fonctionnalités spécialement conçus pour permettre aux développeurs web et mobiles de créer rapidement et facilement des applications complètes sur AWS.

1. Créez un nouveau projet Amplify Hosting.
2. Connectez votre dépôt à Amplify.
3. Modifiez votre répertoire de sortie baseDirectory en /dist.

version: 1
frontend:
  phases:
    preBuild:
      # Vous n'utilisez pas npm ? Remplacez `npm ci` par `yarn install` ou `pnpm i`
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: /dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

L’utilisation de pnpm nécessitera des réglages légèrement différents afin de mettre en cache le répertoire pnpm store au lieu de node_modules. Voici la configuration de compilation recommandée :

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm i -g pnpm
        - pnpm config set store-dir .pnpm-store
        - pnpm i
    build:
      commands:
        - pnpm run build
  artifacts:
    baseDirectory: /dist
    files:
      - '**/*'
  cache:
    paths:
      - .pnpm-store/**/*

Amplify déploiera automatiquement votre site web et le mettra à jour lorsque vous pousserez un commit dans votre dépôt.

Hébergement de sites web statiques S3

Titre de la section Hébergement de sites web statiques S3

S3 est le point de départ de toute application. C’est là que sont stockés les fichiers de votre projet et d’autres ressources. S3 facture le stockage des fichiers et le nombre de requêtes. Vous trouverez plus d’informations sur S3 dans la documentation AWS.

1. Créez un panier S3 avec le nom de votre projet.

Astuce

Le nom du bucket doit être globalement unique. Nous recommandons une combinaison du nom de votre projet et du nom de domaine de votre site.

2. Désactivez “Block all public access”. Par défaut, AWS définit tous les buckets comme étant privés. Pour le rendre public, vous devez décocher la case “Bloquer l’accès public” dans les propriétés du bucket.

3. Téléchargez vos fichiers construits situés dans dist sur S3. Vous pouvez le faire manuellement dans la console ou utiliser le CLI AWS. Si vous utilisez la CLI AWS, vous pouvez utiliser la commande suivante après l’authentification avec vos identifiants AWS :

aws s3 cp dist/ s3://<BUCKET_NAME>/ --recursive

4. Mettez à jour la politique de votre bucket afin d’autoriser l’accès public. Vous trouverez ce paramètre dans Permissions > Bucket policy.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::<BUCKET_NAME>/*"
    }
  ]
}

Attention

N’oubliez pas de remplacer <BUCKET_NAME> par le nom de votre bucket.

5. Activez l’hébergement de site web pour votre bucket. Vous pouvez trouver ce paramètre dans les Settings > Static website hosting du bucket. Définissez votre document d’index à index.html et votre document d’erreur à 404.html. Enfin, vous pouvez trouver l’URL de votre nouveau site web dans Settings > Static website hosting du bucket.

Note

Si vous déployez une application à page unique (SPA), définissez votre document d’erreur à index.html.

S3 avec CloudFront

Titre de la section S3 avec CloudFront

CloudFront est un service web qui offre des capacités de réseau de diffusion de contenu (CDN). Il est utilisé pour mettre en cache le contenu d’un serveur web et le distribuer aux utilisateurs finaux. CloudFront facture la quantité de données transférées. L’ajout de CloudFront à votre bucket S3 est plus rentable et permet une diffusion plus rapide.

Nous utiliserons CloudFront pour envelopper notre bucket S3 afin de servir les fichiers de notre projet en utilisant le réseau CDN mondial d’Amazon. Cela réduira le coût du service des fichiers de votre projet et augmentera les performances de votre site.

Configuration du S3

Titre de la section Configuration du S3

1. Créez un bucket S3 portant le nom de votre projet.

Astuce

Le nom du bucket doit être unique au monde. Nous recommandons une combinaison du nom de votre projet et du nom de domaine de votre site.

2. Téléchargez vos fichiers construits situés dans dist sur S3. Vous pouvez le faire manuellement dans la console ou utiliser le CLI AWS. Si vous utilisez la CLI AWS, vous pouvez utiliser la commande suivante après l’authentification avec vos informations d’identification AWS :

aws s3 cp dist/ s3://<BUCKET_NAME>/ --recursive

3. Mettez à jour votre politique de bucket pour autoriser l’accès à CloudFront. Vous pouvez trouver ce paramètre dans les Permissions > Bucket policy du bucket.

{
  "Version": "2012-10-17",
  "Statement": [{
    "Effect": "Allow",
    "Principal": {
      "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity <CLOUDFRONT_OAI_ID>"
    },
    "Action": "s3:GetObject",
    "Resource": "arn:aws:s3:::astro-aws/*"
  }]
}

Attention

N’oubliez pas de remplacer <CLOUDFRONT_OAI_ID> par le nom de votre ID d’accès à l’origine de CloudFront. Vous pouvez trouver l’ID d’accès à l’origine de CloudFront dans CloudFront > Origin access identities après avoir configuré CloudFront.

Configuration de CloudFront

Titre de la section Configuration de CloudFront

1. Créez une répartition CloudFront avec les valeurs suivantes :

• Origin domain: Votre bucket S3
• S3 bucket access: “Yes use OAI (bucket can restrict access to only CloudFront)” (Oui, utiliser OAI (le bucket peut restreindre l’accès à CloudFront)
• Origin access identity: Créer une nouvelle identité d’accès à l’origine
• Viewer - Bucket policy: “Non, je vais mettre à jour la politique du bucket”
• Viewer protocol policy: “Rediriger vers HTTPS”
• Default root object: index.html

Cette configuration bloquera l’accès à votre bucket S3 depuis l’Internet public et servira votre site web en utilisant le réseau CDN mondial. Vous pouvez trouver l’URL de votre distribution CloudFront dans Distributions > Domain name du bucket.

Configuration des fonctions CloudFront

Titre de la section Configuration des fonctions CloudFront

Malheureusement, CloudFront ne supporte pas le routage multi-pages sous-dossier/index par défaut. Pour le configurer, nous allons utiliser CloudFront Functions pour diriger la requête vers l’objet désiré dans S3.

1. Créez une nouvelle fonction CloudFront avec l’extrait de code suivant. Vous pouvez trouver les fonctions CloudFront dans CloudFront > Functions.

function handler(event) {
  var request = event.request;
  var uri = request.uri;

  // Vérifie s'il manque un nom de fichier à l'URI.
  if (uri.endsWith('/')) {
    request.uri += 'index.html';
  }
  // Vérifie s'il manque une extension de fichier à l'URI.
  else if (!uri.includes('.')) {
    request.uri += '/index.html';
  }

  return request;
}

2. Attachez votre fonction à la distribution CloudFront. Vous trouverez cette option dans les Settings > Behaviors > Edit > Function de votre distribution CloudFront.

• Viewer request - Function type: Fonction CloudFront.
• Viewer request - Function ARN: Sélectionnez la fonction que vous avez créée à l’étape précédente.

Configuration des pages d’erreurs CloudFront

Titre de la section Configuration des pages d’erreurs CloudFront

Par défaut, S3 renvoie une erreur 404 lorsque le fichier est introuvable, et 403 lorsque le fichier est privé. Dans les deux cas, les visiteurs voient une page d’erreur XML hideuse.

Pour y remédier, ajoutez des réponses d’erreur personnalisées dans les Paramètres > Pages d’erreur de votre distribution CloudFront.

1. Créez une réponse d’erreur personnalisée pour les erreurs 404 avec les valeurs suivantes:

   • HTTP error code: 404: Not Found
   • Customize error response: Yes
   • Response page path: /index.html
   • HTTP response code: 200: OK

2. Créez une réponse d’erreur personnalisée pour les erreurs 403 avec les valeurs suivantes :

   • HTTP error code: 403: Forbidden
   • Customize error response: Yes
   • Response page path: /index.html
   • HTTP response code: 200: OK

Astuce

Pour une meilleure expérience utilisateur, vous pouvez créer une page 404 personnalisée dans votre projet et définir le Response page path à /404.html.

Déploiement continu avec GitHub Actions

Titre de la section Déploiement continu avec GitHub Actions

Il existe de nombreuses façons de mettre en place un déploiement continu pour AWS. Une possibilité pour le code hébergé sur GitHub est d’utiliser GitHub Actions pour déployer votre site web à chaque fois que vous poussez un commit.

1. Créez une nouvelle politique dans votre compte AWS en utilisant IAM avec les permissions suivantes. Cette politique vous permettra de télécharger des fichiers construits dans votre bucket S3 et d’invalider les fichiers de distribution CloudFront lorsque vous poussez un commit.

{
  "Version": "2012-10-17",
  "Statement": [
      {
          "Sid": "VisualEditor0",
          "Effect": "Allow",
          "Action": [
              "s3:PutObject",
              "s3:ListBucket",
              "s3:DeleteObject",
              "cloudfront:CreateInvalidation"
          ],
          "Resource": [
              "<DISTRIBUTION_ARN>",
              "arn:aws:s3:::<BUCKET_NAME>/*",
              "arn:aws:s3:::<BUCKET_NAME>"
          ]
      }
  ]
}

Attention

N’oubliez pas de remplacer <DISTRIBUTION_ARN> et <BUCKET_NAME>. Vous pouvez trouver l’ARN dans CloudFront > Distributions > Details.

2. Créez un nouvel utilisateur IAM et attachez la politique à l’utilisateur. Ceci fournira votre AWS_SECRET_ACCESS_KEY et AWS_ACCESS_KEY_ID.

3. Ajoutez cet exemple de workflow .github/workflows/deploy.yml à votre dépôt et publiez-le sur GitHub. Il vous faudra ajouter AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, BUCKET_ID, et DISTRIBUTION_ID en tant que “secrets” de votre dépôt sur GitHub dans Settings > Secrets and variables > Actions. Cliquez sur New repository secret pour ajouter chacun d’eux.

name: Déployer le site web

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: us-east-1
      - name: Install modules
        run: npm ci
      - name: Build application
        run: npm run build
      - name: Deploy to S3
        run: aws s3 sync --delete ./dist/ s3://${{ secrets.BUCKET_ID }}
      - name: Create CloudFront invalidation
        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.DISTRIBUTION_ID }} --paths "/*"

Note

Votre BUCKET_ID est le nom de votre bucket S3. Votre DISTRIBUTION_ID est l’ID de votre distribution CloudFront. Vous pouvez trouver votre ID de distribution CloudFront dans CloudFront > Distributions > ID

Plus de guides de déploiement

Filtrer par type de déploiement SSR Statique

• 

  Netlify

• 

  Vercel

• 

  Deno Deploy

• 

  GitHub Pages

• 

  GitLab Pages

• 

  Cloudflare Pages

• 

  AWS

• 

  AWS via Flightcontrol

• 

  AWS via SST

• 

  Google Cloud

• 

  Firebase Hosting

• 

  Heroku

• 

  Microsoft Azure

• 

  Buddy

• 

  Edgio

• 

  Render

• 

  Surge

• 

  Cleavr

• 

  Kinsta

• 

  Deta Space

• 

  Zeabur