Tutorial: Automatizar o redimensionamento de imagens carregadas usando a Grade de EventosTutorial: Automate resizing uploaded images using Event Grid

A Grade de Eventos do Azure é um serviço de eventos para a nuvem.Azure Event Grid is an eventing service for the cloud. A Grade de Eventos permite criar assinaturas em eventos gerados pelos serviços do Azure ou por 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 o Armazenamento.This tutorial is part two of a series of Storage tutorials. Ele estende o tutorial anterior sobre o Armazenamento para adicionar a geração automática de miniaturas sem servidor usando a Grade de Eventos do Azure e o Azure Functions.It extends the previous Storage tutorial to add serverless automatic thumbnail generation using Azure Event Grid and Azure Functions. A Grade de Eventos permite que o Azure Functions responda aos eventos do armazenamento de Blobs do Azure e gere miniaturas das imagens carregadas.Event Grid enables Azure Functions to respond to Azure Blob storage events and generate thumbnails of uploaded images. Uma assinatura de evento é criada no evento de criação do armazenamento de Blobs.An event subscription is created against the Blob storage create event. Quando um blob é adicionado a um contêiner de armazenamento de Blobs específico, um ponto de extremidade de função é chamado.When a blob is added to a specific Blob storage container, a function endpoint is called. Os dados passados para a associação de função da Grade de Eventos são usados para acessar o 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.

Use a CLI do Azure e o portal do Azure para adicionar a funcionalidade de redimensionamento a um aplicativo de upload 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, você aprenderá como:In this tutorial, you learn how to:

  • Criar uma conta de Armazenamento do AzureCreate an Azure Storage account
  • Implantar o código sem servidor usando o Azure FunctionsDeploy serverless code using Azure Functions
  • Criar uma assinatura de evento do armazenamento de Blobs na Grade de EventosCreate a Blob storage event subscription in Event Grid

Pré-requisitosPrerequisites

Observação

Este artigo foi atualizado para usar o novo módulo Az do Azure PowerShell.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 as 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 com o AzureRM, confira Apresentação do novo módulo Az do Azure PowerShell.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, confira Instalar o Azure PowerShell.For Az module installation instructions, see Install Azure PowerShell.

Para concluir este tutorial:To complete this tutorial:

É necessário concluir o tutorial de Armazenamento de Blobs anterior: Carregue os 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 você não tiver uma assinatura do Azure, crie uma conta gratuita antes de começar.If you don't have an Azure subscription, create a free account before you begin.

Usar o Azure Cloud ShellUse Azure Cloud Shell

O Azure hospeda o Azure Cloud Shell, um ambiente de shell interativo que pode ser usado por meio do navegador.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. É possível usar o bash ou o PowerShell com o Cloud Shell para trabalhar com os serviços do Azure.You can use either Bash or PowerShell with Cloud Shell to work with Azure services. É possível usar os comandos pré-instalados do Cloud Shell para executar o código neste artigo sem precisar instalar nada no seu ambiente 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 o Azure Cloud Shell:To start Azure Cloud Shell:

OpçãoOption Exemplo/LinkExample/Link
Selecione Experimente no canto superior direito de um bloco de código.Select Try It in the upper-right corner of a code block. Selecionar Experimente não copia automaticamente o código para o Cloud Shell.Selecting Try It doesn't automatically copy the code to Cloud Shell. Exemplo de “Experimente” no Azure Cloud Shell
Acesse https://shell.azure.com ou selecione o botão Iniciar o Cloud Shell para abri-lo no navegador.Go to https://shell.azure.com, or select the Launch Cloud Shell button to open Cloud Shell in your browser. Inicie o Cloud Shell em uma nova janelaLaunch Cloud Shell in a new window
Selecione o botão Cloud Shell na barra de menus no canto superior direito do portal do Azure.Select the Cloud Shell button on the menu bar at the upper right in the Azure portal. Botão Cloud Shell no portal do Azure

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

  1. Inicie o Cloud Shell.Start Cloud Shell.

  2. Clique no botão Copiar no bloco de código para copiá-lo.Select the Copy button on a code block to copy the code.

  3. Cole o código na sessão do Cloud Shell ao pressionar Ctrl+Shift+V no Windows e no Linux ou Cmd+Shift+V no 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. Pressione Enter para executar o código.Select Enter to run the code.

Caso opte por instalar e usar a CLI localmente, este tutorial exigirá a CLI do Azure versão 2.0.14 ou posterior.If you choose to install and use the CLI locally, this tutorial requires the Azure CLI version 2.0.14 or later. Execute az --version para encontrar a versão.Run az --version to find the version. Se você precisa instalar ou atualizar, consulte Instalar a CLI do Azure.If you need to install or upgrade, see Install Azure CLI.

