Paso 1: Carga de datos de imagen en la nube con Azure Storage
Este tutorial es la primera parte de una serie. En este tutorial, se aprende a implementar una aplicación web. La aplicación web usa la biblioteca cliente de Azure Blob Storage para cargar imágenes en una cuenta de almacenamiento.
En la parte uno de la serie, se realizan las siguientes tareas:
- Crear una cuenta de almacenamiento
- Crear un contenedor y establecer permisos
- Recuperar una clave de acceso
- Implementar una aplicación web en Azure
- Configuración de aplicaciones
- Interactuar con la aplicación web
Requisitos previos
Para completar este tutorial, necesitará una suscripción de Azure. Cree una cuenta gratuita antes de comenzar.
Azure Cloud Shell
En Azure se hospeda Azure Cloud Shell, un entorno de shell interactivo que puede utilizar mediante el explorador. Puede usar Bash o PowerShell con Cloud Shell para trabajar con los servicios de Azure. 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.
Para iniciar Azure Cloud Shell:
| Opción | Ejemplo o vínculo |
|---|---|
| Seleccione Pruébelo en la esquina superior derecha de un bloque de código o de comandos. Solo con seleccionar Pruébelo no se copia automáticamente el código o comando en Cloud Shell. |  |
| Vaya a https://shell.azure.com o seleccione el botón Iniciar Cloud Shell para abrir Cloud Shell en el explorador. |  |
| Seleccione el botón Cloud Shell en la barra de menús de la esquina superior derecha de Azure Portal. |  |
Para usar Azure Cloud Shell:
Inicie Cloud Shell.
Seleccione el botón Copiar en un bloque de código (o bloque de comandos) para copiar el código o comando.
Pegue el código o comando 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.
Seleccione Enter para ejecutar el código o comando.
Crear un grupo de recursos
Importante
En el paso dos del tutorial, se usa Azure Event Grid con el almacenamiento de blobs que se cree en este paso. Crear la cuenta de almacenamiento en una región de Azure que admite Event Grid. Para obtener una lista de las regiones admitidas, consulte Productos de Azure por región.
En Azure Cloud Shell, seleccione Bash en la esquina superior izquierda si aún no está seleccionada.
Para crear un grupo de recursos, use el comando az group create. Un grupo de recursos de Azure es un contenedor lógico en el que se implementan y se administran los recursos de Azure.
Nota
Establecer los valores adecuados para
regionyrgName(nombre del grupo de recursos).region="eastus" rgName="egridtutorialrg" az group create --name $rgName --location $region
Crear una cuenta de almacenamiento
En el ejemplo se cargan imágenes en un contenedor de blobs en una cuenta de Azure Storage.
Cree una cuenta de almacenamiento en el grupo de recursos que ha creado con el 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
Creación de contenedores de almacenamiento de blobs
La aplicación usa dos contenedores en la cuenta de Blob Storage. El contenedor de imágenes es donde la aplicación carga imágenes a alta resolución. En el segundo paso de la serie, una aplicación de función de Azure carga imágenes en miniatura cambiadas de tamaño en el contenedor thumbnails.
El acceso público del contenedor de imágenes está establecido en off. El acceso público del contenedor de miniaturas está establecido en container. La configuración de acceso público container permite ver las miniaturas a los usuarios que visitan la página web.
Obtenga la clave de la cuenta de almacenamiento mediante el comando az storage account keys list. A continuación, use esta clave para crear dos contenedores con el 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
La aplicación de ejemplo se conecta a la cuenta de almacenamiento mediante nombre y clave de acceso.
Creación de un plan de App Service
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. En el siguiente ejemplo se crea un plan de App Service denominado myAppServicePlan con el plan de tarifa Gratis:
Cree un plan de App Service con el comando az appservice plan create.
planName="MyAppServicePlan"
az appservice plan create --name $planName --resource-group $rgName --sku Free
Creación de una aplicación web
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.
Cree una aplicación web en el plan de App Service myAppServicePlan con el comando az webapp create.
webapp="mywebapp$RANDOM"
az webapp create --name $webapp --resource-group $rgName --plan $planName
Implementación de la aplicación de ejemplo desde el repositorio de GitHub
App Service admite varias maneras de implementar contenido en una aplicación web. En este tutorial, se implementa la aplicación web desde un repositorio de ejemplo público de GitHub. Configure la implementación de GitHub local en la aplicación web con el comando az webapp deployment source config.
El proyecto de ejemplo contiene una aplicación MVC de ASP.NET. La aplicación acepta una imagen, la guarda en una cuenta de almacenamiento y muestra imágenes de un contenedor de miniaturas. 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.
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 aplicaciones web
La aplicación web de ejemplo usa las API de Azure Storage para .NET para cargar imágenes. Las credenciales de la cuenta de Storage se establecen en la configuración de aplicación de la aplicación web. Agregue la configuración de aplicación a la aplicación implementada con el comando az webapp config appsettings set o 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
Una vez que la aplicación web está implementada y configurada, puede probar la funcionalidad de carga de imágenes en la aplicación.
Carga de una imagen
Para probar la aplicación web, vaya a la dirección URL de la aplicación publicada. La dirección URL predeterminada de la aplicación web es https://<web_app>.azurewebsites.net. A continuación, seleccione la región Cargar fotos para especificar y cargar un archivo, o bien arrastre un archivo a dicha región. La imagen desaparece si se carga correctamente. La sección Miniaturas generadas queda vacía hasta que la probemos más adelante en este tutorial.
Nota
Ejecute el siguiente comando para obtener el nombre de la aplicación web: echo $webapp
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. El siguiente código de ejemplo contiene la tarea 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);
}
En la tarea anterior se usan las clases y los métodos siguientes:
| Clase | Método |
|---|---|
| Uri | Constructor Uri |
| StorageSharedKeyCredential | Constructor StorageSharedKeyCredential (cadena, cadena) |
| BlobClient | UploadAsync |
Comprobación de que la imagen se muestra en la cuenta de almacenamiento
Inicie sesión en Azure Portal. En el menú izquierdo, seleccione Cuentas de almacenamiento y seleccione el nombre de la cuenta de almacenamiento.
Nota
Ejecute lo siguiente para obtener el nombre de la cuenta de almacenamiento:
echo $blobStorageAccount.En el menú de la izquierda, en la sección Almacenamiento de datos, seleccione Contenedores.
Seleccione el contenedor de blobs images.
Compruebe que la imagen se muestra en el contenedor.
Prueba de la vista de miniaturas
Para probar la vista de miniaturas, cargue una imagen en el contenedor de miniaturas para comprobar que la aplicación puede leer el contenedor de miniaturas.
Inicie sesión en Azure Portal. En el menú izquierdo, seleccione Cuentas de almacenamiento y seleccione el nombre de la cuenta de almacenamiento. Seleccione Contenedores y, a continuación, seleccione el contenedor thumbnails. Seleccione Cargar para abrir el panel Cargar blob.
Elija un archivo mediante el selector de archivos y seleccione Cargar.
Vuelva a la aplicación para comprobar que la imagen cargada en el contenedor thumbnails está 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. En el contenedor thumbnails, seleccione la imagen que descargó y elija Eliminar para eliminarla.