Tutorial: Carga de datos de imagen en la nube con Azure StorageTutorial: Upload image data in the cloud with Azure Storage

Este tutorial es la primera parte de una serie.This tutorial is part one of a series. En este tutorial, aprenderá a implementar una aplicación web.In this tutorial, you'll learn how to deploy a web app. La aplicación web usa la biblioteca cliente de Azure Blob Storage para cargar imágenes en una cuenta de almacenamiento.The web app uses the Azure Blob storage client library to upload images to a storage account. Cuando haya terminado, tendrá una aplicación web que almacena y muestra imágenes desde Azure Storage.When you're finished, you'll have a web app that stores and displays images from Azure storage.

En la primera parte de la serie, se aprende a:In part one of the series, you learn how to:

  • Crear una cuenta de almacenamientoCreate a storage account
  • Crear un contenedor y establecer permisosCreate a container and set permissions
  • Recuperar una clave de accesoRetrieve an access key
  • Implementar una aplicación web en AzureDeploy a web app to Azure
  • Configuración de aplicacionesConfigure app settings
  • Interactuar con la aplicación webInteract with the web app

Requisitos previosPrerequisites

Para completar este tutorial, necesitará una suscripción de Azure.To complete this tutorial, you need an Azure subscription. Cree una cuenta gratuita antes de comenzar.Create a free account before you begin.

Uso de Azure Cloud ShellUse Azure Cloud Shell

En Azure se hospeda Azure Cloud Shell, un entorno de shell interactivo que puede utilizar mediante el explorador.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Puede usar Bash o PowerShell con Cloud Shell para trabajar con los servicios de Azure.You can use either Bash or PowerShell with Cloud Shell to work with Azure services. Puede usar los comandos preinstalados de Cloud Shell para ejecutar el código de este artículo sin tener que instalar nada en su entorno 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 Azure Cloud Shell:To start Azure Cloud Shell:

OpciónOption Ejemplo o vínculoExample/Link
Seleccione Pruébelo en la esquina superior derecha de un bloque de código.Select Try It in the upper-right corner of a code block. Solo con seleccionar Pruébelo no se copia automáticamente el código en Cloud Shell.Selecting Try It doesn't automatically copy the code to Cloud Shell. Ejemplo de Probarlo para Azure Cloud Shell
Vaya a https://shell.azure.com o seleccione el botón Iniciar Cloud Shell para abrir Cloud Shell en el explorador.Go to https://shell.azure.com, or select the Launch Cloud Shell button to open Cloud Shell in your browser. Iniciar Cloud Shell en una nueva ventanaLaunch Cloud Shell in a new window
Seleccione el botón Cloud Shell en la barra de menús de la esquina superior derecha de Azure Portal.Select the Cloud Shell button on the menu bar at the upper right in the Azure portal. Botón Cloud Shell en Azure Portal

Para ejecutar el código de este artículo en Azure Cloud Shell:To run the code in this article in Azure Cloud Shell:

  1. Inicie Cloud Shell.Start Cloud Shell.

  2. Seleccione el botón Copiar de un bloque de código para copiar el código.Select the Copy button on a code block to copy the code.

  3. Pegue el código en la sesión de Cloud Shell. Para ello, seleccione Ctrl+Mayús+V en Windows y Linux, o bien seleccione Cmd+Mayús+V en 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. Seleccione Entrar para ejecutar el código.Select Enter to run the code.

Para instalar y usar la CLI localmente, ejecute la versión 2.0.4 de la CLI de Azure o una posterior.To install and use the CLI locally, run Azure CLI version 2.0.4 or later. Ejecute az --version para encontrar la versión.Run az --version to find the version. Si necesita instalarla o actualizarla, consulte Instalación de la CLI de Azure.If you need to install or upgrade, see Install the Azure CLI.

Crear un grupo de recursosCreate a resource group

Para crear un grupo de recursos, use el comando az group create.Create a resource group with the az group create command. Un grupo de recursos de Azure es un contenedor lógico en el que se implementan y se administran los recursos de Azure.An Azure resource group is a logical container into which Azure resources are deployed and managed.

En el ejemplo siguiente se crea un grupo de recursos denominado myResourceGroup.The following example creates a resource group named myResourceGroup.

