Despliega tu proyecto de Astro en AWS

AWS es una plataforma integral de alojamiento, que puede ser usada para desplegar un proyecto de Astro.

Desplegar tu proyecto en AWS requiere el uso de la consola de AWS. (La mayoría de estas acciones también se pueden realizar mediante el CLI de AWS). Esta guía te indicará los pasos a seguir para desplegar tu proyecto en AWS, comenzando con el método más básico. Luego, agregarás servicios adicionales para mejorar la rentabilidad y el rendimiento.

AWS Amplify es un conjunto de herramientas que permiten a los desarrolladores web y mobile crear aplicaciones completas en AWS de manera rápida y fácil.

1. Crea un nuevo proyecto en Amplify.

2. Conecta tu repositorio a Amplify.

3. Modifica el directorio de salida de compilación baseDirectory a /dist.

   version: 1
   frontend:
     phases:
       preBuild:
         # ¿No usas npm? Cambia `npm ci` por `yarn install` o `pnpm i`
         commands:
           - npm ci
       build:
         commands:
           - npm run build
     artifacts:
       baseDirectory: /dist
       files:
         - '**/*'
     cache:
       paths:
         - node_modules/**/*

   Copied!

Amplify desplegará automáticamente tu proyecto y lo actualizará al subir los cambios a tu repositorio.

S3 es el punto de partida de cualquier aplicación. Es donde se almacenan los archivos de tu proyecto. S3 cobra por el almacenamiento de archivos y la cantidad de solicitudes a estos archivos. Puedes encontrar más información sobre S3 en la documentación de AWS.

1. Crea un bucket en S3 con el nombre de tu proyecto.

2. Desactiva “Block all public access”. De forma predeterminada, AWS establece a todos los buckets como privados. Para hacerlo público, debes desmarcar la casilla de verificación “Block public access” en las propiedades del bucket.

3. Carga los archivos construidos ubicados en dist a S3. Puedes hacerlo manualmente desde la consola o usar la CLI de AWS. Si usas la CLI, puedes usar el siguiente comando después de autenticarte en AWS:

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

   Copied!

4. Actualiza la política del bucket para permitir acceso público. Puedes encontrar esta configuración en Permissions > Bucket policy del bucket.

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

   Copied!

5. Habilita el alojamiento de sitios web para tu bucket. Puedes encontrar esta configuración en Settings > Static website hosting del bucket. Establece el documento index a index.html y el documento error a 404.html. Finalmente, puedes encontrar la URL de tu nuevo sitio web en Settings > Static website hosting del bucket.

CloudFront es un servicio web que proporciona capacidades de red de entrega de contenido (CDN). Se utiliza para almacenar en caché el contenido de un servidor web y distribuirlo a los usuarios finales. CloudFront cobra por la cantidad de datos transferidos. Agregar CloudFront a tu bucket S3 es más rentable y proporciona una entrega más rápida.

Usaremos CloudFront para envolver nuestro S3 bucket para servir los archivos de nuestro proyecto usando la red CDN global de Amazon. Esto reducirá el costo de servir los archivos de tu proyecto y aumentará el rendimiento de tu sitio.

1. Crea un bucket en S3 con el nombre de tu proyecto.

2. Carga los archivos construidos ubicados en dist a S3. Puedes hacerlo manualmente usando la consola o usar la CLI de AWS. Si usas la CLI, puedes usar el siguiente comando después de autenticarse en AWS:

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

   Copied!

3. Actualiza la política del bucket para permitir acceso a CloudFront. Puedes encontrar esta configuración en Permissions > Bucket policy del 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/*"
     }]
   }

   Copied!

1. Crea una distribución de CloudFront con los siguientes valores:
   • Origin domain: Tu bucket de S3
   • S3 bucket access: “Yes use OAI (bucket can restrict access to only CloudFront)”
   • Origin access identity: Create a new origin access identity
   • Viewer - Bucket policy: “No, I will update the bucket policy”
   • Viewer protocol policy: “Redirect to HTTPS”
   • Default root object: index.html

Esta configuración bloqueará el acceso al bucket de S3 desde la Internet pública y atenderá tu proyecto mediante la red CDN global. Puede encontrar la URL de la distribución de CloudFront en Distributions > Domain name del bucket.

Desafortunadamente, CloudFront no es compatible con enrutamiento de “subcarpetas/índices” de forma predeterminada. Para configurarlo, usaremos CloudFront Functions para interceptar la solicitud connectarla al objeto deseado en S3.

1. Crea una nueva CloudFront function con el siguiente fragmento de código. Puedes encontrar las CloudFront functions en CloudFront > Functions.

   function handler(event) {
     var request = event.request;
     var uri = request.uri;
   
     // Comprueba si al URI le falta el nombre del archivo.
     if (uri.endsWith('/')) {
       request.uri += 'index.html';
     } 
     // Compruebe si al URI le falta una extensión de archivo.
     else if (!uri.includes('.')) {
       request.uri += '/index.html';
     }
   
     return request;
   }

   Copied!

2. Adjunta la función a la distribución de CloudFront. Puedes encontrar esta opción en las asociaciones bajo Settings > Behaviors > Edit > Function de la distribución de CloudFront.

   • Viewer request - Function type: CloudFront Function.
   • Viewer request - Function ARN: Seleccione la función que creó en el paso anterior.

Hay muchas formas de configurar despliegue continuo en AWS. Una posibilidad si el código está alojado en GitHub es usar GitHub Actions que desplegará tu proyecto cada vez que hagas un push.

1. Crea una nueva política en tu cuenta de AWS utilizando IAM con los siguientes permisos. Esta política te permitirá cargar los nuevos archivos en tu bucket de S3 e invalidar los archivos antiguos de la distribución de CloudFront al desplegar.

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

   Copied!

2. Crea un nuevo usuario de IAM y adjunta la política al usuario. Esto te proporcionará el AWS_SECRET_ACCESS_KEY y el AWS_ACCESS_KEY_ID.

3. Agrega el siguiente workflow a tu repositorio en .github/workflows/deploy.yml y envíalo a GitHub. Deberás agregar AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, BUCKET_ID y DISTRIBUTION_ID como “secrets” a tu repositorio en GitHub en Settings > Secrets > Actions. Haz clic en New repository secret para agregar cada uno.

   name: Deploy Website
   
   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 ./dist/ s3://${{ secrets.BUCKET_ID }}
         - name: Create CloudFront invalidation
           run: aws cloudfront create-invalidation --distribution-id ${{ secrets.DISTRIBUTION_ID }} --paths "/*"

   Copied!