¿Qué es GatsbyJS?
Gatsby es un framework gratuito y de código abierto basado en React que ayuda a los desarrolladores a crear aplicaciones y sitios de alto rendimiento.
En la práctica, los desarrolladores crean plantillas de páginas fijas o páginas gestionadas por herramientas de gestión de contenido como WordPress o Contentful y, tras la ejecución de un proceso de build, el contenido se aplica en las plantillas y las páginas se generan.
Las principales ventajas que identificamos en los sitios que desarrollamos utilizando GatsbyJS son:
rendimiento inicial excelente, utilizando Gatsby Image, todas las imágenes ya están optimizadas, generando tamaños diversos y codificación en JPEG y WEBP. alta indexabilidad, ya que se generan páginas “index.html” para todas las urls del sitio con contenido listo para indexación. carga progresiva de las páginas subsecuentes; tras la carga de cualquier “index.html” del sitio, las demás páginas se generan a través de javascript de forma dinámica, creando una percepción de rendimiento incomparable. alta seguridad, a diferencia de los sitios en WordPress que son blancos continuos de ataques hacker, los sitios estáticos son naturalmente inmunes a ese tipo de vulnerabilidad. costo operativo bajísimo, porque posibilita la utilización de una combinación de servicios de Amazon Web Services sin costo fijo mensual. flexibilidad en las fuentes de datos, pudiendo utilizar un WordPress local para gestionar el contenido, Contentful o incluso archivos markdown en repositorios git.
Cómo Crear un Sitio Web Básico en Gatsby
Para crear un sitio web utilizando GatsbyJS es muy simple, basta con realizar la instalación del gatsby-cli, herramienta de build de gatsby, utilizando npm, conforme abajo:
npm install -g gatsby-cli
A continuación puedes crear el proyecto utilizando:
gatsby new gatsby-site
Este comando creará un clon de un proyecto gatsby a partir del modelo disponibilizado en https://github.com/gatsbyjs/gatsby-starter-default.git, luego ejecuta lo siguiente:
cd gatsby-site gatsby develop
Tras la ejecución de gatsby develop el motor de build de gatsby en modo desarrollo será activado y ya podrás visualizar un sitio en gatsby básico accediendo a la url http://localhost:8000, verás una imagen como la de abajo:
Para realizar la publicación de este proyecto en AWS, es necesario cumplir los siguientes requisitos:
Tener una cuenta en AWS (Amazon Web Services) Configurar un dominio usando Amazon Route53 Crear un certificado https gratuito usando AWS Certificate Manager Tras la realización de estos pasos, podrás crear la solución de CloudDog para gatsby, que provisionará toda la infraestructura necesaria para la ejecución del sitio.
Arquitectura GatsbyJS Básica
Al crear una instancia de la solución CloudDog, estarás creando un Stack de CloudFormation con los siguientes recursos:
Distribución de Amazon CloudFront configurada para resolver el /index.html de todas las urls del sitio, utilizando el Certificado HTTPS. Creación de un bucket para el contenido estático con una policy para permitir la lectura únicamente por la distribución de Amazon CloudFront. Creará el registro de hostname en Route53 para apuntar a la distribución de Amazon CloudFront. Creación de Role y Lambda Edge utilizado en la configuración de la Distribución. Al final, el diseño de la arquitectura queda conforme el diagrama de abajo:
Provisionar la Solución con Stack de CloudFormation
Para provisionar la solución con Stack de CloudFormation tienes 2 opciones:
Opción 1: provisionar haciendo clic en el enlace rápido
Puedes iniciar la creación de la solución accediendo al enlace rápido Crear Gatsby Website, que redirigirá a la página de creación; la información deberá completarse de forma similar a la Opción 2, a continuación, con la diferencia de que toda la información estará disponibilizada en la misma pantalla.
Opción 2: provisionar el stack paso a paso
Para provisionar el stack, primero debes asegurarte de estar conectado a la cuenta de aws y con la región us-east-1 (Norte de Virginia) seleccionada. Luego busca el servicio CloudFormation en el menú Servicios y selecciona la opción para crear el stack usando un template a partir de la Amazon S3 Url, con la ruta https://s3.amazonaws.com/clouddog-solutions-us-east-1/infra/static-website/gatsbyjs/simple-template.yml, luego selecciona Next.
A continuación configura el Stack Name y los demás parámetros con la información:
Stack Name: gatsby-site (o cualquier otro nombre siempre que no tenga caracteres especiales) Hosted Zone Name: Id de tu hosted zone en Route53; en nuestro ejemplo consta el Id de la Hosted Zone del dominio labs.clouddog.com.br (adáptalo al tuyo). Website Host Name: nombre completo del host en el que la solución será disponibilizada; en este caso deberá pertenecer al dominio, en el ejemplo gastby-website.labs.clouddog.com.br (adáptalo al tuyo). CertificateArn: es el código ARN del certificado creado para tu dominio. Conforme abajo:
A continuación selecciona la opción Next y en la última pantalla asegúrate de haber activado el checkbox del IAM conforme abajo:
Luego aparecerá la pantalla de creación del stack:
Al final de la creación del Stack será posible consultar todos los recursos provisionados por la solución:
También será posible consultar algunas salidas de este Stack. Estos valores son importantes para que sea posible realizar la carga del sitio gatsby y acceder al sitio publicado.
Copia el StaticBucketName para que sea utilizado dentro del proyecto en el proceso de deploy.
Cargar el Sitio en el Bucket de S3
De vuelta en el proyecto ejecuta el comando:
npm i gatsby-plugin-s3 –save-dev
Luego agrega la siguiente configuración en el archivo gatsby-config.js
Para facilitar los procedimientos de deployment, también podrás incluir el script en el package.json conforme abajo:
"scripts": { "build": "gatsby build", "develop": "gatsby develop", "format": "prettier --write "**/*.{js,jsx,ts,tsx,json,md}"", "start": "npm run develop", "serve": "gatsby serve", "clean": "gatsby clean", "test": "echo "Write tests! -> https://gatsby.dev/unit-testing" && exit 1", "deploy": "gatsby-plugin-s3 deploy --yes" },Ejecuta el comando para realizar el build del sitio ya optimizando para el entorno de producción:
npm run build
Deberías ver una salida parecida a la de abajo:
Configura las credenciales de acceso de Amazon Web Services en tu terminal con tus datos:
AWS_ACCESS_KEY_ID=xxxx AWS_SECRET_ACCESS_KEY=xxxx
Luego ejecuta el deploy:
npm run deploy
Validación de la Solución
Tras el deploy ya podrás consultar el sitio en la url disponibilizada tras la creación del Stack en el parámetro AppHostUrl, que en nuestro ejemplo es el Resumen.
Para asegurarte de que salió todo bien y el rendimiento está dentro de lo esperado, puedes abrir la herramienta lighthouse dentro de Google Chrome y realizar el análisis de la página.
Resumen
En este post mostramos paso a paso cómo crear un proyecto simple usando GatsbyJS y cómo realizar la publicación del sitio en un Bucket de S3 y Amazon CloudFront, utilizando un template de AWS CloudFormation con todos los recursos preconfigurados.
