Tutorial: Automatizar el cambio de tamaño de imágenes cargadas mediante Event GridTutorial: Automate resizing uploaded images using Event Grid

Azure Event Grid es un servicio de eventos para la nube.Azure Event Grid is an eventing service for the cloud. Event Grid permite crear suscripciones a eventos producidos por servicios de Azure o recursos de terceros.Event Grid enables you to create subscriptions to events raised by Azure services or third-party resources.

Este tutorial es la segunda parte de una serie de tutoriales sobre almacenamiento.This tutorial is part two of a series of Storage tutorials. Amplía el tutorial anterior sobre almacenamiento para agregar la generación de vistas en miniatura automática sin servidor con Azure Event Grid y Azure Functions.It extends the previous Storage tutorial to add serverless automatic thumbnail generation using Azure Event Grid and Azure Functions. Event Grid permite que Azure Functions responda a eventos de Azure Blob Storage y genere vistas en miniatura de imágenes cargadas.Event Grid enables Azure Functions to respond to Azure Blob storage events and generate thumbnails of uploaded images. Se crea una suscripción de eventos en el evento de creación de Blob Storage.An event subscription is created against the Blob storage create event. Cuando se agrega un blob a un contenedor de Blob Storage determinado, se llama a un punto de conexión de función.When a blob is added to a specific Blob storage container, a function endpoint is called. Los datos pasados al enlace de función desde Event Grid se usan para acceder al blob y generar la imagen en miniatura.Data passed to the function binding from Event Grid is used to access the blob and generate the thumbnail image.

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.You use the Azure CLI and the Azure portal to add the resizing functionality to an existing image upload app.

En este tutorial, aprenderá a:In this tutorial, you learn how to:

  • Creación de una cuenta de Azure StorageCreate an Azure Storage account
  • Implementar código sin servidor con Azure FunctionsDeploy serverless code using Azure Functions
  • Crear una suscripción de eventos de Blob Storage en Event GridCreate a Blob storage event subscription in Event Grid

Requisitos previosPrerequisites

Nota

Este artículo se ha actualizado para usar el nuevo módulo Az de Azure PowerShell.This article has been updated to use the new Azure PowerShell Az module. Aún puede usar el módulo de AzureRM que continuará recibiendo correcciones de errores hasta diciembre de 2020 como mínimo.You can still use the AzureRM module, which will continue to receive bug fixes until at least December 2020. Para más información acerca del nuevo módulo Az y la compatibilidad con AzureRM, consulte Introducing the new Azure PowerShell Az module (Presentación del nuevo módulo Az de Azure PowerShell).To learn more about the new Az module and AzureRM compatibility, see Introducing the new Azure PowerShell Az module. Para obtener instrucciones sobre la instalación del módulo Az, consulte Instalación de Azure PowerShell.For Az module installation instructions, see Install Azure PowerShell.

Para completar este tutorial:To complete this tutorial:

Debes haber completado el tutorial anterior sobre el almacenamiento de blobs: Carga de datos de imagen en la nube con Azure Storage.You must have completed the previous Blob storage tutorial: Upload image data in the cloud with Azure Storage.

Si no tiene una suscripción a Azure, cree una cuenta gratuita antes de empezar.If you don't have an Azure subscription, create a free account before you begin.

Uso de Azure Cloud ShellUse Azure Cloud Shell

En Azure se hospeda Azure Cloud Shell, un entorno de shell interactivo que puede utilizar mediante el explorador.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Puede usar Bash o PowerShell con Cloud Shell para trabajar con los servicios de Azure.You can use either Bash or PowerShell with Cloud Shell to work with Azure services. Puede usar los comandos preinstalados de Cloud Shell para ejecutar el código de este artículo sin tener que instalar nada en su entorno local.You can use the Cloud Shell preinstalled commands to run the code in this article without having to install anything on your local environment.

Para iniciar Azure Cloud Shell:To start Azure Cloud Shell:

OpciónOption Ejemplo o vínculoExample/Link
Seleccione Pruébelo en la esquina superior derecha de un bloque de código.Select Try It in the upper-right corner of a code block. Solo con seleccionar Pruébelo no se copia automáticamente el código en Cloud Shell.Selecting Try It doesn't automatically copy the code to Cloud Shell. Ejemplo de Probarlo para Azure Cloud Shell
Vaya a https://shell.azure.com o seleccione el botón Iniciar Cloud Shell para abrir Cloud Shell en el explorador.Go to https://shell.azure.com, or select the Launch Cloud Shell button to open Cloud Shell in your browser. Iniciar Cloud Shell en una nueva ventanaLaunch Cloud Shell in a new window
Seleccione el botón Cloud Shell en la barra de menús de la esquina superior derecha de Azure Portal.Select the Cloud Shell button on the menu bar at the upper right in the Azure portal. Botón Cloud Shell en Azure Portal

Para ejecutar el código de este artículo en Azure Cloud Shell:To run the code in this article in Azure Cloud Shell:

  1. Inicie Cloud Shell.Start Cloud Shell.

  2. Seleccione el botón Copiar de un bloque de código para copiar el código.Select the Copy button on a code block to copy the code.

  3. Pegue el código en la sesión de Cloud Shell. Para ello, seleccione Ctrl+Mayús+V en Windows y Linux, o bien seleccione Cmd+Mayús+V en macOS.Paste the code into the Cloud Shell session by selecting Ctrl+Shift+V on Windows and Linux or by selecting Cmd+Shift+V on macOS.

  4. Seleccione Entrar para ejecutar el código.Select Enter to run the code.

Si decide instalar y usar la CLI de forma local, en este tutorial se necesita la CLI de Azure versión 2.0.14 o posterior.If you choose to install and use the CLI locally, this tutorial requires the Azure CLI version 2.0.14 or later. Ejecute az --version para encontrar la versión.Run az --version to find the version. Si necesita instalarla o actualizarla, vea Instalación de la CLI de Azure.If you need to install or upgrade, see Install Azure CLI.

Si no usa Cloud Shell, primero debe iniciar sesión con az login.If you are not using Cloud Shell, you must first sign in using az login.

Si anteriormente no ha registrado el proveedor de recursos de Event Grid en su suscripción, asegúrese de que está registrado.If you've not previously registered the Event Grid resource provider in your subscription, make sure it's registered.

az provider register --namespace Microsoft.EventGrid
az provider register --namespace Microsoft.EventGrid

Creación de una cuenta de Azure StorageCreate an Azure Storage account

