---
title: "Implemente Astro en AWS Amplify"
description: "Cómo implementar sus sitios web Astro Server-Side Rendered (SSR) en AWS Amplify."
source: "https://www.launchfa.st/es/blog/deploy-astro-aws-amplify"
author: "Rishi Raj Jain"
created_at: 2024-03-28T00:00:00.000Z
---
> **Site index for agents**
> Fetch https://www.launchfa.st/llms.txt to discover every page on this site.
> Every page is also available as Markdown by appending `.md` to its URL.
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.
## Tabla de contenido
- [Requisitos previos](#requisitos previos)
- [Crear una nueva aplicación Astro](#crea-una-nueva-aplicación-astro)
- [Introducción al adaptador AWS Amplify para Astro](#empezando-con-el-adaptador-aws-amplify-para-astro)
- [Implementar en AWS Amplify](#deploy-to-aws-amplify)
- [Conclusión](#conclusión)
## Requisitos previos
Necesitará lo siguiente:
- [Nodejs 18](https://nodejs.org/en/blog/announcements/v20-release-announce) o posterior
- Una cuenta [AWS](https://aws.amazon.com/free)
## Crea una nueva aplicación Astro
Comencemos creando un nuevo proyecto Astro. Abra su terminal y ejecute el siguiente comando:
```bash
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
- `Sí` cuando se le pregunte si planea escribir Typecript
- `Estricto` cuando se le pregunta qué tan estricto debe ser Typecript.
- `Sí` cuando se le solicita instalar dependencias
- `Sí` cuando se le solicita inicializar un repositorio de git
Una vez hecho esto, puede ir al directorio del proyecto e iniciar la aplicación:
```bash
cd my-app
npm run dev
```
La aplicación debería estar ejecutándose en [localhost:4321](http://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:
```bash
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:
```bash
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:
```tsx
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:
```yml
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**
- Selecciona **GitHub** como fuente de tu repositorio Git.
- Vincula el nuevo proyecto al repositorio de GitHub que acabas de crear.
- Asigne un nombre a su proyecto y haga clic en **Configuración avanzada**
- 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.
- Haga clic en **Guardar e implementar** para implementar su sitio web.
- Obtenga la URL de implementación bajo el título **Dominio** en la información de compilación exitosa.
## 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](https://twitter.com/direct_messages/create/rishi_raj_jain_)