Despliega tu sitio de Astro en AWS

AWS es una plataforma de alojamiento de aplicaciones web con todas las funciones que se puede utilizar para desplegar un sitio 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 utilizando la AWS CLI). Esta guía te guiará a través de los pasos para desplegar tu sitio en AWS utilizando AWS Amplify, alojamiento de sitios web estáticos en S3 y CloudFront.

AWS Amplify

AWS Amplify es un conjunto de herramientas y funciones diseñadas específicamente para permitir a los desarrolladores web frontend y móviles compilar aplicaciones fullstack de forma rápida y sencilla en AWS. Puedes desplegar tu proyecto de Astro como un sitio estático o como un sitio renderizado en el servidor.

Sitio estático

Tu proyecto de Astro es un sitio estático por defecto.

1. Crea un nuevo proyecto de Amplify Hosting.

2. Conecta tu repositorio a Amplify.

3. Modifica tus ajustes de compilación para que coincidan con el proceso de compilación de tu proyecto.

   npm

   version: 1
   frontend:
     phases:
       preBuild:
         commands:
           - npm ci
       build:
         commands:
           - npm run build
     artifacts:
       baseDirectory: /dist
       files:
         - '**/*'
     cache:
       paths:
         - node_modules/**/*

   pnpm

   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/**/*

   Yarn

   version: 1
   frontend:
     phases:
       preBuild:
         commands:
           - yarn install
       build:
         commands:
           - yarn build
     artifacts:
       baseDirectory: /dist
       files:
         - '**/*'
     cache:
       paths:
         - node_modules/**/*

Amplify desplegará automáticamente tu sitio web y lo actualizará cuando envíes un commit a tu repositorio.

Adaptador para el enrutamiento bajo demanda

Para poder desplegar tu proyecto como un sitio renderizado en el servidor, necesitarás utilizar el adaptador de AWS Amplify mantenido por la comunidad de terceros y realizar algunos cambios en tu configuración.

Primero, instala el adaptador de Amplify.

npm

npm install astro-aws-amplify

pnpm

pnpm add astro-aws-amplify

Yarn

yarn add astro-aws-amplify

Luego, en tu archivo astro.config.*, agrega el adaptador y establece la salida a server.

astro.config.mjs

import { defineConfig } from 'astro/config';
import awsAmplify from 'astro-aws-amplify';

export default defineConfig({
  // ...
  output: "server",
  adapter: awsAmplify(),
});

Una vez instalado el adaptador, puedes configurar tu proyecto de Amplify.

1. Crea un nuevo proyecto de Amplify Hosting.

2. Conecta tu repositorio a Amplify.

3. Modifica tus ajustes de compilación para que coincidan con el proceso de compilación del adaptador, ya sea editando los ajustes de compilación en la consola de AWS o agregando un archivo amplify.yaml en la raíz de tu proyecto.

   npm

   version: 1
   frontend:
     phases:
       preBuild:
         commands:
           - npm ci --cache .npm --prefer-offline
       build:
         commands:
           - npm run build
           - mv node_modules ./.amplify-hosting/compute/default
     artifacts:
       baseDirectory: .amplify-hosting
       files:
         - '**/*'
     cache:
       paths:
         - .npm/**/*

   pnpm

   version: 1
   frontend:
     phases:
       preBuild:
         commands:
           - npm i -g pnpm
           - pnpm config set store-dir .pnpm-store
           - pnpm i
       build:
         commands:
           - pnpm run build
           - mv node_modules ./.amplify-hosting/compute/default
     artifacts:
       baseDirectory: .amplify-hosting
       files:
         - '**/*'
     cache:
       paths:
         - .pnpm-store/**/*

   Yarn

   version: 1
   frontend:
     phases:
       preBuild:
         commands:
           - yarn install
       build:
         commands:
           - yarn build
           - mv node_modules ./.amplify-hosting/compute/default
     artifacts:
       baseDirectory: .amplify-hosting
       files:
         - '**/*'
     cache:
       paths:
         - node_modules/**/*

Amplify desplegará automáticamente tu sitio web y lo actualizará cuando envíes un commit a tu repositorio.

Consulta la guía de despliegue de Astro de AWS para obtener más información.

Alojamiento de sitios web estáticos en S3

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

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

   Consejo

   El nombre del bucket debe ser globalmente único. Recomendamos una combinación de tu nombre de proyecto y el nombre de dominio de tu sitio.

2. Desactiva “Block all public access” (Bloquear todo el acceso público). Por defecto, AWS configura todos los buckets para que sean privados. Para hacerlo público, debes desmarcar la casilla de verificación “Block public access” en las propiedades del bucket.

3. Sube tus archivos compilados ubicados en dist a S3. Puedes hacerlo manualmente en la consola o usar la AWS CLI. Si utilizas la AWS CLI, usa el siguiente comando después de autenticarte con tus credenciales de AWS:

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