Se você não estiver usando o Cloud Shell, primeiro você deve entrar usando az login.If you are not using Cloud Shell, you must first sign in using az login.

Se você não tiver registrado o provedor de recursos da Grade de Eventos em sua assinatura, verifique se que ele 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

Criar uma conta de Armazenamento do AzureCreate an Azure Storage account

O Azure Functions exige uma conta de armazenamento geral.Azure Functions requires a general storage account. Além da conta de Armazenamento de Blobs que você criou 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 da conta de armazenamento devem ter entre 3 e 24 caracteres e podem conter apenas 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 armazenar a localização dos recursos a serem criados.Set a variable to hold the location for resources to be created.

    location="eastus"
    
  3. Defina uma variável para o nome da nova conta de armazenamento necessária para o 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>"
    
  4. 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 $location \
    --resource-group $resourceGroupName --sku Standard_LRS --kind StorageV2
    

Criar um aplicativo de funçõesCreate a function app

Você deve ter um aplicativo de funções para hospedar a execução da função.You must have a function app to host the execution of your function. O aplicativo de funções fornece um ambiente para execução sem servidor do seu código de função.The function app provides an environment for serverless execution of your function code. Crie um aplicativo de funções ao usar o comando az functionapp create.Create a function app by using the az functionapp create command.

No comando a seguir, forneça seu próprio nome exclusivo do aplicativo de funções.In the following command, provide your own unique function app name. O nome do aplicativo de funções é usado como domínio DNS padrão para o aplicativo de funções, portanto, o nome deve ser exclusivo entre todos os aplicativos 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 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 $location \
      --functions-version 2
    

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

Configurar o aplicativo de funçõesConfigure the function app

A função precisa ter credenciais para a conta de Armazenamento de Blobs, que são adicionadas às configurações 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.

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 configuração FUNCTIONS_EXTENSION_VERSION=~2 faz com que o aplicativo de funções execute na versão 2.x do Azure Functions Runtime.The FUNCTIONS_EXTENSION_VERSION=~2 setting makes the function app run on version 2.x of the Azure Functions runtime.

Agora você pode implantar um projeto de código de função nesse aplicativo de funções.You can now deploy a function code project to this function app.

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

A função de redimensionamento do C# 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 de imagem é disparada por solicitações HTTP enviadas a ele a partir do serviço de Grade de Eventos.The image resize function is triggered by HTTP requests sent to it from the Event Grid service. Você informa à Grade de Eventos que você deseja obter essas notificações na URL da função criando uma assinatura 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, você assina eventos criados de blob.For this tutorial you subscribe to blob-created events.

Os dados passados para a função da notificação de Grade de Eventos incluem a URL do blob.The data passed to the function from the Event Grid notification includes the URL of the blob. Essa URL, por sua vez, é passada para a associação de entrada para obter a imagem carregada a partir do armazenamento de Blob.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 grava o fluxo resultante em um contêiner 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 usa EventGridTrigger para o tipo de gatilho.This project uses EventGridTrigger for the trigger type. O uso do gatilho de Grade de Eventos é recomendado em gatilhos HTTP genéricos.Using the Event Grid trigger is recommended over generic HTTP triggers. A Grade de Eventos valida automaticamente os gatilhos de Função da Grade de Eventos.Event Grid automatically validates Event Grid Function triggers. Com os gatilhos HTTP genéricos, você deve implementar a resposta de validação.With generic HTTP triggers, you must implement the validation response.

Para saber mais sobre essa função, consulte os arquivos 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 é implantado diretamente no repositório público de exemplo.The function project code is deployed directly from the public sample repository. Para saber mais sobre as opções de implantação para o Azure Functions, consulte Implantação contínua para o Azure Functions.To learn more about deployment options for Azure Functions, see Continuous deployment for Azure Functions.

Criar uma assinatura de eventoCreate an event subscription

