Tutorial: Automatizar o redimensionamento de imagens carregadas com o Event GridTutorial: Automate resizing uploaded images using Event Grid

O Azure Event Grid é um serviço de eventos para a cloud.Azure Event Grid is an eventing service for the cloud. O Event Grid permite criar subscrições para eventos gerados pelos serviços do Azure ou recursos de terceiros.Event Grid enables you to create subscriptions to events raised by Azure services or third-party resources.

Este tutorial é a segunda parte de uma série de tutoriais sobre Armazenamento.This tutorial is part two of a series of Storage tutorials. Ele estende o tutorial de armazenamento anterior para adicionar geração de miniatura automática sem servidor usando a grade de eventos do Azure e Azure functions.It extends the previous Storage tutorial to add serverless automatic thumbnail generation using Azure Event Grid and Azure Functions. O Event Grid permite às Funções do Azure responder a eventos do Armazenamento de Blobs do Azure e gerar miniaturas das imagens carregadas.Event Grid enables Azure Functions to respond to Azure Blob storage events and generate thumbnails of uploaded images. É criada uma subscrição de evento relativamente ao evento de criação de armazenamento de Blobs.An event subscription is created against the Blob storage create event. Quando é adicionado um blob a um contentor de armazenamento de Blobs específico, é chamado um ponto final de função.When a blob is added to a specific Blob storage container, a function endpoint is called. Os dados transmitidos ao enlace de função a partir do Event Grid são utilizados para aceder ao blob e gerar a imagem em miniatura.Data passed to the function binding from Event Grid is used to access the blob and generate the thumbnail image.

Utilize a CLI do Azure e o portal do Azure para adicionar a funcionalidade de redimensionamento a uma aplicação de carregamento de imagens existente.You use the Azure CLI and the Azure portal to add the resizing functionality to an existing image upload app.

Neste tutorial, ficará a saber como:In this tutorial, you learn how to:

  • Criar uma conta de Armazenamento do Azure geralCreate a general Azure Storage account
  • Implementar código sem servidor com as Funções do AzureDeploy serverless code using Azure Functions
  • Criar uma subscrição de evento de armazenamento de Blobs no Event GridCreate a Blob storage event subscription in Event Grid

Pré-requisitosPrerequisites

Nota

Este artigo foi atualizado para usar o novo módulo Azure PowerShell AZ.This article has been updated to use the new Azure PowerShell Az module. Você ainda pode usar o módulo AzureRM, que continuará a receber correções de bugs até pelo menos dezembro de 2020.You can still use the AzureRM module, which will continue to receive bug fixes until at least December 2020. Para saber mais sobre o novo módulo AZ e a compatibilidade do AzureRM, consulte apresentando o novo módulo Azure PowerShell AZ.To learn more about the new Az module and AzureRM compatibility, see Introducing the new Azure PowerShell Az module. Para obter instruções de instalação do módulo AZ, consulte instalar Azure PowerShell.For Az module installation instructions, see Install Azure PowerShell.

Para concluir este tutorial:To complete this tutorial:

Você deve ter concluído o tutorial de armazenamento de BLOBs anterior: Carregue dados de imagem na nuvem com o armazenamento do Azure.You must have completed the previous Blob storage tutorial: Upload image data in the cloud with Azure Storage.

Se não tiver uma subscrição do Azure, criar um conta gratuita antes de começar.If you don't have an Azure subscription, create a free account before you begin.

Se não registou o fornecedor de recursos do Event Grid na sua subscrição anteriormente, confirme que está registado.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

Utilizar o Azure Cloud ShellUse Azure Cloud Shell

O Azure hospeda Azure Cloud Shell, um ambiente de shell interativo que você pode usar por meio de seu navegador.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Cloud Shell permite que você use bash o PowerShell ou o para trabalhar com os serviços do Azure.Cloud Shell lets you use either bash or PowerShell to work with Azure services. Você pode usar os comandos pré-instalados Cloud Shell para executar o código neste artigo sem precisar instalar nada em seu ambiente local.You can use the Cloud Shell pre-installed commands to run the code in this article without having to install anything on your local environment.

Para iniciar o Azure Cloud Shell:To launch Azure Cloud Shell:

