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:

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. 

gatsby blog image 1

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.

gatsby blog image 2

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.

Gatsby blog image 3

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

Jonathan Speek
Product Manager, Product Experience
Fecha de publicación:

3 min de lectura

Comparte esta entrada
Jonathan Speek
Product Manager, Product Experience

Jonathan es Product Manager de Fastly y se dedica a mejorar la experiencia de uso del producto. En su etapa anterior a Fastly, trabajó como Senior Software Engineer en Netlify, donde se ocupaba de la interfaz de usuario y el desarrollo del producto. Antes de dedicarse a la tecnología, Jonathan era intérprete de música clásica, y ha tocado en escenarios tan diversos como el Carnegie Hall, estadios de la NFL e incluso una balsa en el lago Míchigan.