Uma assinatura de evento indica quais eventos gerados pelo provedor você deseja que sejam enviados para um ponto de extremidade específico.An event subscription indicates which provider-generated events you want sent to a specific endpoint. Nesse caso, o ponto de extremidade é exposto pela função.In this case, the endpoint is exposed by your function. Use as seguintes etapas para criar uma assinatura de evento que envia notificações à 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, na parte superior da página, procure e selecione Function App e escolha o aplicativo de funções que você acabou de criar.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. Selecione Functions e escolha a função Miniatura.Select Functions and choose the Thumbnail function.

    Escolher a função Miniatura no portal

  2. Selecione Integração, depois escolha o Gatilho de Grade de Eventos e selecione Criar Assinatura de Grade de Eventos.Select select Integration then choose the Event Grid Trigger and select Create Event Grid subscription.

    Navegar até Adicionar Assinatura de Grade de Eventos no portal do Azure

  3. Use as configurações da assinatura de evento, conforme especificado na tabela.Use the event subscription settings as specified in the table.

    Criar a assinatura de evento com base na função no portal do Azure

    ConfiguraçãoSetting Valor sugeridoSuggested value DescriçãoDescription
    NomeName imageresizersubimageresizersub Nome que identifica a nova assinatura de evento.Name that identifies your new event subscription.
    Tipo de tópicoTopic type Contas de armazenamentoStorage accounts Escolha o provedor de eventos da conta de Armazenamento.Choose the Storage account event provider.
    AssinaturaSubscription Sua assinatura do AzureYour Azure subscription Por padrão, sua assinatura atual do Azure é selecionada.By default, your current Azure subscription is selected.
    Grupo de recursosResource group myResourceGroupmyResourceGroup Selecione Usar existente e escolha o grupo de recursos que está sendo usado neste tutorial.Select Use existing and choose the resource group you have been using in this tutorial.
    RecursoResource Sua conta de armazenamento de BlobsYour Blob storage account Escolha a conta de armazenamento de Blobs criada.Choose the Blob storage account you created.
    Nome do Tópico do SistemaSystem Topic Name imagestoragesystopicimagestoragesystopic Especifique um nome para o tópico do sistema.Specify a name for the system topic. Para saber mais sobre os tópicos do sistema, confira Visão geral dos tópicos do sistema.To learn about system topics, see System topics overview.
    Tipos de eventoEvent types Blob criadoBlob created Desmarque todos os tipos que não sejam Blob criado.Uncheck all types other than Blob created. Somente os tipos de evento Microsoft.Storage.BlobCreated são passados para a função.Only event types of Microsoft.Storage.BlobCreated are passed to the function.
    Tipo de ponto de extremidadeEndpoint type gerado automaticamenteautogenerated Pré-definido como Função do Azure.Pre-defined as Azure Function.
    Ponto de extremidadeEndpoint gerado automaticamenteautogenerated Nome da função.Name of the function. Nesse caso, é Miniatura.In this case, it's Thumbnail.
  4. Alterne para a guia Filtros e execute as seguintes ações:Switch to the Filters tab, and do the following actions:

    1. Selecione a opção Habilitar filtragem por assunto.Select Enable subject filtering option.

    2. Em 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 o filtro para a assinatura de evento

  5. Selecione Criar para adicionar a assinatura de evento.Select Create to add the event subscription. Isso criará uma assinatura de evento que dispara a função Thumbnail quando um blob é adicionado ao contêiner images.This creates an event subscription that triggers the Thumbnail function when a blob is added to the images container. A função redimensiona as imagens e as adiciona ao contêiner thumbnails.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 da imagem no aplicativo Web de exemplo.Now that the backend services are configured, you test the image resize functionality in the sample web app.

Testar o aplicativo de exemploTest the sample app

Para testar o redimensionamento de imagem no aplicativo Web, navegue para a URL do aplicativo publicado.To test image resizing in the web app, browse to the URL of your published app. A URL padrão do aplicativo Web é https://<web_app>.azurewebsites.net.The default URL of the web app is https://<web_app>.azurewebsites.net.

Clique na região Carregar fotos para selecionar e carregar um arquivo.Click the Upload photos region to select and upload a file. Também arraste uma foto para essa região.You can also drag a photo to this region.

Observe que, depois que a imagem carregada desaparece, uma cópia da imagem carregada é exibida no carrossel Miniaturas Geradas.Notice that after the uploaded image disappears, a copy of the uploaded image is displayed in the Generated Thumbnails carousel. Essa imagem foi redimensionada pela função, adicionada ao contêiner de miniaturas e baixada 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

Próximas etapasNext steps

Neste tutorial, você aprendeu a:In this tutorial, you learned how to:

  • Criar uma conta geral do Armazenamento do AzureCreate a general Azure Storage account
  • Implantar o código sem servidor usando o Azure FunctionsDeploy serverless code using Azure Functions
  • Criar uma assinatura de evento do armazenamento de Blobs na Grade de EventosCreate a Blob storage event subscription in Event Grid

Avance até a terceira parte da série de tutoriais sobre o 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.