Azure Functions necesita una cuenta de almacenamiento general.Azure Functions requires a general storage account. 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 con el comando az storage account create.In addition to the Blob storage account you created in the previous tutorial, create a separate general storage account in the resource group by using the az storage account create command. 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.Storage account names must be between 3 and 24 characters in length and may contain numbers and lowercase letters only.

  1. Establezca una variable para almacenar el nombre del grupo de recursos que creó en el tutorial anterior.Set a variable to hold the name of the resource group that you created in the previous tutorial.

    resourceGroupName="myResourceGroup"
    
    $resourceGroupName="myResourceGroup"
    
  2. Establezca una variable que contenga la ubicación de los recursos que se van a crear.Set a variable to hold the location for resources to be created.

    location="eastus"
    
    $location="eastus"
    
  3. Establezca una variable para el nombre de la nueva cuenta de almacenamiento que requiere Azure Functions.Set a variable for the name of the new storage account that Azure Functions requires.

    functionstorage="<name of the storage account to be used by the function>"
    
    $functionstorage="<name of the storage account to be used by the function>"
    
  4. Cree la cuenta de almacenamiento para la función de Azure.Create the storage account for the Azure function.

    az storage account create --name $functionstorage --location $location \
    --resource-group $resourceGroupName --sku Standard_LRS --kind StorageV2
    
    az storage account create --name $functionstorage --location $location `
    --resource-group $resourceGroupName --sku Standard_LRS --kind StorageV2
    

Creación de una aplicación de funciónCreate a function app

Debe tener una Function App para hospedar la ejecución de la función.You must have a function app to host the execution of your function. La Function App proporciona un entorno para la ejecución sin servidor de su código de función.The function app provides an environment for serverless execution of your function code. Cree una Function App con el comando az functionapp create.Create a function app by using the az functionapp create command.

En el siguiente comando, proporcione su propio nombre de aplicación de función única.In the following command, provide your own unique function app name. 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.The function app name is used as the default DNS domain for the function app, and so the name needs to be unique across all apps in Azure.

  1. Especifique un nombre para la aplicación de función que se va a crear.Specify a name for the function app that's to be created.

    functionapp="<name of the function app>"
    
    $functionapp="<name of the function app>"
    
  2. Cree la función de Azure.Create the Azure function.

    az functionapp create --name $functionapp --storage-account $functionstorage \
      --resource-group $resourceGroupName --consumption-plan-location $location \
      --functions-version 2
    
    az functionapp create --name $functionapp --storage-account $functionstorage `
      --resource-group $resourceGroupName --consumption-plan-location $location `
      --functions-version 2
    

Ahora configure la aplicación de funciones para conectarse a la cuenta de Blob Storage que creó en el tutorial anterior.Now configure the function app to connect to the Blob storage account you created in the previous tutorial.

Configuración de la Function AppConfigure the function app

La función necesita credenciales para la cuenta de Blob Storage, que se agregan a la configuración de aplicaciones de la aplicación de función con el comando az functionapp config appsettings set.The function needs credentials for the Blob storage account, which are added to the application settings of the function app using the az functionapp config appsettings set command.

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

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.The FUNCTIONS_EXTENSION_VERSION=~2 setting makes the function app run on version 2.x of the Azure Functions runtime.

Ahora puede implementar un proyecto de código de función en esta Function App.You can now deploy a function code project to this function app.

Implementación del código de funciónDeploy the function code

La función de cambio de tamaño de C# de ejemplo está disponible en GitHub.The sample C# resize function is available on GitHub. Implemente este proyecto de código en la aplicación de función mediante el comando az functionapp deployment source config.Deploy this code project to the function app by using the az functionapp deployment source config command.

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
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.The image resize function is triggered by HTTP requests sent to it from the Event Grid service. 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.You tell Event Grid that you want to get these notifications at your function's URL by creating an event subscription. En este tutorial se suscribirá a eventos creados por blob.For this tutorial you subscribe to blob-created events.

Los datos pasados a la función desde la notificación de Event Grid incluyen la dirección URL del blob.The data passed to the function from the Event Grid notification includes the URL of the blob. A su vez, la dirección URL se pasa al enlace de entrada para obtener la imagen cargada desde Blob Storage.That URL is in turn passed to the input binding to obtain the uploaded image from Blob storage. La función genera una imagen en miniatura y escribe el flujo resultante en un contenedor independiente de Blob Storage.The function generates a thumbnail image and writes the resulting stream to a separate container in Blob storage.

Este proyecto usa EventGridTrigger para el tipo de desencadenador.This project uses EventGridTrigger for the trigger type. Es recomendable usar el desencadenador de Event Grid antes que desencadenadores HTTP genéricos.Using the Event Grid trigger is recommended over generic HTTP triggers. Event Grid valida automáticamente los desencadenadores Function de Event Grid.Event Grid automatically validates Event Grid Function triggers. Con desencadenadores HTTP genéricos, debe implementar la respuesta de validación.With generic HTTP triggers, you must implement the validation response.

Para saber más sobre esta función, consulte los archivos function.json y run.csx.To learn more about this function, see the function.json and run.csx files.

El código de proyecto de función se implementa directamente desde el repositorio público de ejemplo.The function project code is deployed directly from the public sample repository. Para más información sobre las opciones de implementación de Azure Functions, vea Implementación continua para Azure Functions.To learn more about deployment options for Azure Functions, see Continuous deployment for Azure Functions.

Creación de una suscripción a eventoCreate an event subscription

Una suscripción de eventos indica los eventos generados por el proveedor que se quieren enviar a un punto de conexión determinado.An event subscription indicates which provider-generated events you want sent to a specific endpoint. En este caso, el punto de conexión se expone mediante la función.In this case, the endpoint is exposed by your function. Use los pasos siguientes para crear una suscripción a evento que envíe notificaciones a su función en Azure Portal:Use the following steps to create an event subscription that sends notifications to your function in the Azure portal:

  1. En Azure Portal, en la parte superior de la página, busque y seleccione Function App y elija la aplicación de función recién creada.In the Azure portal, at the top of the page search for and select Function App and choose the function app that you just created. Seleccione Funciones y elija la función Miniatura.Select Functions and choose the Thumbnail function.

    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.Select select Integration then choose the Event Grid Trigger and select Create Event Grid subscription.

    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.Use the event subscription settings as specified in the table.

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

    ConfiguraciónSetting Valor sugeridoSuggested value DescripciónDescription
    NombreName imageresizersubimageresizersub Nombre que identifica a la nueva suscripción de eventos.Name that identifies your new event subscription.
    Tipo de temaTopic type Cuentas de almacenamientoStorage accounts Elija el proveedor de eventos de las cuentas de almacenamiento.Choose the Storage account event provider.
    SuscripciónSubscription Su suscripción de AzureYour Azure subscription De forma predeterminada, se selecciona la suscripción de Azure actual.By default, your current Azure subscription is selected.
    Grupos de recursosResource group myResourceGroupmyResourceGroup Seleccione Usar existente y elija el grupo de recursos que se ha venido usando en este tutorial.Select Use existing and choose the resource group you have been using in this tutorial.
    RecursoResource La cuenta de Blob StorageYour Blob storage account Elija la cuenta de Blob Storage que ha creado.Choose the Blob storage account you created.
    Nombre del tema del sistemaSystem Topic Name imagestoragesystopicimagestoragesystopic Especifique un nombre para el tema del sistema.Specify a name for the system topic. Para obtener información acerca de los temas del sistema, consulte Introducción a los temas del sistema.To learn about system topics, see System topics overview.
    Tipos de eventoEvent types Blob creadoBlob created Desactive todos los tipos que no sean Blob creado.Uncheck all types other than Blob created. Solo los tipos de evento de Microsoft.Storage.BlobCreated se pasan a la función.Only event types of Microsoft.Storage.BlobCreated are passed to the function.
    Tipo de punto de conexiónEndpoint type generado automáticamenteautogenerated Definido previamente como instancia de Azure Functions.Pre-defined as Azure Function.
    Punto de conexiónEndpoint generado automáticamenteautogenerated El nombre de la función.Name of the function. En este caso, es Thumbnail.In this case, it's Thumbnail.
  4. Cambie a la pestaña Filtros y realice las siguientes acciones:Switch to the Filters tab, and do the following actions:

    1. Seleccione la opción Habilitar el filtrado del asunto.Select Enable subject filtering option.

    2. En El asunto comienza por, escriba el siguiente valor: /blobServices/default/containers/images/blobs/ .For Subject begins with, enter the following value : /blobServices/default/containers/images/blobs/.

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

  5. Seleccione Crear para agregar la suscripción de eventos.Select Create to add the event subscription. Se crea una suscripción de eventos que desencadena la función Thumbnail cuando se agrega un blob al contenedor images.This creates an event subscription that triggers the Thumbnail function when a blob is added to the images container. La función cambia el tamaño de las imágenes y las agrega al contenedor thumbnails.The function resizes the images and adds them to the thumbnails container.

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.Now that the backend services are configured, you test the image resize functionality in the sample web app.

Prueba de la aplicación de ejemploTest the sample app

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.To test image resizing in the web app, browse to the URL of your published app. La dirección URL predeterminada de la aplicación web es https://<web_app>.azurewebsites.net.The default URL of the web app is https://<web_app>.azurewebsites.net.

Haga clic en la región Cargar fotos para seleccionar y cargar un archivo.Click the Upload photos region to select and upload a file. También puede arrastrar una foto a esta región.You can also drag a photo to this region.

Observe que después de que la imagen cargada desaparezca, se muestra una copia de ella en el carrusel Miniaturas generadas.Notice that after the uploaded image disappears, a copy of the uploaded image is displayed in the Generated Thumbnails carousel. 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.This image was resized by the function, added to the thumbnails container, and downloaded by the web client.

Aplicación web publicada en el explorador

Pasos siguientesNext steps

En este tutorial, ha aprendido a:In this tutorial, you learned how to:

  • Crear una cuenta general de Azure StorageCreate a general Azure Storage account
  • Implementar código sin servidor con Azure FunctionsDeploy serverless code using Azure Functions
  • Crear una suscripción de eventos de Blob Storage en Event GridCreate a Blob storage event subscription in 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.Advance to part three of the Storage tutorial series to learn how to secure access to the storage account.