Etapa 1: Carregar dados de imagem na nuvem com o Armazenamento do Azure
Este tutorial é a primeira parte de uma série. Neste tutorial, você aprenderá a implantar um aplicativo Web. O aplicativo Web usa a biblioteca de clientes do Armazenamento de Blobs do Azure para carregar imagens para uma conta de armazenamento.
Na primeira parte da série, você faz as seguintes tarefas:
- Criar uma conta de armazenamento
- Criar um contêiner e definir permissões
- Recuperar uma chave de acesso
- Implantar um aplicativo Web no Azure
- Definir configurações de aplicativo
- Interagir com o aplicativo Web
Pré-requisitos
Para concluir este tutorial, você precisa de uma assinatura do Azure. Crie uma conta gratuita antes de começar.
Azure Cloud Shell
O Azure hospeda o Azure Cloud Shell, um ambiente de shell interativo que pode ser usado por meio do navegador. É possível usar o bash ou o PowerShell com o Cloud Shell para trabalhar com os serviços do Azure. É 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.
Para iniciar o Azure Cloud Shell:
| Opção | Exemplo/Link |
|---|---|
| Selecione Experimentar no canto superior direito de um bloco de código ou de comando. Selecionar Experimentar não copia automaticamente o código nem o comando para o Cloud Shell. |  |
| Acesse https://shell.azure.com ou selecione o botão Iniciar o Cloud Shell para abri-lo no navegador. |  |
| Selecione o botão Cloud Shell na barra de menus no canto superior direito do portal do Azure. |  |
Para usar o Azure Cloud Shell:
Inicie o Cloud Shell.
Selecione o botão Copiar em um bloco de código (ou bloco de comando) para copiar o código ou o comando.
Cole o código ou comando na sessão do Cloud Shell selecionando Ctrl+Shift+V no Windows e no Linux, ou selecionando Cmd+Shift+V no macOS.
Pressione Enter para executar o código ou comando.
Criar um grupo de recursos
Importante
Na etapa 2 do tutorial, você usa Grade de Eventos do Azure com o armazenamento de blobs criado nesta etapa. Crie sua conta de armazenamento em uma região do Azure que dá suporte à Grade de Eventos. Para obter uma lista das regiões com suporte, consulte produtos Azure por região.
No Cloud Shell do Azure, selecione Bash no canto superior esquerdo se ele ainda não estiver selecionado.
Crie um grupo de recursos com o comando az group create. Um grupo de recursos do Azure é um contêiner lógico no qual os recursos do Azure são implantados e gerenciados.
Observação
Defina os valores apropriados para
regionergName(nome do grupo de recursos).region="eastus" rgName="egridtutorialrg" az group create --name $rgName --location $region
Criar uma conta de armazenamento
O exemplo carrega imagens em um contêiner de blobs em uma conta de armazenamento do Azure.
Crie uma conta de armazenamento no grupo de recursos que você criou ao utilizar o comando az storage account create.
blobStorageAccount="myblobstorage$RANDOM"
az storage account create --name $blobStorageAccount --location $region \
--resource-group $rgName --sku Standard_LRS --kind StorageV2 --access-tier hot --allow-blob-public-access true
Criar contêineres de armazenamento de blobs
O aplicativo usa dois contêineres na conta de armazenamento de blobs. O contêiner de imagens é onde o aplicativo carrega as imagens de alta resolução. Em uma parte posterior da série, um aplicativo de funções do Azure carrega miniaturas de imagem redimensionada para o contêiner miniaturas.
O acesso público do contêiner de imagens é definido como off. O acesso público do contêiner de miniaturas é definido como container. A configuração de acesso público do container permite que os usuários que visitam a página da Web exibir as miniaturas.
Obtenha a chave de conta de armazenamento usando o comando az storage account keys list. Depois use essa chave para criar dois contêineres usando o comando az storage container create.
blobStorageAccountKey=$(az storage account keys list -g $rgName \
-n $blobStorageAccount --query "[0].value" --output tsv)
az storage container create --name images \
--account-name $blobStorageAccount \
--account-key $blobStorageAccountKey
az storage container create --name thumbnails \
--account-name $blobStorageAccount \
--account-key $blobStorageAccountKey --public-access container
O aplicativo de amostra se conecta à conta de armazenamento usando seu nome e chave de acesso.
Criar um plano de Serviço de Aplicativo
Um plano do Serviço de Aplicativo especifica o local, tamanho e recursos do farm de servidores Web que hospeda o aplicativo. O exemplo a seguir cria um plano do Serviço de Aplicativo denominado myAppServicePlan usando o tipo de preço Gratuita:
Criar um plano do Serviço de Aplicativo com o comando az appservice plan create.
planName="MyAppServicePlan"
az appservice plan create --name $planName --resource-group $rgName --sku Free
Criar um aplicativo Web
O aplicativo Web fornece um espaço de hospedagem para o código do aplicativo de exemplo que é implantado do repositório de exemplo do GitHub.
Crie um aplicativo Web no plano do Serviço de Aplicativo do myAppServicePlan com o comando az webapp create.
webapp="mywebapp$RANDOM"
az webapp create --name $webapp --resource-group $rgName --plan $planName
Implantar o aplicativo de exemplo do repositório do GitHub
Serviço de Aplicativo dá suporte a várias maneiras de implantar o conteúdo em um aplicativo Web. Neste tutorial, você implanta o aplicativo Web de um repositório de exemplo do GitHub público. Configure a implantação do GitHub para o aplicativo Web com o comando az webapp deployment source config.
O projeto de exemplo contém um aplicativo ASP.NET MVC. O aplicativo aceita uma imagem, salva-a em uma conta de armazenamento e exibe imagens de um contêiner de miniaturas. O aplicativo Web usa os namespaces Azure.Storage, Azure.Storage.Blobs e Azure.Storage.Blobs.Models para interagir com o serviço de Armazenamento do Azure.
az webapp deployment source config --name $webapp --resource-group $rgName \
--branch master --manual-integration \
--repo-url https://github.com/Azure-Samples/storage-blob-upload-from-webapp
Definir configurações do aplicativo Web
O aplicativo Web de exemplo usa as APIs do Armazenamento do Azure para .NET para carregar imagens. As credenciais da conta de armazenamento são definidas nas configurações do aplicativo para o aplicativo Web. Adicione configurações de aplicativo ao aplicativo implantado com o comando az webapp config appsettings set ou New-AzStaticWebAppSetting.
az webapp config appsettings set --name $webapp --resource-group $rgName \
--settings AzureStorageConfig__AccountName=$blobStorageAccount \
AzureStorageConfig__ImageContainer=images \
AzureStorageConfig__ThumbnailContainer=thumbnails \
AzureStorageConfig__AccountKey=$blobStorageAccountKey
Depois de implantar e configurar o aplicativo Web, você pode testar a funcionalidade de upload de imagem no aplicativo.
Carregar uma imagem
Para testar o aplicativo Web, navegue para a URL do aplicativo publicado. A URL padrão do aplicativo Web é https://<web_app>.azurewebsites.net. Selecione a região Carregar fotos para especificar e carregar um arquivo ou arraste um arquivo para a região. A imagem desaparece se for carregada com êxito. A seção Miniaturas Geradas permanecerá vazia até a testarmos mais adiante neste tutorial.
Observação
Execute o comando a seguir para o nome do aplicativo Web: echo $webapp
No código de exemplo, a tarefa UploadFileToStorage no arquivo Storagehelper.cs é usada para carregar as imagens no contêiner de imagens dentro da conta de armazenamento usando o método UploadAsync. O exemplo de código a seguir contém a tarefa UploadFileToStorage.
public static async Task<bool> UploadFileToStorage(Stream fileStream, string fileName,
AzureStorageConfig _storageConfig)
{
// Create a URI to the blob
Uri blobUri = new Uri("https://" +
_storageConfig.AccountName +
".blob.core.windows.net/" +
_storageConfig.ImageContainer +
"/" + fileName);
// Create StorageSharedKeyCredentials object by reading
// the values from the configuration (appsettings.json)
StorageSharedKeyCredential storageCredentials =
new StorageSharedKeyCredential(_storageConfig.AccountName, _storageConfig.AccountKey);
// Create the blob client.
BlobClient blobClient = new BlobClient(blobUri, storageCredentials);
// Upload the file
await blobClient.UploadAsync(fileStream);
return await Task.FromResult(true);
}
As seguintes classes e métodos são usados na tarefa anterior:
| Classe | Método |
|---|---|
| Uri | Construtor Uri |
| StorageSharedKeyCredential | Construtor StorageSharedKeyCredential(String, String) |
| BlobClient | UploadAsync |
Verifique se a imagem é mostrada na conta de armazenamento
Entre no portal do Azure. No menu à esquerda, selecione Contas de armazenamento, em seguida, selecione o nome da sua conta de armazenamento.
Observação
Execute o seguinte para obter o nome da conta de armazenamento:
echo $blobStorageAccount.No menu da esquerda , emArmazenamento de dados, selecione Contêineres.
Selecione o contêiner de blob de imagens .
Verifique se a imagem é mostrada no contêiner.
Exibição de miniaturas de teste
Para testar a exibição de miniaturas, você carregará uma imagem no contêiner de miniaturas para verificar se o aplicativo pode ler o contêiner de miniaturas.
Entre no portal do Azure. No menu à esquerda, selecione Contas de armazenamento, em seguida, selecione o nome da sua conta de armazenamento. Escolha Contêineres e, em seguida, escolha o contêiner miniaturas. Selecione Carregar para abrir o painel Carregar blob.
Escolha um arquivo com o seletor de arquivos e selecione Carregar.
Navegue de volta para seu aplicativo para verificar se a imagem carregada para o contêiner miniaturas está visível.
Na parte dois da série, você automatiza a criação de imagens de miniaturas, de modo que essa imagem não seja necessária. No contêiner miniaturas, selecione a imagem carregada e selecione Excluir para remover a imagem.
Próximas etapas
Comentários
Em breve: Ao longo de 2024, eliminaremos os problemas do GitHub como o mecanismo de comentários para conteúdo e o substituiremos por um novo sistema de comentários. Para obter mais informações, consulte https://aka.ms/ContentUserFeedback.
Enviar e exibir comentários de