Fastly lleva a Astro al edge en un par de minutos

Por si no lo sabes, Fastly te permite distribuir sitios estáticos fácilmente desde el edge. En este artículo aprenderás a publicar un sitio de Astro en Compute de Fastly en un par de minutos y sin ningún coste.

Contexto

¿Qué es Astro y por qué te conviene usarlo en Compute? 

Astro es un marco de código abierto, independiente de la IU, que te permite crear rápidamente sitios web centrados en el contenido. El uso de Astro y del enfoque Jamstack en general ofrece numerosas ventajas en términos de rendimiento, escalabilidad y seguridad.

Con Compute, puedes desplegar y ejecutar lógica para cualquier aplicación o servicio de backend en la plataforma de Fastly en el edge. Así, puedes acercar a los usuarios finales todas las virtudes de la informática sin servidores, sin arranques en frío ni retrasos por trayectos de ida y vuelta. Y todo, a la velocidad del rayo.

Al desplegar un sitio de Astro (o de cualquier otro tipo) en Compute, podrás ofrecer a tus usuarios finales numerosas funcionalidades increíbles, como la localización instantánea de contenido, sin tener que gestionar la infraestructura subyacente. 

Primeros pasos

Antes que nada, es necesario cumplir los siguientes requisitos:

• Tener instalada la versión Node 16 (o una posterior) con NPM en tu ordenador.

• Crear una cuenta de Fastly.

• Instalar la CLI de Fastly y crear un token de autenticación válido.

En primer lugar, ejecuta npm create astro@latest en tu terminal. Se abrirá una ventana interactiva con opciones para especificar la carpeta que quieres crear, la plantilla que vas a usar, la configuración de TypeScript, etc.

Luego, ejecuta cd [your-project-name] para ir a tu nuevo proyecto. En este ejemplo, ejecuto cd astro-on-compute. (Ahora no voy a entrar en detalles sobre Astro, pero si quieres saber cómo funciona, echa un vistazo a su tutorial).

Ahora, ejecuta «npm run build» desde el directorio del proyecto para crear el sitio. De este modo, se creará una carpeta ./dist con todos los archivos estáticos que se han generado (por ejemplo, HTML, CSS, JavaScript puro e imágenes). 

Ahora que ya has finalizado la compilación del proyecto, ejecuta npx @fastly/compute-js-static-publish --public-dir=./dist --service-id="", que utiliza el publicador de archivos estáticos de JavaScript de Fastly para generar una aplicación de Compute en un nuevo directorio ubicado en ./compute-js. También apunta a tu compilación mediante —public-dir=./dist. Si echas un vistazo al archivo fastly.toml recién creado, verás que el valor de service_id es ””. Aquí es donde puedes insertar el ID de un servicio de computación que desees usar, en caso de que ya dispongas de uno. Si no lo tienes, déjalo como una cadena vacía y la CLI de Fastly creará un servicio nuevo y lo insertará ahí como por arte de magia. ✨

A continuación, escribe cd ./compute-js y ejecuta fastly compute publish. Se ejecutará la compilación y se abrirá una ventana interactiva donde podrás crear un nuevo servicio, cambiar el dominio predeterminado e incluso añadir un backend, si es necesario. Con el publicador de archivos estáticos, ya no tendrás que usar ni configurar un backend, así que puedes aceptar sin más los valores predeterminados.

En cuanto se cree el servicio y el dominio, se cargue el paquete y se active la versión, ya estará todo listo. Para ver el servicio recién creado o gestionarlo, usa los enlaces. Si quieres verlo en vivo, haz clic aquí. 👀

Si lo que quieres es publicar en Compute con otros marcos de frontend, no te pierdas los próximos artículos.