Implemente Astro en AWS Amplify: una guía paso a paso

Black Friday: Enjoy a 25% discount on the starter kits. Use code BLACKFRIDAY2024 at checkout.

LaunchFast Logo LaunchFast

Implemente Astro en AWS Amplify: una guía paso a paso

Rishi Raj Jain
Deploy Astro to AWS Amplify

En esta guía, aprenderá cómo implementar un proyecto Astro SSR en AWS Amplify. Pasará por el proceso de configurar un nuevo proyecto Astro, habilitar la representación del lado del servidor mediante el adaptador AWS Amplify y, finalmente, implementarlo en AWS Amplify.

Sponsored AICardify - AI-generated greeting cards

Generate AI Powered Greeting Cards For Every Occasion

Tabla de contenido

Requisitos previos

Necesitará lo siguiente:

Crea una nueva aplicación Astro

Comencemos creando un nuevo proyecto Astro. Abra su terminal y ejecute el siguiente comando:

Terminal window
npm create astro@latest my-app

npm create astro es la forma recomendada de desarrollar rápidamente un proyecto Astro

Cuando se le solicite, elija:

  • Empty cuando se le pregunta cómo iniciar el nuevo proyecto
  • cuando se le pregunte si planea escribir Typecript
  • Estricto cuando se le pregunta qué tan estricto debe ser Typecript.
  • cuando se le solicita instalar dependencias
  • cuando se le solicita inicializar un repositorio de git

Una vez hecho esto, puede ir al directorio del proyecto e iniciar la aplicación:

Terminal window
cd my-app
npm run dev

La aplicación debería estar ejecutándose en localhost:4321

A continuación, en su primera ventana de terminal, ejecute el siguiente comando para instalar las bibliotecas y paquetes necesarios para crear la aplicación:

Terminal window
npm install dotenv

Las bibliotecas instaladas incluyen:

  • dotenv: una biblioteca para manejar variables de entorno

Introducción al adaptador AWS Amplify para Astro

Antes de implementar su proyecto Astro, necesita instalar el adaptador astro-aws-amplify. Esto se hace fácilmente a través de Astro CLI:

Terminal window
npm install astro-aws-amplify

Las bibliotecas instaladas incluyen:

  • astro-aws-amplify: un adaptador que prepara los sitios web de Astro para su implementación en AWS Amplify

Una vez que el adaptador esté instalado, deberá agregarlo a su archivo astroconfigmjs. Abra el archivo y agregue el siguiente código:

import { defineConfig } from 'astro/config';
import awsAmplify from 'astro-aws-amplify'; // [!code ++]
// https://astro.build/config
export default defineConfig({
output: "server", // [!code ++]
adapter: awsAmplify(), // [!code ++]
});

Las adiciones hacen lo siguiente:

  • Importa la exportación predeterminada de astro-aws-amplify
  • Utiliza la importación anterior como “adaptador” de su aplicación Astro
  • Establece salida en servidor para habilitar la salida compatible con la representación del lado del servidor

Luego, cree un amplifyyml en la raíz del repositorio con el siguiente código:

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

El código anterior hace lo siguiente:

  • Utiliza comandos preBuild para instalar las dependencias de tu proyecto Astro
  • Utiliza comandos build para:
    • Almacene todas las variables de entorno en el archivo env en la raíz del proyecto
    • Construye tu aplicación Astro
    • Mueva el directorio node_modules y el archivo env al directorio de cálculo de Amplify

Implementar en AWS Amplify

El código ahora está listo para implementarse en AWS Amplify. Utilice los siguientes pasos para implementarlo:

  • Comience creando un repositorio de GitHub que contenga el código de su aplicación.

  • Luego, navegue hasta el panel de AWS Amplify y haga clic en Comenzar en la sección Alojar su aplicación web

Host your web app in AWS Amplify
  • Selecciona GitHub como fuente de tu repositorio Git.
GitHub as code source in AWS Amplify
  • Vincula el nuevo proyecto al repositorio de GitHub que acabas de crear.
Link Repo in AWS Amplify
  • Asigne un nombre a su proyecto y haga clic en Configuración avanzada
Name the project in AWS Amplify
  • En Configuración avanzada, actualice las Variables de entorno para que coincidan con las de su archivo env local y PORT como 3000. Haga clic en Siguiente para continuar.
Add Environment Variables in AWS Amplify
  • Haga clic en Guardar e implementar para implementar su sitio web.
Deploy to AWS Amplify
  • Obtenga la URL de implementación bajo el título Dominio en la información de compilación exitosa.
Grab Deployment URL in AWS Amplify

Conclusión

¡Hurra! Ahora tiene un proyecto Astro que se implementa automáticamente en AWS Amplify al presionar Git.

Si tiene alguna pregunta o comentario, no dude en comunicarse conmigo en Twitter

Learn More Autenticación de Benutzern en Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung
Autenticación de Benutzern en Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung November 24, 2024
Astro vs.Next.js: Auswahl de los mejores frameworks en enero de 2024
Astro vs.Next.js: Auswahl de los mejores frameworks en enero de 2024 October 30, 2024
6 funciones diferentes, el kit de inicio web completo incluye todas las funciones
6 funciones diferentes, el kit de inicio web completo incluye todas las funciones October 26, 2024