4. Actualiza la política de tu bucket para permitir el acceso público. Puedes encontrar esta configuración en la sección Permissions > Bucket policy (Permisos > Política de bucket) del bucket.

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

   Precaución

   No olvides reemplazar <BUCKET_NAME> con el nombre de tu bucket.

5. Habilita el alojamiento de sitios web estáticos para tu bucket. Puedes encontrar esta configuración en la sección Properties > Static website hosting (Propiedades > Alojamiento de sitios web estáticos) del bucket. Establece tu documento de índice en index.html y tu documento de error en 404.html. Por último, puedes encontrar la URL de tu nuevo sitio web en la sección Properties > Static website hosting del bucket.

   Nota

   Si estás desplegando una aplicación de una sola página (SPA), establece tu documento de error en index.html.

S3 con CloudFront

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 de S3 es más rentable y proporciona una entrega más rápida.

Para conectar S3 con CloudFront, crea una distribución de CloudFront con los siguientes valores:

• Dominio de origen: El endpoint del sitio web estático de tu bucket de S3. Puedes encontrar tu endpoint en la sección Properties > Static website hosting de tu bucket de S3. Alternativamente, puedes seleccionar tu bucket de S3 y hacer clic en el mensaje emergente para reemplazar la dirección de tu bucket con el endpoint estático de tu bucket.
• Política de protocolo del visor: “Redirect to HTTPS” (Redirigir a HTTPS)

Esta configuración servirá tu sitio utilizando la red CDN de CloudFront. Puedes encontrar la URL de tu distribución de CloudFront en la sección Distributions > Domain name (Distribuciones > Nombre de dominio) del bucket.

Nota

Al conectar CloudFront a un endpoint de sitio web estático de S3, dependes de las políticas de bucket de S3 para el control de acceso. Consulta la sección Alojamiento de sitios web estáticos en S3 para obtener más información sobre las políticas de bucket.

Despliegue continuo con GitHub Actions

Hay muchas maneras de configurar el despliegue continuo para AWS. Una posibilidad para el código alojado en GitHub es utilizar GitHub Actions para desplegar tu sitio web cada vez que envíes un commit.

1. Crea una nueva política en tu cuenta de AWS utilizando IAM con los siguientes permisos. Esta política te permitirá subir archivos compilados a tu bucket de S3 e invalidar los archivos de distribución de CloudFront cuando envíes 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>"
             ]
         }
     ]
   }

   Precaución

   No olvides reemplazar <DISTRIBUTION_ARN> y <BUCKET_NAME>. Puedes encontrar el DISTRIBUTION_ARN en CloudFront > Distributions > Details (CloudFront > Distribuciones > Detalles).

2. Crea un nuevo usuario de IAM y asóciale la política. Esto te proporcionará tu AWS_SECRET_ACCESS_KEY y AWS_ACCESS_KEY_ID.

3. Agrega este flujo de trabajo de ejemplo 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” (secretos) en tu repositorio de GitHub en la sección Settings > Secrets > Actions. Haz clic en New repository secret (Nuevo secreto de repositorio) para agregar cada uno.

   name: Deploy Website
   
   on:
     push:
       branches:
         - main
   
   jobs:
     deploy:
       runs-on: ubuntu-latest
       steps:
         - name: Checkout
           uses: actions/checkout@v6
         - 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 "/*"

   Nota

   Tu BUCKET_ID es el nombre de tu bucket de S3. Tu DISTRIBUTION_ID es tu ID de distribución de CloudFront. Puedes encontrar tu ID de distribución de CloudFront en la sección CloudFront > Distributions > ID.

Recursos de la comunidad

• Desplegar Astro en AWS Amplify
• Desplegar Astro en AWS Elastic Beanstalk
• Desplegar Astro en Amazon ECS en AWS Fargate
• Resolución de problemas en despliegues de SSR en Amplify

Más guías de implementación

• 

  AWS

• 

  AWS a través de Flightcontrol

• 

  AWS a través de SST

• 

  Azion

• 

  Buddy

• 

  Cleavr

• 

  Clever Cloud

• 

  Cloudflare

• 

  CloudRay

• 

  Deno Deploy

• 

  DeployHQ

• 

  EdgeOne Pages

• 

  Firebase

• 

  Fleek

• 

  Fly.io

• 

  GitHub Pages

• 

  GitLab Pages

• 

  Google Cloud

• 

  Heroku

• 

  Hostinger

• 

  Microsoft Azure

• 

  Netlify

• 

  Railway

• 

  Render

• 

  Seenode

• 

  Sevalla

• 

  Stormkit

• 

  Surge

• 

  Vercel

• 

  Zeabur

• 

  Zephyr Cloud

• 

  Zerops