OpçãoOption Exemplo/linkExample/Link
Selecione Experimentar no canto superior direito de um bloco de código.Select Try It in the upper-right corner of a code block. A seleção de try não copia automaticamente o código para Cloud Shell.Selecting Try It doesn't automatically copy the code to Cloud Shell. Exemplo de teste para Azure Cloud Shell
Vá para https://shell.azure.com ou selecione o botão Iniciar Cloud Shell para abrir Cloud Shell em seu navegador.Go to https://shell.azure.com or select the Launch Cloud Shell button to open Cloud Shell in your browser. Iniciar Cloud Shell em uma nova janelaLaunch Cloud Shell in a new window
Selecione o botão Cloud Shell na barra de menus superior direita na portal do Azure.Select the Cloud Shell button on the top-right menu bar in the Azure portal. Botão Cloud Shell no portal do Azure

Para executar o código neste artigo em Azure Cloud Shell:To run the code in this article in Azure Cloud Shell:

  1. Abra o Cloud Shell.Open Cloud Shell.
  2. Selecione o botão copiar em um bloco de código para copiar o código.Select the Copy button on a code block to copy the code.
  3. Cole o código na sessão de Cloud shell com Ctrl+Shift+v no Windows e Linux, ou cmd+Shift+v no MacOS.Paste the code into the Cloud Shell session with Ctrl+Shift+V on Windows and Linux, or Cmd+Shift+V on macOS.
  4. Pressione Enter para executar o código.Press Enter to run the code.

Se optar por instalar e usar a CLI localmente, este tutorial requer a execução da versão 2.0.14 ou posterior da CLI do Azure.If you choose to install and use the CLI locally, this tutorial requires the Azure CLI version 2.0.14 or later. Executar az --version para localizar a versão.Run az --version to find the version. Se precisar de instalar ou atualizar, veja Instalar a CLI do Azure.If you need to install or upgrade, see Install Azure CLI.

Se não estiver a utilizar o Cloud Shell, tem primeiro de iniciar sessão com o az login.If you are not using Cloud Shell, you must first sign in using az login.

Criar uma conta de Armazenamento do AzureCreate an Azure Storage account

As Funções do Azure requerem uma conta de armazenamento geral.Azure Functions requires a general storage account. Além da conta de armazenamento de BLOBs criada no tutorial anterior, crie uma conta de armazenamento geral separada no grupo de recursos usando o 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. Os nomes das contas do Storage devem ter entre 3 e 24 carateres de comprimento e apenas podem conter números e letras minúsculas.Storage account names must be between 3 and 24 characters in length and may contain numbers and lowercase letters only.

  1. Defina uma variável para conter o nome do grupo de recursos que você criou no tutorial anterior.Set a variable to hold the name of the resource group that you created in the previous tutorial.

    resourceGroupName=myResourceGroup
    
  2. Defina uma variável para o nome da nova conta de armazenamento que Azure Functions requer.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>
    
  3. Crie a conta de armazenamento para a função do Azure.Create the storage account for the Azure function.

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

Criar uma aplicação de funçãoCreate a function app

Precisa de uma aplicação de funções para alojar a execução da sua função.You must have a function app to host the execution of your function. A aplicação Function App proporciona um ambiente para a execução sem servidor do código da sua função.The function app provides an environment for serverless execution of your function code. Utilize o comando az functionapp create para criar uma aplicação Function App.Create a function app by using the az functionapp create command.

No comando a seguir, forneça seu próprio nome de aplicativo de funções exclusivo.In the following command, provide your own unique function app name. O nome da aplicação de funções vai ser utilizado como o domínio DNS predefinido para a aplicação de funções, por isso o nome tem de ser exclusivo em todas as aplicações no 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 um nome para o aplicativo de funções que será criado.Specify a name for the function app that's to be created.

    functionapp=<name of the function app>
    
  2. Crie a função do Azure.Create the Azure function.

    az functionapp create --name $functionapp --storage-account $functionstorage \
    --resource-group $resourceGroupName --consumption-plan-location southeastasia
    

Agora você deve configurar o aplicativo de funções para se conectar à conta de armazenamento de BLOBs criada no tutorial anterior.Now you must configure the function app to connect to the Blob storage account you created in the previous tutorial.

