Desarrollo de una API de datos mediante Azure Static Web Apps

  • 7 minutos

Static Web Apps es un concepto en el diseño de sitios web que se ha vuelto popular. Consiste en contenido enviado directamente al explorador de un usuario que no requiere que se ejecute ningún código en el servidor. Static Web Apps se compone de HTML y CSS. También suele incluir código JavaScript que se ejecuta en el lado cliente, no en el servidor. Los desarrolladores web suelen encontrar que Static Web Apps:

  • Se puede desarrollar rápidamente con marcos como Bootstrap, Jekyll y AngularJS.
  • Es fácil de escalar porque no hay cambios de estado en el servidor.
  • Fomenta la separación entre el código de la interfaz de usuario y la funcionalidad de back-end.

Azure Static Web Apps es un servicio de Azure diseñado para facilitar el código e implementar Static Web Apps en Azure para producción. Azure Static Web Apps admite la implementación continua mediante la supervisión de un repositorio de código en GitHub o Azure DevOps. Al realizar un cambio en el código del sitio web e insertarlo en el repositorio, Azure Static Web Apps lo detecta, compila e implementa automáticamente el nuevo sitio en Azure. De forma inmediata, el cambio estará disponible para los usuarios.

Diagrama que muestra cómo Azure Static Web Apps facilita la implementación de aplicaciones web estáticas desde repositorios.

Como el generador de API de datos (DAB) se diseñó para funcionar sin problemas con Azure Static Web Apps, es fácil hospedar las API de base de datos en este servicio. Lo único que hay que hacer es usar el archivo de configuración para indicar a DAB sobre la instancia de Azure Static Web Apps e implementarlo en un repositorio. Azure Static Web Apps hospedará la API y los usuarios podrán empezar a llamar a sus métodos.

Creación de una aplicación web estática

Para empezar, vaya a Azure Portal y seleccione Crear un recurso. En la barra de búsqueda, escriba Static Web App. Cuando aparezca la tarjeta Aplicación web estática , selecciónela y, a continuación, seleccione Crear.

A continuación, elija la suscripción y seleccione un grupo de recursos existente o cree uno nuevo. En el cuadro de texto Nombre , escriba un nombre descriptivo para la aplicación. Debe seleccionar el tipo de plan. En el caso de los proyectos personales, puede usar el plan Gratis , mientras que para las aplicaciones de producción, se recomienda el plan Estándar .

Captura de pantalla que muestra cómo completar el asistente para crear una aplicación web estática en Azure Portal.

En Detalles de implementación, especifique el tipo de repositorio que contiene la aplicación. Es necesario iniciar sesión en GitHub o seleccionar el repositorio y la rama en Azure DevOps. Por último, revise la configuración seleccionando Revisar y crear y, a continuación, seleccione Crear para completar el proceso.

Crear un archivo de configuración del generador de API de datos

Para implementar la API de base de datos en Azure Static Web Apps, es necesario crear el archivo de configuración de DAB correctamente. Complete esta tarea con dos herramientas de línea de comandos:

  • swa: Use esta CLI para inicializar un nuevo archivo de configuración de DAB.
  • dab: Use esta CLI para agregar una o varias bases de datos al archivo.

Antes de empezar, clone el repositorio de GitHub en el equipo local o use GitHub Codespaces para abrir un símbolo del sistema en GitHub.

  1. Para inicializar el archivo de configuración de DAB en la carpeta raíz del repositorio, ejecute el siguiente comando.

    swa db init --database-type "<database-type>"

    Reemplace <database type> por el servidor de bases de datos. Por ejemplo: en caso de que la base de datos se hospede en Azure SQL Database, use mssql. Si estuviera en MySQL, use mysql.

  2. Para agregar una base de datos al archivo de configuración, ejecute el siguiente comando.

    dab add "<database-name>" --source "<schema>.<table>" --permissions "anonymous:*" -config "swa-db-connections/staticwebapp.database.config.json"

    Reemplace <database-name> por un nombre descriptivo y <schema>.<table> por el esquema y el nombre de tabla de la base de datos.

Estos pasos crean un archivo de configuración en el repositorio denominado swa-db-connections/staticwebapp.database.config.json. Revise este archivo antes de confirmar los cambios en el repositorio.

Configuración de la conexión a la base de datos

Para configurar la conexión a la base de datos en la aplicación web estática, comience abriendo la aplicación web estática en Azure Portal. Vaya a la sección Configuración y seleccione Conexión de base de datos. En Producción, elija vincular una base de datos existente. Seleccione el tipo de base de datos, el grupo de recursos y el nombre de la base de datos adecuados. Por último, elija el tipo de autenticación preferido y vincule la base de datos.

Nota:

Se recomienda usar una identidad administrada asignada por el sistema o una identidad administrada asignada por el usuario para autenticarse, ya que la cadena de conexión no incluye una clave de autorización.

Validación del acceso a la API

Para validar el acceso a la API, abra la aplicación web estática que creó en Azure Portal. Vaya a la sección Essentials y seleccione la dirección URL para examinar el sitio web. En la barra de direcciones del explorador, agregue /data-api a la dirección URL y presione Entrar.

Se debería ver una página que indique que el estado del contenedor de DAB es correcto. Para examinar las entidades de la base de datos, anexe /data-api/rest/ a la dirección URL. Con esto se envía una solicitud HTTP GET y se muestra la respuesta JSON.