Compatibilidad de API en Azure Static Web Apps con Azure API Management
Azure API Management es un servicio que permite crear una puerta de enlace de API moderna para los servicios back-end existentes.
Al vincular la aplicación web de Azure API Management a la aplicación web estática, las solicitudes a la aplicación web estática con una ruta que comienza por /api se enrutan a la misma ruta en Azure API Management.
Un servicio de Azure API Management se puede vincular a varias aplicaciones web estáticas al mismo tiempo. Se crea un producto API Management para cada aplicación web estática vinculada. Todas las APIs agregadas al producto están disponibles para la aplicación web estática asociada.
Todos los planes de tarifa de Azure API Management están disponibles para su uso con Azure Static Web Apps.
Las opciones de API para Static Web Apps incluyen los siguientes servicios de Azure:
Para más información, consulte la Información general de APIs.
Nota:
La integración con Azure API Management 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 instancia de API Management a la aplicación web estática, debe tener un recurso de Azure API Management existente y una aplicación web estática.
| Resource | Descripción |
|---|---|
| Azure API Management | Si aún no tiene una, siga los pasos descritos en la guía Creación de una nueva instancia del servicio Azure API Management. |
| 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 instancia de Azure API Management existente que expone un punto de conexión a través de la siguiente ubicación.
https://my-api-management-instance.azure-api.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 apuntan al mismo punto de conexión de API. El punto de conexión de la instancia de API Management 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.
Enlace un servicio de Azure API Management
Vinculación de la instancia de API Management a Static Web Apps
Para vincular un servicio de Azure API Management como back-end de API para una aplicación web estática, siga estos pasos:
En Azure Portal, vaya a la aplicación web estática.
Seleccione APIs en el menú de navegación.
Busque el entorno al que desea vincular el servicio de API Management. Seleccione Vínculo.
En Backend resource type (Tipo de recurso back-end), seleccione API Management.
En Subscription (Suscripción), seleccione la suscripción que contiene la aplicación Azure API Management que desea vincular.
En Resource Name (Nombre del recurso), seleccione el servicio Azure API Management.
Seleccione Vínculo.
Importante
Una vez completado el proceso de vinculación, las solicitudes a las rutas que comienzan por /api se enrutan al servicio de Azure API Management. Sin embargo, ninguna API se expone de forma predeterminada. Consulte Configuración de las API para recibir solicitudes para configurar un producto de API Management para permitir las API que desea usar.
Configuración de las API para recibir solicitudes
Azure API Management tiene una característica de productos que define cómo se muestran las API. Como parte del proceso de vinculación, el servicio de API Management se configura con un producto denominado Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked).
Para que las API estén disponibles para la aplicación web estática vinculada, agréguelas al producto.
En la instancia de API Management del portal, seleccione la pestaña Productos .
Seleccione el
Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked)producto.Seleccione + Agregar API.
Seleccione las API que desea exponer desde Static Web Apps y, a continuación, seleccione el vínculo Seleccionar .
El proceso de vinculación también aplica automáticamente la siguiente configuración al servicio API Management:
- El producto asociado a la aplicación web estática vinculada está configurado para requerir una suscripción.
- Se crea una suscripción API Management denominada
Generated for Static Web Apps resource with default hostname: <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME>y se limita al producto con el mismo nombre. - Se agrega una directiva validate-jwt entrante al producto para permitir solo las solicitudes que contienen un token de acceso válido de la aplicación web estática vinculada.
- La aplicación web estática vinculada está configurada para incluir la clave principal de la suscripción y un token de acceso válido al proxy de solicitudes al servicio API Management.
Importante
Si se cambia la directiva validate-jwt o se vuelve a generar la clave principal de la suscripción, se impide que la aplicación web estática redireccione mediante proxy las solicitudes al servicio API Management. No modifique ni elimine la suscripción o el producto asociados a la aplicación web estática mientras están vinculados.
Desvincular un servicio de Azure API Management
Para desvincular un servicio de Azure API Management desde una aplicación web estática, siga estos pasos:
En Azure Portal, vaya a la aplicación web estática.
Busque el entorno que desea desvincular y seleccione el nombre del servicio API Management.
Seleccione Unlink (Desvincular).
Una vez completado el proceso de desvinculación, las solicitudes a las rutas que comienzan por /api/ ya no están enrutados al servicio de API Management.
Nota:
El producto API Management y suscripción asociados a la aplicación web estática vinculada no se eliminan automáticamente. Puede eliminarlos del servicio API Management.
Solucionar problemas
Si las API no están asociadas al producto API Management creado para el recurso Static Web Apps, el acceso a una /api ruta de la aplicación web estática devuelve el siguiente error de API Management.
{
"statusCode": 401,
"message": "Access denied due to invalid subscription key. Make sure to provide a valid key for an active subscription."
}
Para resolver este error, configure las API que quiere exponer dentro de Static Web Apps al producto creado para él, tal y como se detalla en la sección Configurar API para recibir solicitudes .