Implementación de un sitio de Gatsby en Azure Static Web Apps

En este artículo se muestra cómo crear e implementar una aplicación web de Gatsby en Azure Static Web Apps. El resultado final es un nuevo sitio de Static Web Apps (con las Acciones de GitHub asociadas) que le da control sobre cómo se compila y publica la aplicación.

En este tutorial, aprenderá a:

• Crear una aplicación de Gatsby
• Configurar un sitio de Azure Static Web Apps
• Implementar la aplicación de Gatsby en Azure

Si no tiene una suscripción a Azure, cree una cuenta gratuita de Azure antes de empezar.

Prerrequisitos

• Una cuenta de Azure con una suscripción activa. En caso de no tener una, puede crear una cuenta gratuita.
• Una cuenta de GitHub. En caso de no tener una, puede crear una cuenta gratuita.
• Un programa de instalación de Git instalado. Si no lo tiene, puede instalar Git.
• Node.js instalado.

Creación de una aplicación de Gatsby

Cree una aplicación de Gatsby mediante la interfaz de la línea de comandos (CLI) de Gatsby:

1. Abra un terminal.

2. Use la herramienta npx para crear una aplicación con la CLI de Gatsby. Esta operación puede tardar unos minutos.

   npx gatsby new static-web-app
   

3. Vaya a la aplicación recién creada.

   cd static-web-app
   

4. Inicialice un repositorio de Git.

   git init
   git add -A
   git commit -m "initial commit"
   

Nota

Si usa la versión más reciente de Gatsby, es posible que tenga que modificar package.json para que incluya "engines": { "node": ">=18.0.0" },

Inserción de la aplicación en GitHub

Debe tener un repositorio en GitHub para crear un recurso de Azure Static Web Apps.

1. Cree un repositorio de GitHub en blanco (no cree un archivo Léame) desde https://github.com/new, denominadogatsby-static-web-app.

2. A continuación, agregue el repositorio de GitHub que acaba de crear como remoto al repositorio local. Asegúrese de agregar el nombre de usuario de GitHub en lugar del marcador de posición <YOUR_USER_NAME> en el comando siguiente.

   git remote add origin https://github.com/<YOUR_USER_NAME>/gatsby-static-web-app
   

3. Inserte el repositorio local en GitHub.

   git push --set-upstream origin main
   

Implementación de la aplicación web

En los pasos siguientes se muestra cómo crear una aplicación de sitio estática e implementarla en un entorno de producción.

Creación de la aplicación

1. Vaya a Azure Portal.

2. Seleccione Crear un recurso

3. Busque Static Web Apps.

4. Seleccione Static Web Apps.

5. Seleccione Crear

6. En la pestaña Datos básicos, especifique los valores siguientes.

   Propiedad	Valor
   Suscripción	El nombre de la suscripción de Azure.
   Grupos de recursos	my-gatsby-group
   Nombre	my-gatsby-app
   Tipo de plan	Gratis
   Región para la API y los entornos de ensayo de Azure Functions	Seleccione la región más cercana a la suya.
   Origen	GitHub

7. Seleccione Iniciar sesión con GitHub y autentíquese con GitHub.

8. Escriba los siguientes valores de GitHub.

   Propiedad	Valor
   Organización	Seleccione la organización de GitHub que quiera.
   Repositorio	Seleccione gatsby-static-web-app.
   Rama	Seleccione main (principal).

   Nota

   Si no ve ningún repositorio, es posible que deba autorizar Azure Static Web Apps en GitHub. Vaya al repositorio de GitHub y, a continuación, a Configuración > Aplicaciones > Aplicaciones de OAuth autorizadas, seleccione Azure Static Web Apps y, después, Conceder. En el caso de los repositorios de la organización, debe ser propietario de la organización para conceder los permisos.

9. En la sección Detalles de la compilación, seleccione Gatsby en la lista desplegable Valores preestablecidos de compilación y conserve los valores predeterminados.

Revisar y crear

1. Seleccione el botón Revisar y crear para comprobar que todos los detalles sean correctos.

2. Seleccione Crear para comenzar la creación de la aplicación web estática de App Service y aprovisionar una instancia de Acciones de GitHub para la implementación.

3. Cuando finalice la implementación, seleccione Ir al recurso.

4. En la pantalla del recurso, seleccione el vínculo Dirección URL para abrir la aplicación implementada. Es posible que tenga que esperar un par de minutos para que se complete la instancia de Acciones de GitHub.

   

Limpieza de recursos

Si no va a seguir usando esta aplicación, puede eliminar el recurso de Azure Static Web Apps mediante los siguientes pasos:

1. Abra Azure Portal.
2. En la barra de búsqueda superior, busque la aplicación por el nombre que indicó anteriormente.
3. Haga clic en la aplicación.
4. Haga clic en el botón Eliminar.
5. Haga clic en Sí para confirmar la acción de eliminación.

Pasos siguientes

Agregar un dominio personalizado