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

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.

Crea un nuevo proyecto en Amplify.
Conecta tu repositorio a Amplify.

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

Usando pnpm, requerirá ajustes ligeramente diferentes para almacenar en caché el directorio del store de pnpm en lugar de node_modules. A continuación se muestra la configuración de compilación recomendada:

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 desplegará automáticamente tu proyecto y lo actualizará al subir los cambios a tu repositorio.

Alojando contenido estático en S3

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.

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

El nombre del bucket debe ser único globalmente. Recomendamos una combinación del nombre del proyecto y el dominio de tu proyecto.
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.
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
```

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

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.

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

S3 y 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 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.

Configuración de S3

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

El nombre del bucket debe ser único globalmente. Recomendamos una combinación del nombre del proyecto y el dominio de tu proyecto.
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
```
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/*"
  }]
}
```
No olvides reemplazar <CLOUDFRONT_OAI_ID> con el nombre de tu CloudFront Origin Access ID. Puedes encontrar el ID en CloudFront > Origin access identities después de configurar CloudFront.

Configuración de CloudFront

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.

Configuración de CloudFront functions

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.

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;
}

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.

Configuración de las páginas de error de CloudFront

Por defecto, S3 devuelve un error 404 cuando el archivo no se encuentra, y 403 cuando el archivo es privado. Esto hace que los visitantes vean una fea página de error XML en ambos casos.

Para solucionarlo, añade respuestas de error personalizadas en Settings > Error pages de tu distribución de CloudFront.

Crea una respuesta de error personalizada para errores 404 con los siguientes valores:
- HTTP error code: 404: Not Found
- Customize error response: Yes
- Response page path: /index.html
- HTTP response code: 200: OK
Crea una respuesta de error personalizada para errores 403 con los siguientes valores:
- HTTP error code: 403: Forbidden
- Customize error response: Yes
- Response page path: /index.html
- HTTP response code: 200: OK

Despliegue continuo con GitHub Actions

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.

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",
              "s3:DeleteObject",
              "cloudfront:CreateInvalidation"
          ],
          "Resource": [
              "<DISTRIBUTION_ARN>",
              "arn:aws:s3:::<BUCKET_NAME>/*",
              "arn:aws:s3:::<BUCKET_NAME>"
          ]
      }
  ]
}

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.

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