az group create --name myResourceGroup --location southeastasia
az group create --name myResourceGroup --location southeastasia

Crear una cuenta de almacenamientoCreate a storage account

En el ejemplo se cargan imágenes en un contenedor de blobs en una cuenta de Azure Storage.The sample uploads images to a blob container in an Azure storage account. Una cuenta de almacenamiento proporciona un espacio de nombres único para almacenar y tener acceso a los objetos de datos de almacenamiento de Azure.A storage account provides a unique namespace to store and access your Azure storage data objects. Cree una cuenta de almacenamiento en el grupo de recursos que ha creado con el comando az storage account create.Create a storage account in the resource group you created by using the az storage account create command.

Importante

En la parte 2 del tutorial, usará Azure Event Grid con Blob Storage.In part 2 of the tutorial, you use Azure Event Grid with Blob storage. Asegúrese de crear la cuenta de almacenamiento en una región de Azure que admita Event Grid.Make sure to create your storage account in an Azure region that supports Event Grid. Para obtener una lista de las regiones admitidas, consulte Productos de Azure por región.For a list of supported regions, see Azure products by region.

En el siguiente comando, sustituya su propio nombre único global por la cuenta de Blob Storage donde vea el marcador de posición <blob_storage_account>.In the following command, replace your own globally unique name for the Blob storage account where you see the <blob_storage_account> placeholder.

blobStorageAccount="<blob_storage_account>"

az storage account create --name $blobStorageAccount --location southeastasia \
  --resource-group myResourceGroup --sku Standard_LRS --kind StorageV2 --access-tier hot
$blobStorageAccount="<blob_storage_account>"

az storage account create --name $blobStorageAccount --location southeastasia `
  --resource-group myResourceGroup --sku Standard_LRS --kind StorageV2 --access-tier hot

Creación de contenedores de almacenamiento de blobsCreate Blob storage containers

La aplicación usa dos contenedores en la cuenta de Blob Storage.The app uses two containers in the Blob storage account. Los contenedores son similares a las carpetas y almacenan blobs.Containers are similar to folders and store blobs. El contenedor de imágenes es donde la aplicación carga imágenes a alta resolución.The images container is where the app uploads full-resolution images. En una parte posterior de la serie, una aplicación de función de Azure carga imágenes en miniatura cambiadas de tamaño en el contenedor thumbnails.In a later part of the series, an Azure function app uploads resized image thumbnails to the thumbnails container.

Obtenga la clave de la cuenta de almacenamiento mediante el comando az storage account keys list.Get the storage account key by using the az storage account keys list command. A continuación, use esta clave para crear dos contenedores con el comando az storage container create.Then, use this key to create two containers with the az storage container create command.

El acceso público del contenedor de imágenes está establecido en off.The images container's public access is set to off. El acceso público del contenedor de miniaturas está establecido en container.The thumbnails container's public access is set to container. La configuración de acceso público container permite ver las miniaturas a los usuarios que visitan la página web.The container public access setting permits users who visit the web page to view the thumbnails.

blobStorageAccountKey=$(az storage account keys list -g myResourceGroup \
  -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
$blobStorageAccountKey=$(az storage account keys list -g myResourceGroup `
  -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

Anote el nombre y la clave de la cuenta de almacenamiento de blobs.Make a note of your Blob storage account name and key. La aplicación de ejemplo usa esta configuración para conectarse a la cuenta de almacenamiento y cargar las imágenes.The sample app uses these settings to connect to the storage account to upload the images.

Creación de un plan de App ServiceCreate an App Service plan

Un plan de App Service especifica la ubicación, el tamaño y las características de la granja de servidores web que hospeda la aplicación.An App Service plan specifies the location, size, and features of the web server farm that hosts your app.

Cree un plan de App Service con el comando az appservice plan create.Create an App Service plan with the az appservice plan create command.

En el siguiente ejemplo se crea un plan de App Service denominado myAppServicePlan con el plan de tarifa Gratis:The following example creates an App Service plan named myAppServicePlan in the Free pricing tier:

az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku Free
az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku Free

Creación de una aplicación webCreate a web app

