Traer las propias funciones a Azure Static Web Apps

Azure Static Web Apps proporciona integración de API para permitirle crear aplicaciones web front-end que dependen de las API de back-end para los datos y los servicios. Las dos opciones de integración de API son: funciones administradas y traiga sus propios back-end. Para obtener más información sobre las diferencias entre estas opciones, consulte la información general.

En este artículo se muestra cómo vincular una aplicación de Azure Functions existente a un recurso de Azure Static Web Apps.

Nota:

La integración con Azure Functions requiere el plan Estándar de Static Web Apps.

La integración de back-end no se admite en entornos de solicitud de incorporación de cambios de Static Web Apps.

Requisitos previos

Para vincular una aplicación de funciones a la aplicación web estática, debe tener un recurso de Azure Functions existente y una aplicación web estática.

Resource	Descripción
Funciones de Azure	Si aún no tiene una, siga los pasos descritos en la guía Introducción a Azure Functions .
Aplicación web estática existente	Si aún no tiene una, siga los pasos de la guía de introducción para crear una aplicación web estática Sin plataforma.

Ejemplo

Considere una aplicación de Azure Functions existente que expone un punto de conexión a través de la siguiente ubicación.

https://my-functions-app.azurewebsites.net/api/getProducts

Una vez vinculado, puede acceder a ese mismo punto de conexión a través de la ruta de acceso api desde la aplicación web estática, como se indica en esta dirección URL de ejemplo.

https://red-sea-123.azurestaticapps.net/api/getProducts

Ambas direcciones URL de punto de conexión apuntan a la misma función. El punto de conexión de la aplicación de funciones debe tener el /api prefijo, ya que Static Web Apps coincide con las solicitudes realizadas en /api y proxies toda la ruta de acceso al recurso vinculado.

Vinculación de una aplicación de Azure Functions existente

Eliminación de funciones administradas del recurso de Static Web Apps (si está presente)

Antes de asociar una aplicación de Functions existente, primero debe ajustar la configuración de la aplicación web estática para quitar funciones administradas si tiene alguna.

1. Establezca el valor api_location en una cadena vacía ("") en el archivo de configuración del flujo de trabajo.

Vinculación de la aplicación de Azure Functions al recurso Static Web Apps

1. Abra la instancia de Static Web Apps en Azure Portal.

2. En el menú Configuración, seleccione API.

3. En la fila Producción, seleccione Vincular para abrir la ventana Vincular nuevo back-end.

   Escriba la siguiente configuración.

   Configuración	Valor
   Tipo de recurso back-end	Seleccionar Aplicación de función.
   Suscripción	Seleccione el nombre de su suscripción de Azure.
   Nombre del recurso	Seleccione el nombre de la aplicación Azure Functions.
   Ranura de back-end	Seleccione el nombre de ranura para la función de Azure.

4. Seleccione Vínculo.

La aplicación Azure Functions ahora está asignada a la ruta /api de la aplicación web estática.

Importante

Asegúrese de establecer el valor api_location en una cadena vacía ("") en el archivo de configuración del flujo de trabajo antes de vincular una aplicación de funciones existente. Además, las llamadas asumen que la aplicación de funciones externa conserva el prefijo de ruta api predeterminado. Muchas aplicaciones quitan este prefijo en host.json. Asegúrese de que el prefijo está en su en la configuración, ya que, de lo contrario, se producirá un error en la llamada.

Implementación

Usted es responsable de configurar un flujo de trabajo de implementación para la aplicación de Azure Functions.

Desvincular una aplicación de Azure Functions

Desvincular la aplicación de Functions de Static Web Apps

Para desvincular una aplicación de funciones de una aplicación web estática, siga estos pasos:

1. En Azure Portal, vaya a la aplicación web estática.

2. Seleccione APIs en el menú de navegación.

3. Busque el entorno que desea desvincular y seleccione el nombre de la aplicación de funciones.

4. Seleccione Unlink (Desvincular).

Cuando se completa el proceso de desvinculación, las solicitudes a las rutas que comienzan por /api ya no se envían a la aplicación de Azure Functions.

Nota:

Para evitar exponer accidentalmente la aplicación de funciones al tráfico anónimo, el proveedor de identidades creado por el proceso de vinculación no se elimina automáticamente. Puede eliminar el proveedor de identidades denominado Azure Static Web Apps (vinculado) de la configuración de autenticación de la aplicación de funciones.

Eliminación de la autenticación del recurso de Azure Functions

Para permitir que la aplicación de Azure Functions reciba tráfico anónimo, siga estos pasos para quitar el proveedor de identidades:

1. En Azure Portal, vaya al recurso de Azure Functions.

2. Seleccione Autenticación en el menú de navegación.

3. En la lista de proveedores de identidades, elimine el proveedor de identidades relacionado con el recurso Static Web Apps.

4. Seleccione Quitar autenticación para quitar la autenticación y permitir el tráfico anónimo al recurso de Azure Functions.

La aplicación de funciones ahora puede recibir tráfico anónimo.

Restricciones de seguridad

• Autenticación y autorización: si las directivas de autenticación y autorización aún no están configuradas en la aplicación de funciones existente, la aplicación web estática tendrá acceso exclusivo a la API. Para que la aplicación de funciones sea accesible para otras aplicaciones, agregue otro proveedor de identidades o cambie la configuración de seguridad para permitir el acceso no autenticado.

  Nota:

  Si habilita la autenticación y autorización en la aplicación de funciones vinculada, debe usar la versión 2 del proveedor de autenticación y autorización de Azure App Service.

• Accesibilidad pública requerida: una aplicación de funciones existente no debe aplicar las siguientes configuraciones de seguridad.

  • Restricción de la dirección IP de la aplicación de funciones.
  • Restricción del tráfico a través de vínculos privados o puntos de conexión de servicio.

• Claves de acceso de función: si la función requiere una clave de acceso, debe proporcionar a la clave llamadas desde la aplicación estática a la API.

Restricciones

• Solo hay una aplicación de Azure Functions disponible para una sola aplicación web estática.
• El valor api_location de la configuración del flujo de trabajo debe establecerse en una cadena vacía.
• No se admite en Static Web Apps entornos de solicitud de incorporación de cambios.
• Aunque la aplicación de Azure Functions puede responder a varios desencadenadores, la aplicación web estática solo puede acceder a las funciones a través de puntos de conexión HTTP.

Pasos siguientes

Adición de una API