Segundo paso del tutorial: Automatización del cambio de tamaño de las imágenes cargadas mediante Event Grid

Azure Event Grid es un servicio de eventos para la nube. Event Grid permite crear suscripciones a eventos producidos por servicios de Azure o recursos de terceros.

En este tutorial se amplía la información proporcionada en el tutorial Carga de datos de imagen en la nube con Azure Storage para mostrarle cómo utilizar la generación automática de miniaturas sin servidor mediante Azure Event Grid y Azure Functions. Event Grid permite que Azure Functions responda a eventos de Azure Blob Storage y genere vistas en miniatura de imágenes cargadas. Se crea una suscripción de eventos en el evento de creación de Blob Storage. Cuando se agrega un blob a un contenedor de Blob Storage determinado, se llama a un punto de conexión de función. Los datos pasados al enlace de función desde Event Grid se usan para acceder al blob y generar la imagen en miniatura.

Use la CLI de Azure y Azure Portal para agregar la funcionalidad de cambio de tamaño a una aplicación existente de carga de imágenes.

En este tutorial, aprenderá a:

  • Creación de una cuenta de Azure Storage
  • Implementar código sin servidor con Azure Functions
  • Crear una suscripción de eventos de Blob Storage en Event Grid

Prerrequisitos

Nota:

Se recomienda usar el módulo Azure Az de PowerShell para interactuar con Azure. Consulte Instalación de Azure PowerShell para empezar. Para más información sobre cómo migrar al módulo Az de PowerShell, consulte Migración de Azure PowerShell de AzureRM a Az.

Para completar este tutorial:

Creación de una cuenta de Azure Storage

Azure Functions necesita una cuenta de almacenamiento general. Además de la cuenta de Blob Storage que creó en el tutorial anterior, cree una cuenta de almacenamiento general independiente en el grupo de recursos. Los nombres de las cuentas de almacenamiento deben tener entre 3 y 24 caracteres, y solo pueden incluir números y letras en minúscula.

Establezca variables para contener el nombre del grupo de recursos que creó en el tutorial anterior, la ubicación de los recursos que se crearán y el nombre de la nueva cuenta de almacenamiento que Azure Functions requiere. Después, cree la cuenta de almacenamiento para la función de Azure.

Use el comando New-AzStorageAccount.

  1. Especifique un nombre para el grupo de recursos.

    $resourceGroupName="myResourceGroup"
    
  2. Especifique la ubicación de la cuenta de almacenamiento.

    $location="eastus"    
    
  3. Especifique el nombre de la cuenta de almacenamiento que va a usar la función.

    $functionstorage="<name of the storage account to be used by the function>"    
    
  4. Cree una cuenta de almacenamiento.

    New-AzStorageAccount -ResourceGroupName $resourceGroupName -AccountName $functionstorage -Location $location -SkuName Standard_LRS -Kind StorageV2        
    

Creación de una aplicación de función

Debe tener una Function App para hospedar la ejecución de la función. La Function App proporciona un entorno para la ejecución sin servidor de su código de función.

En el siguiente comando, proporcione su propio nombre de aplicación de función única. El nombre de la aplicación de función se usa como dominio DNS predeterminado para la aplicación de función y, por ello, el nombre debe ser único en todas las aplicaciones de Azure.

Especifique un nombre para la aplicación de funciones que se va a crear y, a continuación, cree la función de Azure.

Cree una aplicación de funciones con el comando New-AzFunctionApp.

  1. Especifique un nombre para la aplicación de funciones.

    $functionapp="<name of the function app>"    
    
  2. Cree una aplicación de función.

    New-AzFunctionApp -Location $location -Name $functionapp -ResourceGroupName $resourceGroupName -Runtime PowerShell -StorageAccountName $functionstorage    
    

Ahora configure la aplicación de funciones para conectarse a la cuenta de Blob Storage que creó en el tutorial anterior.

Configuración de la Function App

La función necesita credenciales para la cuenta de Blob Storage, las cuales se agregan a la configuración de aplicaciones de la aplicación de funcione con el comando az functionapp config appsettings set o Update-AzFunctionAppSetting.

storageConnectionString=$(az storage account show-connection-string --resource-group $resourceGroupName --name $blobStorageAccount --query connectionString --output tsv)

az functionapp config appsettings set --name $functionapp --resource-group $resourceGroupName --settings AzureWebJobsStorage=$storageConnectionString THUMBNAIL_CONTAINER_NAME=thumbnails THUMBNAIL_WIDTH=100 FUNCTIONS_EXTENSION_VERSION=~2 FUNCTIONS_WORKER_RUNTIME=dotnet
$storageConnectionString=$(az storage account show-connection-string --resource-group $resourceGroupName --name $blobStorageAccount --query connectionString --output tsv)

Update-AzFunctionAppSetting -Name $functionapp -ResourceGroupName $resourceGroupName -AppSetting @{AzureWebJobsStorage=$storageConnectionString; THUMBNAIL_CONTAINER_NAME=thumbnails; THUMBNAIL_WIDTH=100 FUNCTIONS_EXTENSION_VERSION=~2; 'FUNCTIONS_WORKER_RUNTIME'='dotnet'}

El valor FUNCTIONS_EXTENSION_VERSION=~2 hace que la aplicación de función se ejecute en la versión 2.x del entorno de ejecución de Azure Functions.

