Cómo usar aplicaciones web estáticas de Azure para agregar roles de Azure

08:07 13/09/2021 | 1 Lượt xem

Use Azure Static Web Apps para agregar Azure Functions que proporcionan una API de sitio web. Cree estas API con aplicaciones web estáticas de Azure, Visual Code y GitHub.

Azure Functions está disponible en varios idiomas y tiene una comunidad de apoyo. Hoy le mostraremos cómo agregar una API usando una función de Azure, escrita en TypeScript, a una página HTML vanilla. Azure Role guarda los datos en Azure Table Storage.

Para configurar

Suponemos que hay una aplicación web estática de Azure configurada como se describe en la publicación anterior y lo ampliaremos. Si tenemos todos los requisitos previos anteriores, necesitaremos dos elementos adicionales, el Extensión de aplicaciones web estáticas de Azure a Visual Studio Code y una cuenta de almacenamiento de Azure.

Página web

Esta solución no usa un esquema para los datos y usa un formulario web estándar. Eso significa que podemos usar los campos que queramos. Publiquemos los datos en la función. Los bits esenciales son:

Hemos especificado un detector de eventos básico para el envío:

Restablecer el formulario muestra éxito.

Cuenta de almacenamiento de Azure

Crear una cuenta de almacenamiento de Azure es muy simple, simplemente inicie sesión en el portal de Azure y Crear cuenta de almacenamiento. Para una buena administración, utilice el mismo grupo de recursos y la misma región que la aplicación web base.

Ahora que tenemos una cuenta de almacenamiento, podemos crear una tabla, llamada ‘Solicitud’, para que nuestra aplicación la use:

Mientras está en Azure, en la pestaña Cuenta de almacenamiento, vaya a Seguridad + Red> Acceso y ‘Mostrar claves’. Haga una copia de una cadena de conexión. Puede poner esto en local.settings.json:

Función Azure

La extensión de la aplicación web de Azure para Visual Studio Code creará un rol de Azure predeterminado y todos los archivos y carpetas.

Presione F1 para abrir la paleta de comandos.

Seleccione Azure Static Web Apps: Create HTTP Role….

Seleccionamos el texto mecanografiado como nuestro idioma:

Así es como se ve la función predeterminada:

Reemplazémoslo con este:

Esta función es mínima, pero logra su propósito, que es insertar el contenido de la solicitud en la tabla utilizando el servicio de tabla. Este es un territorio familiar para cualquier usuario de nodo y npm, los paquetes deben instalarse y luego estar listos para la prueba. POST no puede proporcionarnos datos en el formato de objeto requerido, por lo que utilizamos el parseMultipartFormData función para crear una matriz que reducimos a un objeto con propiedades que corresponden a los campos del formulario y pasamos eso junto con una clave al servicio de tabla. Esto nos permite tener una función genérica que pasará todos los campos del formulario a la tabla sin necesidad de un esquema.

depuración

Obtener un rol de Azure para hacer lo que necesita puede requerir cierta depuración, afortunadamente, eso es fácil de lograr.

Seleccione la función de Azure en el código visual y presione F5, esto creará una sesión de depuración:

Funciones:

processForm: [GET,POST] http: // localhost: 7071 / api / processForm

Luego seleccione otra sesión de terminal y escriba:

Ahora puede depurar la función que es esencial para este tipo de trabajo.

Explorador de Azure Storage es una herramienta gratuita que nos permite administrar nuestros recursos de almacenamiento en la nube de Azure desde el escritorio, en un paquete muy conveniente.

Vea los datos ingresados ​​con Azure Storage Explorer:

Despliegue, desarrollo

Usamos el proyecto Azure Static Web Apps que creamos en la publicación anterior. Implemente la página web y el rol confirmando los cambios en Git y enviándolos a GitHub. Necesitamos actualizar el flujo de trabajo para implementar el rol. Edite el yaml del flujo de trabajo de GitHub. Busque la propiedad api_location y establezca el valor en “api”.

Entonces solo necesitamos agregar el AZURE_STORAGE_CONNECTION_STRING en Configuración> Configuración, guárdelo y estará listo para comenzar.

Si su configuración no es correcta, es posible que se devuelva un error 405 o 500. Use la interfaz web de Azure para verificar su implementación, tenga este aspecto:

Conclusión

Mostramos cómo extender esta aplicación web estática con API sin servidor con tecnología Azure Functions para encapsular los requisitos informáticos a través de puntos finales de API reutilizables con escalado dinámico según la demanda. Las aplicaciones web estáticas de Azure son una adición útil al kit de herramientas de los trabajadores web. Azure Functions amplía esta característica y ofrece algunas posibilidades interesantes. La conclusión principal es que Azure Functions es una forma rápida y relativamente sencilla de agregar funcionalidad de API a un sitio de aplicaciones web estáticas de Azure.

Related Posts

Agregar fondos a archivos PDF

Este artículo explicará cómo agregar un fondo a un PDF con Foxit PDF Editor. Para agregar un nuevo fondo, haga lo siguiente: 1. Abra un documento al que desee agregar un fondo y elija...

lên đầu trang