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
Sección titulada AWS AmplifyAWS 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/**/*
Amplify desplegará automáticamente tu proyecto y lo actualizará al subir los cambios a tu repositorio.
Alojando contenido estático en S3
Sección titulada Alojando contenido estático en S3S3 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.
-
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 a404.html
. Finalmente, puedes encontrar la URL de tu nuevo sitio web en Settings > Static website hosting del bucket.
S3 y CloudFront
Sección titulada S3 y CloudFrontCloudFront 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
Sección titulada Configuración de S3-
Crea un bucket en S3 con el nombre 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/*" }] }
Configuración de CloudFront
Sección titulada 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
Sección titulada Configuración de CloudFront functionsDesafortunadamente, 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.
Despliegue continuo con GitHub Actions
Sección titulada Despliegue continuo con GitHub ActionsHay 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", "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 elAWS_ACCESS_KEY_ID
. -
Agrega el siguiente workflow a tu repositorio en
.github/workflows/deploy.yml
y envíalo a GitHub. Deberás agregarAWS_ACCESS_KEY_ID
,AWS_SECRET_ACCESS_KEY
,BUCKET_ID
yDISTRIBUTION_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 "/*"