Configurar a aplicação de funçõesConfigure the function app

A função precisa de credenciais para a conta de armazenamento de BLOBs, que são adicionadas às configurações de aplicativo do aplicativo de funções usando o 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.

blobStorageAccount=<name of the Blob storage account you created in the previous tutorial>
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

A definição FUNCTIONS_EXTENSION_VERSION=~2 determina que a aplicação de funções seja executada na versão 2.x do runtime das Funções do Azure.The FUNCTIONS_EXTENSION_VERSION=~2 setting makes the function app run on version 2.x of the Azure Functions runtime.

Agora, pode implementar um projeto de código de função nesta aplicação de funções.You can now deploy a function code project to this function app.

Implementar o código de funçãoDeploy the function code

A função C# de redimensionamento de exemplo está disponível no GitHub.The sample C# resize function is available on GitHub. Implante esse projeto de código no aplicativo de funções usando o 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

A função de redimensionamento da imagem é acionada por pedidos de HTTP enviados a partir do serviço Event Grid.The image resize function is triggered by HTTP requests sent to it from the Event Grid service. Indica ao Event Grid que pretende obter estas notificações no URL da sua função ao criar uma subscrição de evento.You tell Event Grid that you want to get these notifications at your function's URL by creating an event subscription. Neste tutorial, subscreve eventos criados no blob.For this tutorial you subscribe to blob-created events.

Os dados transmitidos para a função a partir da notificação do Event Grid incluem o URL do blob.The data passed to the function from the Event Grid notification includes the URL of the blob. Esse URL é transmitido para o enlace de entrada para obter a imagem carregada a partir do armazenamento de Blobs.That URL is in turn passed to the input binding to obtain the uploaded image from Blob storage. A função gera uma imagem em miniatura e escreve o fluxo resultante num contentor separado no armazenamento de Blobs.The function generates a thumbnail image and writes the resulting stream to a separate container in Blob storage.

Este projeto utiliza EventGridTrigger para o tipo de acionador.This project uses EventGridTrigger for the trigger type. É recomendado utilizar o acionador do Event Grid através de acionadores HTTP genéricos.Using the Event Grid trigger is recommended over generic HTTP triggers. O Event Grid valida automaticamente os acionadores de função do Event Grid.Event Grid automatically validates Event Grid Function triggers. Com os acionadores HTTP genéricos, tem de implementar a resposta de validação.With generic HTTP triggers, you must implement the validation response.

Para obter mais informações sobre esta função, veja os ficheiros function.json e run.csx.To learn more about this function, see the function.json and run.csx files.

O código de projeto de função é implementado diretamente a partir do repositório de exemplo público.The function project code is deployed directly from the public sample repository. Para saber mais sobre as opções de implementação para as Funções do Azure, veja Implementação contínua para Funções do Azure.To learn more about deployment options for Azure Functions, see Continuous deployment for Azure Functions.

Criar uma subscrição de eventoCreate an event subscription