La aplicación web proporciona un espacio de hospedaje para el código de la aplicación de ejemplo que se implementó desde el repositorio de ejemplo de GitHub.The web app provides a hosting space for the sample app code that's deployed from the GitHub sample repository. Cree una aplicación web en el plan de App Service myAppServicePlan con el comando az webapp create.Create a web app in the myAppServicePlan App Service plan with the az webapp create command.

En el siguiente comando, reemplace <web_app> por un nombre único.In the following command, replace <web_app> with a unique name. Los caracteres válidos son a-z, 0-9 y -.Valid characters are a-z, 0-9, and -. Si el valor de <web_app> no es único, recibirá el mensaje de error: Ya existe un sitio web con el nombre especificado <web_app>.If <web_app> isn't unique, you get the error message: Website with given name <web_app> already exists. La dirección URL predeterminada de la aplicación web es https://<web_app>.azurewebsites.net.The default URL of the web app is https://<web_app>.azurewebsites.net.

webapp="<web_app>"

az webapp create --name $webapp --resource-group myResourceGroup --plan myAppServicePlan
$webapp="<web_app>"

az webapp create --name $webapp --resource-group myResourceGroup --plan myAppServicePlan

Implementación de la aplicación de ejemplo desde el repositorio de GitHubDeploy the sample app from the GitHub repository

App Service admite varias maneras de implementar contenido en una aplicación web.App Service supports several ways to deploy content to a web app. En este tutorial, se implementa la aplicación web desde un repositorio de ejemplo público de GitHub.In this tutorial, you deploy the web app from a public GitHub sample repository. Configure la implementación de GitHub local en la aplicación web con el comando az webapp deployment source config.Configure GitHub deployment to the web app with the az webapp deployment source config command.

El proyecto de ejemplo contiene una aplicación MVC de ASP.NET.The sample project contains an ASP.NET MVC app. La aplicación acepta una imagen, la guarda en una cuenta de almacenamiento y muestra imágenes de un contenedor de miniaturas.The app accepts an image, saves it to a storage account, and displays images from a thumbnail container. La aplicación web usa los espacios de nombres Azure.Storage, Azure.Storage.Blobsy Azure.Storage.Blobs.Models para interactuar con el servicio Azure Storage.The web app uses the Azure.Storage, Azure.Storage.Blobs, and Azure.Storage.Blobs.Models namespaces to interact with the Azure Storage service.

az webapp deployment source config --name $webapp --resource-group myResourceGroup \
  --branch master --manual-integration \
  --repo-url https://github.com/Azure-Samples/storage-blob-upload-from-webapp
az webapp deployment source config --name $webapp --resource-group myResourceGroup `
  --branch master --manual-integration `
  --repo-url https://github.com/Azure-Samples/storage-blob-upload-from-webapp

Configurar aplicaciones webConfigure web app settings

La aplicación web de ejemplo usa las API de Azure Storage para .NET para cargar imágenes.The sample web app uses the Azure Storage APIs for .NET to upload images. Las credenciales de la cuenta de Storage se establecen en la configuración de aplicación de la aplicación web.Storage account credentials are set in the app settings for the web app. Agregue la configuración de aplicación a la aplicación implementada con el comando az webapp config appsettings set.Add app settings to the deployed app with the az webapp config appsettings set command.

az webapp config appsettings set --name $webapp --resource-group myResourceGroup \
  --settings AzureStorageConfig__AccountName=$blobStorageAccount \
    AzureStorageConfig__ImageContainer=images \
    AzureStorageConfig__ThumbnailContainer=thumbnails \
    AzureStorageConfig__AccountKey=$blobStorageAccountKey
az webapp config appsettings set --name $webapp --resource-group myResourceGroup `
  --settings AzureStorageConfig__AccountName=$blobStorageAccount `
    AzureStorageConfig__ImageContainer=images `
    AzureStorageConfig__ThumbnailContainer=thumbnails `
    AzureStorageConfig__AccountKey=$blobStorageAccountKey

Una vez que la aplicación web está implementada y configurada, puede probar la funcionalidad de carga de imágenes en la aplicación.After you deploy and configure the web app, you can test the image upload functionality in the app.

Carga de una imagenUpload an image

Para probar la aplicación web, vaya a la dirección URL de la aplicación publicada.To test the web app, browse to the URL of your published app. La dirección URL predeterminada de la aplicación web es https://<web_app>.azurewebsites.net.The default URL of the web app is https://<web_app>.azurewebsites.net.