Ahora puede implementar un proyecto de código de función en esta Function App.

Implementación del código de función

La función de cambio de tamaño de C# de ejemplo está disponible en GitHub. Implemente este proyecto de código en la aplicación de función mediante el comando az functionapp deployment source config.

az functionapp deployment source config --name $functionapp --resource-group $resourceGroupName --branch master --manual-integration --repo-url https://github.com/Azure-Samples/function-image-upload-resize

La función de cambio de tamaño de imagen se desencadena mediante solicitudes HTTP que se le envían desde el servicio Event Grid. Indicará a Event Grid que quiere obtener estas notificaciones en la dirección URL de su función mediante la creación de una suscripción a evento. En este tutorial se suscribirá a eventos creados por blob.

Los datos pasados a la función desde la notificación de Event Grid incluyen la dirección URL del blob. A su vez, la dirección URL se pasa al enlace de entrada para obtener la imagen cargada desde Blob Storage. La función genera una imagen en miniatura y escribe el flujo resultante en un contenedor independiente de Blob Storage.

Este proyecto usa EventGridTrigger para el tipo de desencadenador. Es recomendable usar el desencadenador de Event Grid antes que desencadenadores HTTP genéricos. Event Grid valida automáticamente los desencadenadores Function de Event Grid. Con desencadenadores HTTP genéricos, debe implementar la respuesta de validación.

Para saber más sobre esta función, consulte los archivos function.json y run.csx.

El código de proyecto de función se implementa directamente desde el repositorio público de ejemplo. Para más información sobre las opciones de implementación de Azure Functions, vea Implementación continua para Azure Functions.

Creación de una suscripción a evento

Una suscripción de eventos indica los eventos generados por el proveedor que se quieren enviar a un punto de conexión determinado. En este caso, el punto de conexión se expone mediante la función. Use los pasos siguientes para crear una suscripción a evento que envíe notificaciones a su función en Azure Portal:

  1. En la parte superior de la página de Azure Portal, busque y seleccione Function App; a continuación, elija la aplicación de función que ha creado. Seleccione Funciones y elija la función Miniatura.

    Elección de la función Miniatura en el portal

  2. Seleccione Integración, elija el Desencadenador de la cuadrícula de eventos y, después, seleccione Crear suscripción a Event Grid.

    Vaya a la suscripción a Event Grid en Azure Portal

  3. Use la configuración de suscripción de eventos que se especifica en la tabla.

    Creación de suscripción de eventos a partir de la función en Azure Portal

    Configuración Valor sugerido Descripción
    Nombre imageresizersub Nombre que identifica a la nueva suscripción de eventos.
    Tipo de tema Cuentas de almacenamiento Elija el proveedor de eventos de las cuentas de almacenamiento.
    Suscripción Su suscripción de Azure De forma predeterminada, se selecciona la suscripción de Azure actual.
    Grupos de recursos myResourceGroup Seleccione Usar existente y elija el grupo de recursos que se ha venido usando en este tutorial.
    Recurso La cuenta de Blob Storage Elija la cuenta de Blob Storage que ha creado.
    Nombre del tema del sistema imagestoragesystopic Especifique un nombre para el tema del sistema. Para obtener información acerca de los temas del sistema, consulte Introducción a los temas del sistema.
    Tipos de evento Blob creado Desactive todos los tipos que no sean Blob creado. Solo los tipos de evento de Microsoft.Storage.BlobCreated se pasan a la función.
    Tipo de punto de conexión generado automáticamente Definido previamente como instancia de Azure Functions.
    Punto de conexión generado automáticamente El nombre de la función. En este caso, es Thumbnail.
  4. Cambie a la pestaña Filtros y realice las siguientes acciones:

    1. Seleccione la opción Habilitar el filtrado del asunto.

    2. En El asunto comienza por, escriba este valor: /blobServices/default/containers/images/.

      Especificación del filtro para la suscripción a eventos

  5. Seleccione Crear para crear una suscripción de eventos que desencadene la función Thumbnail cuando se agregue un blob al contenedor images. La función cambia el tamaño de las imágenes y las agrega al contenedor thumbnails.

Ahora que se han configurado los servicios back-end, pruebe la funcionalidad de cambio de tamaño de imagen en la aplicación web de ejemplo.

Prueba de la aplicación de ejemplo

Para probar el cambio de tamaño de imagen en la aplicación web, vaya a la dirección URL de la aplicación publicada. La dirección URL predeterminada de la aplicación web es https://<web_app>.azurewebsites.net.

Haga clic en la región Cargar fotos para seleccionar y cargar un archivo. También puede arrastrar una foto a esta región.

Observe que después de que la imagen cargada desaparezca, se muestra una copia de ella en el carrusel Miniaturas generadas. La función ha cambiado el tamaño de la imagen, la imagen se ha agregado al contenedor thumbnails y el cliente web la ha descargado.

Captura de pantalla que muestra una aplicación web publicada llamada

Pasos siguientes

En este tutorial, ha aprendido a:

  • Crear una cuenta general de Azure Storage
  • Implementar código sin servidor con Azure Functions
  • Crear una suscripción de eventos de Blob Storage en Event Grid

Vaya a la tercera parte de la serie de tutoriales sobre almacenamiento para aprender a proteger el acceso a la cuenta de almacenamiento.