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, usando AWS Amplify, S3 alojamiento de sitios web estáticos y CloudFront.

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 los ajustes de compilación para adaptarlos al proceso de compilación de tu proyecto.

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 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 utiliza 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 Properties > 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 Properties > 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.

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

Origin domain: El endpint del sitio web estático de tu bucket de S3. Puedes encontrar tu endpint en Properties > Static website hosting de tu bucket de S3. Alternativamente, puedes seleccionar tu bucket de S3 y hacer clic en la llamada para reemplazar la dirección de tu bucket con el endpint estático de tu bucket.
Viewer protocol policy: “Redirect to HTTPS”

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

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