Seleccione la región Upload photos (Cargar fotos) para especificar y cargar un archivo, o bien arrastre un archivo a dicha región.Select the Upload photos region to specify and upload a file, or drag a file onto the region. La imagen desaparece si se carga correctamente.The image disappears if successfully uploaded. La sección Miniaturas generadas permanecerá vacía hasta que la probemos más adelante en este tutorial.The Generated Thumbnails section will remain empty until we test it later in this tutorial.

Carga de fotos en .NET

En el código de ejemplo, la tarea UploadFileToStorage del archivo Storagehelper.cs se usa para cargar las imágenes en el contenedor de imágenes de la cuenta de almacenamiento mediante el método UploadAsync.In the sample code, the UploadFileToStorage task in the Storagehelper.cs file is used to upload the images to the images container within the storage account using the UploadAsync method. El siguiente código de ejemplo contiene la tarea UploadFileToStorage.The following code sample contains the UploadFileToStorage task.

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);
}

En la tarea anterior se usan las clases y los métodos siguientes:The following classes and methods are used in the preceding task:

ClaseClass MétodoMethod
UriUri Constructor UriUri constructor
StorageSharedKeyCredentialStorageSharedKeyCredential Constructor StorageSharedKeyCredential (cadena, cadena)StorageSharedKeyCredential(String, String) constructor
BlobClientBlobClient UploadAsyncUploadAsync

Comprobación de que la imagen se muestra en la cuenta de almacenamientoVerify the image is shown in the storage account

Inicie sesión en Azure Portal.Sign in to the Azure portal. En el menú izquierdo, seleccione Cuentas de almacenamiento y seleccione el nombre de la cuenta de almacenamiento.From the left menu, select Storage accounts, then select the name of your storage account. Seleccione Contenedores y, a continuación, seleccione el contenedor images.Select Containers, then select the images container.

Compruebe que la imagen se muestra en el contenedor.Verify the image is shown in the container.

Azure Portal muestra el contenedor de imágenes

Prueba de la vista de miniaturasTest thumbnail viewing

Para probar la vista de miniaturas, cargará una imagen en el contenedor de miniaturas para comprobar que la aplicación puede leer el contenedor de miniaturas.To test thumbnail viewing, you'll upload an image to the thumbnails container to check whether the app can read the thumbnails container.

Inicie sesión en Azure Portal.Sign in to the Azure portal. En el menú izquierdo, seleccione Cuentas de almacenamiento y seleccione el nombre de la cuenta de almacenamiento.From the left menu, select Storage accounts, then select the name of your storage account. Seleccione Contenedores y, a continuación, seleccione el contenedor thumbnails.Select Containers, then select the thumbnails container. Seleccione Cargar para abrir el panel Cargar blob.Select Upload to open the Upload blob pane.

Elija un archivo mediante el selector de archivos y seleccione Cargar.Choose a file with the file picker and select Upload.

Vuelva a la aplicación para comprobar que la imagen cargada en el contenedor thumbnails está visible.Navigate back to your app to verify that the image uploaded to the thumbnails container is visible.

En la segunda parte de la serie, automatizará la creación de imágenes en miniatura para que no tenga necesidad de esta imagen.In part two of the series, you automate thumbnail image creation so you don't need this image. En el contenedor thumbnails, seleccione la imagen que descargó y elija Eliminar para eliminarla.In the thumbnails container, select the image you uploaded, and select Delete to remove the image.

Puede habilitar Content Delivery Network (CDN) para almacenar en caché el contenido de una cuenta de almacenamiento de Azure.You can enable Content Delivery Network (CDN) to cache content from your Azure storage account. Para más información, consulte Integración de una cuenta de Azure Storage con Azure CDN.For more information, see Integrate an Azure storage account with Azure CDN.

Pasos siguientesNext steps

En la primera parte de la serie, aprendió a configurar una aplicación web para interactuar con el almacenamiento.In part one of the series, you learned how to configure a web app to interact with storage.

Siga con la parte dos de la serie para aprender a usar Event Grid para desencadenar una función de Azure que cambie el tamaño de una imagen.Go on to part two of the series to learn about using Event Grid to trigger an Azure function to resize an image.