Uma subscrição de evento indica que eventos gerados pelo fornecedor quer que sejam enviados para um ponto final específico.An event subscription indicates which provider-generated events you want sent to a specific endpoint. Neste caso, o ponto final é exposto pela sua função.In this case, the endpoint is exposed by your function. Utilize os passos seguintes para criar uma subscrição de evento que envia notificações para a sua função no portal do Azure:Use the following steps to create an event subscription that sends notifications to your function in the Azure portal:

  1. No portal do Azure, selecione todos os serviços no menu à esquerda e, em seguida, selecione aplicativos de funções.In the Azure portal, select All Services on the left menu, and then select Function Apps.

    Navegar para Aplicações de Funções no portal do Azure

  2. Expanda seu aplicativo de funções, escolha a função de miniatura e, em seguida, selecione Adicionar assinatura de grade de eventos.Expand your function app, choose the Thumbnail function, and then select Add Event Grid subscription.

    Navegar para Aplicações de Funções no portal do Azure

  3. Utilize as definições de subscrição de evento especificadas na tabela.Use the event subscription settings as specified in the table.

    Criar uma subscrição de evento a partir da função no portal do Azure

    DefiniçãoSetting Valor sugeridoSuggested value DescriçãoDescription
    NameName imageresizersubimageresizersub Nome que identifica a nova subscrição de evento.Name that identifies your new event subscription.
    Tipo de tópicoTopic type Contas de armazenamentoStorage accounts Selecione o fornecedor de eventos da conta de Armazenamento.Choose the Storage account event provider.
    SubscriçãoSubscription A sua subscrição do AzureYour Azure subscription Por predefinição, a subscrição do Azure atual está selecionada.By default, your current Azure subscription is selected.
    Grupo de recursosResource group myResourceGroupmyResourceGroup Selecione Utilizar existente e selecione o grupo de recursos que tem utilizado neste tutorial.Select Use existing and choose the resource group you have been using in this tutorial.
    RecursoResource A sua conta de armazenamento de BlobsYour Blob storage account Selecione a conta de armazenamento de Blobs que criou.Choose the Blob storage account you created.
    Tipos de eventoEvent types Criado pelo BlobBlob created Desmarque todos os tipos diferentes de Criado pelo Blob.Uncheck all types other than Blob created. Apenas os tipos de evento de Microsoft.Storage.BlobCreated são transmitidos à função.Only event types of Microsoft.Storage.BlobCreated are passed to the function.
    Tipo de subscritorSubscriber type gerado automaticamenteautogenerated Previamente definido como Webhook.Pre-defined as Web Hook.
    Ponto final do subscritorSubscriber endpoint gerado automaticamenteautogenerated Utilize o URL de ponto final gerado.Use the endpoint URL that is generated for you.
  4. Alterne para a guia filtro e execute as seguintes ações:Switch to the Filter tab, and do the following actions:

    1. Selecione habilitar a opção de filtragem de entidade.Select Enable subject filtering option.

    2. Para o assunto começa com, insira o seguinte valor: /blobServices/default/containers/images/BLOBs/ .For Subject begins with, enter the following value : /blobServices/default/containers/images/blobs/.

      Especificar filtro para a assinatura de evento

  5. Selecione criar para adicionar a assinatura de evento.Select Create to add the event subscription. Isso cria uma assinatura de evento que Thumbnail dispara a função quando um blob é adicionado images ao contêiner.This creates an event subscription that triggers Thumbnail function when a blob is added to the images container. A função redimensiona as imagens e as adiciona ao thumbnails contêiner.The function resizes the images and adds them to the thumbnails container.

Agora que os serviços de back-end estão configurados, teste a funcionalidade de redimensionamento de imagens na aplicação Web de exemplo.Now that the backend services are configured, you test the image resize functionality in the sample web app.

Testar a aplicação de exemploTest the sample app

Para testar o redimensionamento de imagens na aplicação Web, navegue para o URL da aplicação publicada.To test image resizing in the web app, browse to the URL of your published app. O URL predefinido da aplicação Web é https://<web_app>.azurewebsites.net.The default URL of the web app is https://<web_app>.azurewebsites.net.

Clique na região Carregar fotografias para selecionar e carregar um ficheiro.Click the Upload photos region to select and upload a file. Também pode arrastar uma fotografia para esta região.You can also drag a photo to this region.

Tenha em atenção que, depois de a imagem carregada desaparecer, é apresentada uma cópia da imagem carregada no carrossel Miniaturas geradas.Notice that after the uploaded image disappears, a copy of the uploaded image is displayed in the Generated thumbnails carousel. Esta imagem foi redimensionada pela função, adicionada ao contentor de miniaturas e transferida pelo cliente Web.This image was resized by the function, added to the thumbnails container, and downloaded by the web client.

Aplicativo Web publicado no navegador

Passos SeguintesNext steps

Neste tutorial, ficou a saber como:In this tutorial, you learned how to:

  • Criar uma conta de Armazenamento do Azure geralCreate a general Azure Storage account
  • Implementar código sem servidor com as Funções do AzureDeploy serverless code using Azure Functions
  • Criar uma subscrição de evento de armazenamento de Blobs no Event GridCreate a Blob storage event subscription in Event Grid

Avance para a terceira parte da série do tutorial de Armazenamento para saber como proteger o acesso à conta de armazenamento.Advance to part three of the Storage tutorial series to learn how to secure access to the storage account.