Tutorial: Automatizar redimensionar imagens carregadas usando a Grade de EventosTutorial: 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. Complementa o tutorial de Armazenamento anterior para adicionar a geração automática de miniaturas sem servidor com o Azure Event Grid e as Funções do Azure.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 AzureCreate an 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 utilizar o novo módulo AZ do Azure PowerShell.This article has been updated to use the new Azure PowerShell Az module. Pode continuar a utilizar o módulo AzureRM, que continuará a receber correções de erros 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 obter mais informações sobre o novo módulo Az e a compatibilidade do AzureRM, veja 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, veja Instalar o Azure PowerShell.For Az module installation instructions, see Install Azure PowerShell.

Para concluir este tutorial:To complete this tutorial:

Tem de ter concluído o tutorial de armazenamento de Blobs anterior: Carregar dados de imagem na cloud 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,crie uma conta gratuita antes de começar.If you don't have an Azure subscription, create a free account before you begin.

Utilizar o Azure Cloud ShellUse Azure Cloud Shell

O Azure aloja o Azure Cloud Shell, um ambiente de shell interativo que pode utilizar através do seu browser.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Pode utilizar 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. Pode utilizar os comandos pré-instalados do Cloud Shell para executar o código neste artigo sem ter de instalar nada no 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/LigaçãoExample/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 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 da opção Experimente para o Azure Cloud Shell
Aceda a https://shell.azure.com ou selecione o botão Iniciar Cloud Shell para abrir o Cloud Shell no browser.Go to https://shell.azure.com, or select the Launch Cloud Shell button to open Cloud Shell in your browser. Iniciar Cloud Shell numa nova janelaLaunch Cloud Shell in a new window
Selecione o botão Cloud Shell na barra de menus, na parte direita 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. Selecione o botão Copiar num 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 do Cloud Shell ao selecionar Ctrl+Shift+V no Windows e 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. Selecione Introduzir para executar o código.Select 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 Install Azure CLI (Instalar o Azure CLI).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.

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
az provider register --namespace Microsoft.EventGrid

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 Blob que criou no tutorial anterior, crie uma conta de armazenamento geral separada no grupo de recursos utilizando o comando de criação de conta de armazenamento az.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. Detenha uma variável para manter o nome do grupo de recursos que criou no 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. Desagure uma variável para manter a localização dos recursos a serem criados.Set a variable to hold the location for resources to be created.

    location="eastus"
    
    $location="eastus"
    
  3. Desconfie uma variável para o nome da nova conta de armazenamento que o 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>"
    
    $functionstorage="<name of the storage account to be used by the function>"
    
  4. Crie a conta de armazenamento para a função 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
    

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 seguinte comando, forneça o seu próprio nome de aplicação de função única.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 a aplicação de função que vai ser criada.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. Crie a função 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
    

Agora configurar a app de função para ligar à conta de armazenamento Blob que criou no tutorial anterior.Now 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 necessita de credenciais para a conta de armazenamento Blob, que são adicionadas às definições de aplicação da aplicação de função utilizando o comando de configuração de configurações de appsapp az.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

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 de redimensionar a amostra C# está disponível no GitHub.The sample C# resize function is available on GitHub. Implemente este projeto de código para a aplicação de função utilizando o comando config de fonte de config de origem config da função az.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

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 Azure, no topo da página procure e selecione Function App e escolha a app de função que 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 Funções e escolha a função Miniatura.Select Functions and choose the Thumbnail function.

    Escolha a função miniatura no portal

  2. Selecione selecione Integração e escolha o Gatilho da grelha de eventos e selecione Criar a subscrição de 'Grelha de Eventos'.Select select Integration then choose the Event Grid Trigger and select Create Event Grid subscription.

    Navegue para adicionar subscrição de Grade de Eventos no portal 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
    NomeName 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.
    Nome tópico do sistemaSystem Topic Name imagenstoragesystópicaimagestoragesystopic Especifique um nome para o tópico do sistema.Specify a name for the system topic. Para conhecer os tópicos do sistema, consulte a visão geral dos tópicos do Sistema.To learn about system topics, see System topics overview.
    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 ponto finalEndpoint type gerado automaticamenteautogenerated Pré-definido como Função Azure.Pre-defined as Azure Function.
    Ponto FinalEndpoint gerado automaticamenteautogenerated Nome da função.Name of the function. Neste caso, é miniatura.In this case, it's Thumbnail.
  4. Mude para o separador Filtros e faça as seguintes ações:Switch to the Filters tab, and do the following actions:

    1. Selecione Ative a opção de filtragem do assunto.Select Enable subject filtering option.

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

      Especifique o filtro para a subscrição do evento

  5. Selecione Criar para adicionar a subscrição do evento.Select Create to add the event subscription. Isto cria uma subscrição de evento que desencadeia a Thumbnail função quando uma bolha é adicionada ao images recipiente.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 adiciona-as ao thumbnails recipiente.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.

Note que após o desaparecimento da imagem carregada, uma cópia da imagem carregada é exibida no carrossel das 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.