Gatsby, disponible en el edge en menos de dos minutos con Fastly
¿Sabías que, gracias a Fastly, puedes ofrecer sitios estáticos desde el edge? Te explicamos cómo publicar un sitio de Gatsby en Compute@Edge de Fastly, en menos de dos minutos y totalmente gratis.
Pongámonos en contexto
¿Qué es Gatsby y por qué te conviene usarlo en Compute@Edge?
Gatsby es un marco de trabajo de código abierto que permite crear sitios web mediante React. Gatsby y, en general, el enfoque de Jamstack, presentan ventajas en varios aspectos, como el rendimiento, la escalabilidad y la seguridad.
Con Compute@Edge, puedes desplegar y ejecutar lógica de cualquier aplicación o servicio del backend en la plataforma del edge de Fastly. Así, estarás aprovechando la velocidad la informática sin servidores, que distribuye contenidos todavía más cerca del usuario final y no sufre de arranques en frío ni atrasos por trayectos de ida y vuelta.
Al desplegar un sitio de Gatsby (o de cualquier otro tipo) en Compute@Edge, tus usuarios finales contarán con numerosas funcionalidades enormemente útiles, 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 gratuita;
instalar la CLI de Fastly y crear un token de autenticación válido.
En primer lugar, ejecuta npm init gatsby en el terminal, lo cual te llevará a un diálogo interactivo con opciones para dar nombre a tu sitio, indicar la carpeta que haya que crear, escoger entre JavaScript o TypeScript, etc.
A continuación, navega a tu nuevo proyecto ejecutando cd [nombre-de-tu-proyecto]. Para este ejemplo, yo ejecuto cd gatsby-on-compute. Debo decir que en esta entrada no me explayaré con Gatsby, pero si te interesa saber más acerca de su mecánica, consulta su propio tutorial.
Ahora que ya te encuentras en el directorio de tu proyecto, lánzate a crear el sitio ejecutando npm run build, lo cual generará una carpeta ./public folder con todos tus archivos estáticos creados, como pueden ser HTML, CSS, Vanilla JS y las imágenes.
Ahora que ya tenemos la compilación del proyecto, ejecuta npx @fastly/compute-js-static-publish --public-dir=./public --service-id="". Este código utiliza el publicador estático para JavaScript de Fastly para generar una aplicación de Compute@Edge en un nuevo directorio que se encuentra en ./compute-js, y también dirige a tu compilación al mencionar —public-dir=./public. Si te fijas en el nuevo archivo fastly.toml que se ha creado, verás que el service_id está configurado como ””. Si ya cuentas con un servicio de Compute que quieres usar, ahí puedes introducir el identificador. En caso contrario, deja la cadena vacía y la CLI de Fastly creará un nuevo servicio por ti y rellenará la cadena como por arte de magia.
Acto seguido, pasemos a cd ./compute-js y run fastly compute publish, que ejecutarán la compilación y presentarán un mensaje interactivo para que crees un nuevo servicio, cambies el dominio aleatorio predeterminado y añadas un backend (si hace falta). Con el publicador estático no hace falta usar ni configurar ningún backend, así que puedes aceptar los valores por defecto y listo.
Una vez creado el servicio y el dominio, cargado el paquete y activada la versión, ¡ya lo tienes en marcha! Puedes ver o gestionar el servicio que se acaba de crear con los enlaces que recibirás. Aquí verás el presente sitio en vivo.
Si lo que quieres es publicar en Compute@Edge con otros marcos de frontend, no te pierdas los próximos artículos.
