Compatibilidad con 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 el servicio 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 envían a la misma ruta en el servicio Azure API Management.

Un servicio azure API Management se puede vincular a varias aplicaciones web estáticas al mismo tiempo. Se crea un producto de API Management para cada aplicación web estática vinculada. Todas las API 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:

• Funciones de Azure
• Azure API Management
• Azure App Service
• Azure Container Apps

Para más información, consulte la Información general de APIs.

Prerrequisitos

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.

Example

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 prefijo /api, ya que Static Web Apps coincide con las solicitudes realizadas a /api y actúa como proxy de toda la ruta al recurso vinculado.

Vinculación de un servicio Azure API Management

Vinculación de la instancia de API Management a Static Web Apps

Para vincular un servicio Azure API Management como back-end de API para 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 al que desea vincular el servicio API Management. Seleccione Vínculo.

4. En Tipo de recurso back-end, seleccione API Management.

5. En Suscripción, seleccione la suscripción que contiene el servicio Azure API Management que desea vincular.

6. En Nombre del recurso, seleccione el servicio Azure API Management.

7. Seleccione Vínculo.

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 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.

1. En la instancia de API Management del portal, seleccione la pestaña Productos .

2. Seleccione el Azure Static Web Apps - <STATIC_WEB_APP_AUTO_GENERATED_HOSTNAME> (Linked) producto.

3. Seleccione + Agregar API.

4. 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 de 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 desde 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 cuando se hacen solicitudes de proxy al servicio API Management.

Desvincular un servicio Azure API Management

Para desvincular un servicio de Azure API Management desde una aplicación web estática, siga estos pasos:

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

2. Busque el entorno que desea desvincular y seleccione el nombre del servicio API Management.

3. Seleccione Unlink (Desvincular).

Cuando se completa el proceso de desvinculación, las solicitudes a las rutas que comienzan por /api/ ya no se redirigen a su servicio de "API Management".

Solución de problemas

Si las API no están asociadas al producto API Management creado para el recurso de Aplicaciones Web Estáticas, al acceder a una /api ruta en tu aplicación web estática, API Management devuelve el siguiente error.

{
  "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 .

Pasos siguientes