Implemente Astro en AWS Elasic Beanstalk: 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 Elasic Beanstalk: una guía paso a paso

Rishi Raj Jain
Deploy Astro to AWS Elasic Beanstalk

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

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 debe ejecutarse en localhost:4321. A continuación, ejecute el siguiente comando para instalar las bibliotecas y los paquetes necesarios para crear la aplicación:

Terminal window
npm install dotenv
npm install -D prepend-file

Las bibliotecas instaladas incluyen:

  • dotenv: una biblioteca para manejar variables de entorno

Las bibliotecas específicas de desarrollo incluyen:

  • prepend-file: una biblioteca para anteponer datos a un archivo

Primeros pasos con el adaptador Nodejs para Astro

Antes de implementar su proyecto Astro, necesita instalar el adaptador @astrojs/node. Ejecute el siguiente comando:

Terminal window
npm install @astrojs/node

Las bibliotecas instaladas incluyen:

  • @astrojs/node: Un adaptador que prepara los sitios web de Astro para ejecutarse como servidor Nodejs

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

astro.config.mjs
import node from '@astrojs/node'; // [!code ++] // [!code focus]
import { defineConfig } from 'astro/config';
// https://astro.build/config
export default defineConfig({
output: "server", // [!code ++] // [!code focus]
adapter: node({ // [!code ++] // [!code focus]
mode: "standalone" // [!code ++] // [!code focus]
}), // [!code ++] // [!code focus]
});

Las adiciones hacen lo siguiente:

  • Importa la exportación predeterminada de @astrojs/node
  • 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 zipmjs en la raíz del repositorio con el siguiente código:

zip.mjs
import zl from "zip-lib"
import { join } from "node:path"
import { sync as prependSync } from "prepend-file"
const zip = new zl.Zip()
prependSync(join("dist", "server", "entry.mjs"), `import 'dotenv/config'\n`)
zip.addFolder("./dist", "dist")
zip.addFile("./package.json", "package.json")
zip.addFile("./tsconfig.json", "tsconfig.json")
zip.addFolder("./node_modules", "node_modules")
zip.archive(`./deployment_${Math.random().toString()}.zip`)
console.log('Zipped!')

El código anterior hace lo siguiente:

  • Importa dotenv/config en dist/server/entrymjs para cargar todas las variables de entorno en el alcance, haciéndolas accesibles a través del objeto processenv
  • Crea un zip con los siguientes archivos y carpetas:
    • dist: contiene los activos necesarios del lado estático y del servidor
    • node_modules: colección de dependencias instaladas
    • tsconfigjson: contiene alias de ruta
    • packagejson: utilizado por AWS Elastic Beanstalk para ejecutar el comando npm run start

Ahora, ejecute el siguiente comando para generar un archivo zip que contenga activos estáticos, un paquete del lado del servidor y packagejson:

Terminal window
npm run build && node zip.mjs

Una vez que se complete, verá un archivo zip con el nombre que comienza con deployment_. Utilizará este zip para implementar su aplicación en AWS Elastic Beanstalk. Comencemos con la configuración de los roles de IAM necesarios para implementar una aplicación en AWS Elastic. tallo de habichuelas

Configure sus roles de IAM

Grab Deployment URL in AWS Amplify
  • Seleccione Servicio AWS y elija Elastic Beanstalk como servicio o caso de uso.
Grab Deployment URL in AWS Amplify
  • Siga el conjunto de permisos predeterminado y haga clic en Siguiente
Grab Deployment URL in AWS Amplify
  • Ingrese aws-elasticbeanstalk-ec2-role como Nombre del rol
Grab Deployment URL in AWS Amplify
  • Vuelva a la consola de IAM y haga clic en Crear rolGrab Deployment URL in AWS Amplify

  • Seleccione Servicio AWS y elija EC2 como servicio o caso de uso.

Grab Deployment URL in AWS Amplify
  • Filtre el gran conjunto de políticas de permisos, escriba AWSElasticBeanstalk, seleccione lo siguiente:

    • AWSElasticBeanstalkMulticontenedorDocker
    • AWSElasticBeanstalkWebTier
    • AWSElasticBeanstalkWorkerTier

Luego, haga clic en Siguiente

Grab Deployment URL in AWS Amplify
  • Ingrese ec2-roles como Nombre del rol
Grab Deployment URL in AWS Amplify

y ya ha terminado con la configuración de roles de IAM para su cuenta. Pasemos a implementar su aplicación Astro en AWS Elastic Beanstalk.

Implementar en AWS Elastic Beanstalk

El código ahora está listo para implementarse en AWS Elasic Beanstalk. 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 control de AWS Elasic Beanstalk y haga clic en Crear aplicación en Comenzar en la sección

AWS Elastic Beanstalk
  • Dale a la aplicación un nombre de tu elección.
Configure AWS Elastic Beanstalk application
  • Seleccione Nodejs como la plataforma que va a utilizar y haga clic en Siguiente
Select platform in AWS Elastic Beanstalk
  • Seleccione “Usar un rol de servicio existente” para usar el “aws-elasticbeanstalk-ec2-role” y los “ec2-roles” que creó anteriormente y haga clic en “Siguiente”.
Select service role in AWS Elastic Beanstalk
  • Seleccione la VPC predeterminada, luego habilite la dirección IP pública y verifique todas las subredes
Select VPC in AWS Elastic Beanstalk
  • Desplácese hacia abajo hasta la sección Grupos de seguridad EC2 y use el predeterminado
Select Security Group in AWS Elastic Beanstalk
  • Desplácese hacia abajo hasta la sección Propiedades del entorno y agregue un par clave-valor para usarlo como variable de entorno.
Environment Variables in AWS Elastic Beanstalk
  • Digamos que la variable de entorno a la que se accederá como processenvSERVER_VARIABLE es SERVER_VARIABLE y su valor es TEST
Add Environment Variables in AWS Elastic Beanstalk
  • Espere a que la aplicación se active y luego haga clic en el botón “Cargar e implementar” en la esquina superior derecha.
Working AWS Elastic Beanstalk Application
  • Haga clic en “Elegir archivo”, seleccione el archivo zip que creó anteriormente y haga clic en “Implementar”.
Upload the zip in AWS Elastic Beanstalk
  • Espere a que la aplicación informe que su “Salud” es Ok. Una vez que todo esté bien, haga clic en la URL debajo de “Dominio” para ver su aplicación Astro en acción.
Open the Assigned Domain in AWS Elastic Beanstalk

Conclusión

¡Hurra! Ahora tiene un proyecto Astro que se implementa en AWS Elasic Beanstalk

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