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 conduira à travers les étapes du déploiement de votre site sur AWS en utilisant AWS Amplify, Hébergement de sites web statiques S3, et CloudFront.

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.

Créez un nouveau projet Amplify Hosting.
Connectez votre dépôt à Amplify.
Modifiez vos paramètres de construction pour qu’ils correspondent au processus de construction de votre projet.
- npm
- pnpm
- Yarn
version: 1 frontend: phases: preBuild: commands: - npm ci build: commands: - npm run build artifacts: baseDirectory: /dist files: - '**/*' cache: paths: - node_modules/**/*
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/**/*
version: 1 frontend: phases: preBuild: commands: - yarn install build: commands: - yarn build artifacts: baseDirectory: /dist files: - '**/*' cache: paths: - node_modules/**/*

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

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.

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

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.
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.
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
```

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>/*"
    }
  ]
}

Activez l’hébergement de site web pour votre bucket. Vous pouvez trouver ce paramètre dans les Properties > 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 Properties > Static website hosting du bucket.

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

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.

Pour connecter S3 à CloudFront, créez une distribution CloudFront avec les valeurs suivantes :

Domaine d’origine: Point d’arrivée de votre site web statique dans le bucket S3. Vous pouvez trouver votre point de terminaison dans les Propriétés > Hébergement de site web statique de votre bucket S3. Vous pouvez également sélectionner votre bucket S3 et cliquer sur l’appel pour remplacer l’adresse de votre bucket par le point de terminaison statique de votre bucket.
Politique de protocole de visualisation: « Redirect to HTTPS » (Redirection vers HTTPS)

Cette configuration servira votre site en utilisant le réseau CDN Cloudfront. Vous pouvez trouver l’URL de votre distribution CloudFront dans les Distributions > Nom de domaine du bucket.

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.

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>"
          ]
      }
  ]
}

Créez un nouvel utilisateur IAM et attachez la règle à l’utilisateur. Cela fournira votre AWS_SECRET_ACCESS_KEY et AWS_ACCESS_KEY_ID.

Ajoutez cet exemple de flux de travail à votre référentiel à l’adresse suivante .github/workflows/deploy.yml et pousser-le sur GitHub. Vous devrez ajouter AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, BUCKET_ID, et DISTRIBUTION_ID en tant que “secrets” dans votre dépôt sur GitHub dans Settings > Secrets > Actions. Cliquez sur New repository secret pour ajouter chacun d’entre eux.

name: Déployer le site web

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - 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: Installation des modules
        run: npm ci
      - name: Construction de l'application
        run: npm run build
      - name: Déploiement sur S3
        run: aws s3 sync --delete ./dist/ s3://${{ secrets.BUCKET_ID }}
      - name: Création d'une invalidation CloudFront
        run: aws cloudfront create-invalidation --distribution-id ${{ secrets.DISTRIBUTION_ID }} --paths "/*"