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 cliente do Armazenamento de Blobs do Azure para carregar imagens em uma conta de armazenamento.
Na primeira parte da série, você executa as seguintes tarefas:
- Criar uma conta de armazenamento
- Criar um contentor e definir permissões
- Obter uma chave de acesso
- Implementar uma aplicação Web no Azure
- Configurar as definições da aplicação
- Interagir com o aplicativo Web
Pré-requisitos
Para concluir este tutorial, precisa de uma subscrição do Azure. Crie uma conta gratuita antes de começar.
Azure Cloud Shell
O Azure aloja o Azure Cloud Shell, um ambiente de shell interativo que pode utilizar através do seu browser. Pode utilizar o Bash ou o PowerShell com o Cloud Shell para trabalhar com os serviços do Azure. Você pode usar os comandos pré-instalados do Cloud Shell para executar o código neste artigo, sem precisar instalar nada em seu ambiente local.
Para iniciar o Azure Cloud Shell:
| Opção | Exemplo/Ligação |
|---|---|
| Selecione Experimentar no canto superior direito de um código ou bloco de comandos. Selecionar Experimentar não copia automaticamente o código ou comando para o Cloud Shell. |  |
| Aceda a https://shell.azure.com ou selecione o botão Iniciar Cloud Shell para abrir o Cloud Shell no browser. |  |
| Selecione o botão Cloud Shell na barra de menus, na parte direita 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 comando.
Cole o código ou comando na sessão do Cloud Shell selecionando Ctrl+Shift+V no Windows e Linux ou selecionando Cmd+Shift+V no macOS.
Selecione Enter para executar o código ou comando.
Criar um grupo de recursos
Importante
Na etapa 2 do tutorial, você usa a Grade de Eventos do Azure com o armazenamento de blob criado nesta etapa. Crie sua conta de armazenamento em uma região do Azure que ofereça suporte à Grade de Eventos. Para obter uma lista de regiões suportadas, consulte Produtos do Azure por região.
No Azure Cloud Shell, selecione Bash no canto superior esquerdo se ainda não estiver selecionado.
Crie um grupo de recursos com o comando az group create. Um grupo de recursos do Azure é um contentor lógico no qual os recursos do Azure são implementados e geridos.
Nota
Defina 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 blob em uma conta de armazenamento do Azure.
Utilize o comando az storage account create para criar uma conta de armazenamento no grupo de recursos que criou.
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 Blob
A aplicação utiliza dois contentores na conta de armazenamento de Blobs. O contentor de imagens é para onde a aplicação carrega imagens com máxima resolução. Na segunda etapa da série, um aplicativo de função do Azure carrega miniaturas de imagens redimensionadas no contêiner de miniaturas .
O acesso público do contêiner de imagens está definido como off. O acesso público do contêiner de miniaturas está definido como container. A container configuração de acesso público permite que os usuários que visitam a página da Web visualizem as miniaturas.
Obtenha a chave da conta de armazenamento com o comando az storage account keys list. Em seguida, use essa chave para criar dois contêineres com 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 exemplo se conecta à conta de armazenamento usando seu nome e chave de acesso.
Criar um plano do Serviço de Aplicações
Um plano do serviço de aplicações especifica o local, tamanho e funcionalidades da farm de servidores Web que aloja a aplicação. O exemplo seguinte cria um plano do Serviço de Aplicações com o nome myAppServicePlan, que utiliza o escalão de preços Gratuito.
Crie um plano do Serviço de Aplicações com o comando az appservice plan create.
planName="MyAppServicePlan"
az appservice plan create --name $planName --resource-group $rgName --sku Free
Criar uma aplicação Web
O aplicativo Web fornece um espaço de hospedagem para o código de aplicativo de exemplo implantado a partir do repositório de exemplo do GitHub.
Crie uma aplicação Web no plano do myAppServicePlanServiço de Aplicações com o comandoaz webapp create.
webapp="mywebapp$RANDOM"
az webapp create --name $webapp --resource-group $rgName --plan $planName
Implementar a aplicação de exemplo a partir do repositório do GitHub
O Serviço de Aplicações suporta várias formas de implementar conteúdo numa aplicação Web. Neste tutorial, vai implementar a aplicação Web a partir de um repositório de exemplo do GitHub público. Configure a implementação do GitHub para a aplicação Web com o comando az webapp deployment source config.
O projeto de exemplo contém um aplicativo MVC ASP.NET. 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
Configurar as definições da aplicação Web
O aplicativo Web de exemplo usa as APIs de Armazenamento do Azure para .NET para carregar imagens. As credenciais da conta de armazenamento são definidas nas configurações do aplicativo Web. Adicione as configurações do aplicativo ao aplicativo implantado com o conjunto az webapp config appsettings ou o comando 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 carregamento de imagem no aplicativo.
Carregar uma imagem
Para testar a aplicação Web, navegue para o URL da aplicação publicada. O URL predefinido da aplicação Web é https://<web_app>.azurewebsites.net. Em seguida, 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 permanece vazia até que a testemos mais tarde neste tutorial.
Nota
Execute o seguinte comando para obter o nome do aplicativo Web: echo $webapp
No código de exemplo, a UploadFileToStoragetarefa no arquivo Storagehelper.cs é usada para carregar as imagens para o contêiner de imagens dentro da conta de armazenamento usando o método UploadAsync . O exemplo de código seguinte 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 classes e métodos seguintes são utilizados na tarefa anterior:
| Classe | Método |
|---|---|
| URI | Uri construtor |
| StorageSharedKeyCredential | StorageSharedKeyCredential(String, String) construtor |
| BlobClient | UploadAsync |
Verifique se a imagem é apresentada na conta de armazenamento
Inicie sessão no portal do Azure. No menu à esquerda, selecione Contas de armazenamento e selecione o nome da conta de armazenamento.
Nota
Execute o seguinte para obter o nome da conta de armazenamento:
echo $blobStorageAccount.No menu à esquerda, na seção Armazenamento de dados, selecione Contêineres.
Selecione o contêiner de blob de imagens .
Verifique se a imagem é apresentada no contentor.
Testar a visualização de miniaturas
Para testar a visualização de miniaturas, carregue uma imagem no contêiner de miniaturas para verificar se o aplicativo pode ler o contêiner de miniaturas .
Inicie sessão no portal do Azure. No menu à esquerda, selecione Contas de armazenamento e selecione o nome da conta de armazenamento. Selecione Contêineres e, em seguida, selecione o contêiner de miniaturas. Selecione Carregar para abrir o painel Carregar blob.
Escolha um arquivo com o seletor de arquivos e selecione Carregar.
Navegue novamente para a aplicação para verificar se a imagem carregada no contentor de miniaturas está visível.
Na segunda parte da série, você automatiza a criação de imagens em miniatura para não precisar dessa imagem. No contêiner de miniaturas, selecione a imagem que você carregou e selecione Excluir para remover a imagem.