Compilación e implementación en Azure Static Web Apps
Hasta este momento nos hemos centrado en la creación de la aplicación de Gatsby mediante React, GraphQL y complementos. El paso siguiente, una vez que haya terminado de crear la aplicación, consiste en es compilarla. Después, podrá realizar la implementación en cualquier servidor web o servicio de hospedaje que pueda servir archivos estáticos.
Compilación de la aplicación
La herramienta de línea de comandos de Gatsby proporciona un comando para compilar su proyecto a fin de crear algo que se pueda implementar en cualquier lugar que quiera. La compilación se compone de HTML, JavaScript, CSS y los recursos adicionales que se hayan incluido.
Creación de la compilación
Gatsby ejecuta el compilador React subyacente, por lo que cuando genera la compilación, realiza muchas cosas. Compila el código de React mediante el traslado de JSX a JavaScript y HTML. También extrae todo el código de JavaScript y lo coloca en un conjunto de agrupaciones. Cada agrupación se optimiza, lo que significa que se quita el espacio en blanco, se cambia el nombre de las variables y las expresiones están optimizadas para la velocidad. Los estilos pasan por un proceso similar. Si se ha elegido una biblioteca como LESS, SCSS o Stylus para CSS, habrá un paso preliminar en el que se va a compilar CSS desde un lenguaje general a CSS. No es necesario realizar ninguna acción adicional para implementar los archivos en este momento. Es simplemente un conjunto de archivos estáticos que se pueden hospedar desde cualquier servidor web que pueda servir archivos.
Implementación de la compilación
Hay muchas tecnologías y servicios capaces de hospedar aplicaciones estáticas. A fin de cuentas, solo es HTML, CSS y JavaScript, y se puede hospedar en la mayoría de los servicios web que existen. En este tutorial, implementaremos en Static Web Apps, un servicio de Azure que se especializa en hospedar aplicaciones estáticas como las compiladas con Gatsby.
Azure Static Web Apps
Static Web Apps es un servicio de Azure que permite tomar algunos archivos estáticos y servirlos desde la nube. Lo que se implementa no es un paquete de implementación, sino un conjunto de archivos estáticos. Se trata de una buena opción para Gatsby, ya que lo que Gatsby termina generando a partir de una compilación son archivos estáticos.
Hablando de compilación, en realidad el servicio realiza el paso de compilación, por lo que no es necesario compilar nada por adelantado. Para ello, busca el comando build en el elemento package.json del proyecto Gatsby. Lo único que se debe hacer es colocar el proyecto en un repositorio de GitHub.
Actualmente el código se encuentra en un directorio de la máquina, por lo que se tendrán que realizar algunas acciones para implementar Azure:
Crear un repositorio de GitHub e insertarlo: Gatsby crea un repositorio de Git, cuyos cambios deberán enviarse a GitHub.
Crear una instancia de Azure Static Web Apps: cuando use Azure Portal para crear una instancia de Azure Static Web Apps, tendrá que proporcionar la dirección URL del repositorio de GitHub y el nombre del subdirectorio en el que se encuentran los archivos estáticos en el proyecto. En el caso de Gatsby, este directorio se denomina
public/.