Étape 1 : Charger des données d’image dans le cloud avec Stockage Azure
Ce tutoriel est la première partie d’une série d’étapes. Dans ce tutoriel, vous allez apprendre à déployer une application web. L’application web utilise la bibliothèque de client Stockage Blob Azure dans le but de charger des images dans un compte de stockage.
Dans la première partie de la série, veuillez effectuer les tâches suivantes :
- Créez un compte de stockage.
- Créer un conteneur et définir des autorisations
- Récupérer une clé d’accès
- Déployer une application web dans Azure
- Configuration des paramètres d’application
- Interagir avec l’application web
Prérequis
Pour suivre ce tutoriel, vous devez disposer d’un abonnement Azure. Avant de commencer, créez un compte gratuit.
Azure Cloud Shell
Azure héberge Azure Cloud Shell, un environnement d’interpréteur de commandes interactif que vous pouvez utiliser dans votre navigateur. Vous pouvez utiliser Bash ou PowerShell avec Cloud Shell pour utiliser les services Azure. Vous pouvez utiliser les commandes préinstallées Cloud Shell pour exécuter le code de cet article sans avoir à installer quoi que ce soit dans votre environnement local.
Pour démarrer Azure Cloud Shell :
| Option | Exemple/Lien |
|---|---|
| Sélectionnez Essayer dans le coin supérieur droite d’un bloc de codes ou de commandes. La sélection de Essayer ne copie pas automatiquement le code ni la commande dans Cloud Shell. |  |
| Accédez à https://shell.azure.com ou sélectionnez le bouton Lancer Cloud Shell pour ouvrir Cloud Shell dans votre navigateur. |  |
| Sélectionnez le bouton Cloud Shell dans la barre de menus en haut à droite du portail Azure. |  |
Pour utiliser Azure Cloud Shell :
Démarrez Cloud Shell.
Sélectionnez le bouton Copier sur un bloc de codes (ou un bloc de commandes) pour copier le code ou la commande.
Collez le code ou la commande dans la session Cloud Shell en sélectionnant Ctrl+Maj+V sur Windows et Linux ou en sélectionnant Cmd+Maj+V sur macOS.
Sélectionnez Entrée pour exécuter le code ou la commande.
Créer un groupe de ressources
Important
À l’étape 2 du tutoriel, utilisez Azure Event Grid avec le Stockage Blob que vous créez au cours de cette étape. Créez votre compte de stockage dans une région Azure qui prend en charge Event Grid. Pour obtenir la liste des régions prises en charge, consultez Produits Azure par région.
Dans le Cloud Shell Azure, sélectionnez Bash dans le coin supérieur gauche s’il n’est pas déjà sélectionné.
Créez un groupe de ressources avec la commande az group create. Un groupe de ressources Azure est un conteneur logique dans lequel les ressources Azure sont déployées et gérées.
Notes
Définissez les valeurs appropriées pour
regionetrgName(nom du groupe de ressources).region="eastus" rgName="egridtutorialrg" az group create --name $rgName --location $region
Créez un compte de stockage.
L’exemple charge des images sur un conteneur Blob dans un compte de stockage Azure.
Créez un compte de stockage dans le groupe de ressources que vous avez créé à l’aide de la commande 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
Créer des conteneurs de stockage Blob
L’application utilise deux conteneurs dans le compte de stockage Blob. C’est dans le conteneur images que l’application charge les images pleine résolution. Dans la deuxième partie de la série, une application de fonction Azure charge les miniatures d’images redimensionnées dans le conteneur deminiatures.
L’accès public du conteneur Images est défini sur off. L’accès public du conteneur Miniatures est défini sur container. Le paramètre d’accès public container permet aux utilisateurs qui visitent la page web de voir les miniatures.
Récupérez la clé du compte de stockage avec la commande az storage account keys list. Ensuite, utilisez cette clé pour créer deux conteneurs avec la commande 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
L’exemple d’application se connecte au compte de stockage à l’aide de son nom et de sa clé d’accès.
Créer un plan App Service
Un plan App Service spécifie l’emplacement, la taille et les fonctionnalités de la batterie de serveurs web qui héberge votre application. L’exemple suivant crée un plan App Service nommé myAppServicePlan dans le niveau tarifaire Gratuit :
Créez un plan App Service avec la commande az appservice plan create.
planName="MyAppServicePlan"
az appservice plan create --name $planName --resource-group $rgName --sku Free
Créer une application web
L’application web offre un espace d’hébergement au code de l’exemple d’application qui est déployé à partir du dépôt d’exemples GitHub.
Créez une application web dans le plan App Service myAppServicePlan avec la commande az webapp create.
webapp="mywebapp$RANDOM"
az webapp create --name $webapp --resource-group $rgName --plan $planName
Déployer l’exemple d’application à partir du référentiel GitHub
App Service prend en charge plusieurs façons de déployer du contenu vers une application web. Dans ce didacticiel, vous déployez l’application web depuis un exemple de référentiel GitHub public. Configurez le déploiement GitHub sur l’application web avec la commande az webapp deployment source config.
L’exemple de projet contient une application ASP.NET MVC. Cette application accepte une image, l’enregistre dans un compte de stockage et affiche des images à partir d’un conteneur de miniatures. L’application web utilise les espaces de noms Azure.Storage, Azure.Storage.Blobs et Azure.Storage.Blobs.Models pour interagir avec le service de stockage 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
Configurer les paramètres de l’application web
L’exemple d’application web utilise les API de stockage Azure pour .NET pour charger des images. Les informations d’identification du compte de stockage sont définies dans les paramètres de l’application web. Ajoutez des paramètres d’application à l’application déployée avec la commande 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
Une fois l’application web déployée et configurée, vous pouvez tester la fonctionnalité de chargement d’images dans l’application.
Charger une image
Pour tester l’application web, accédez à l’URL de l’application publiée. L’URL par défaut de l’application web est https://<web_app>.azurewebsites.net. Ensuite, sélectionnez la zone Charger des photos pour spécifier et charger un fichier, ou faites glisser un fichier dans la zone. L’image disparaît si le chargement a réussi. La section Miniatures générées reste vide jusqu’aux tests effectués plus loin dans ce tutoriel.
Notes
Exécutez la commande suivante pour obtenir le nom de l’application web : echo $webapp
Dans l’exemple de code, la tâche UploadFileToStorage du fichier Storagehelper.cs sert à charger les images dans le conteneur Images au sein du compte de stockage suivant la méthode UploadAsync. L’exemple de code suivant contient la tâche 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);
}
Les classes et méthodes suivantes sont utilisées dans la tâche précédente :
| Classe | Méthode |
|---|---|
| Uri | Constructeur d’URI |
| StorageSharedKeyCredential | Constructeur StorageSharedKeyCredential(chaîne, chaîne) |
| BlobClient | UploadAsync |
Vérifier que l’image s’affiche dans le compte de stockage
Connectez-vous au portail Azure. Dans le menu de gauche, sélectionnez Comptes de stockage, puis sélectionnez le nom de votre compte de stockage.
Notes
Exécutez la commande suivante pour obtenir le nom du compte de stockage :
echo $blobStorageAccount.À gauche du menu, dans la section Stockage des données, sélectionnez Conteneurs.
Sélectionnez le conteneur d’images Blob.
Vérifiez que l’image s’affiche dans le conteneur.
Tester l’affichage des miniatures
Pour tester l’affichage des miniatures, chargez une image dans le conteneur Miniatures afin de vérifier que l’application peut lire le conteneur de miniatures.
Connectez-vous au portail Azure. Dans le menu de gauche, sélectionnez Comptes de stockage, puis sélectionnez le nom de votre compte de stockage. Sélectionnez Conteneurs, puis sélectionnez le conteneur thumbnails (miniatures). Cliquez sur Charger pour ouvrir le volet Charger des objets Blob.
Choisissez un fichier à l’aide du sélecteur de fichiers, puis sélectionnez Charger.
Revenez à votre application pour vérifier que l’image chargée dans le conteneur thumbnails est visible.
Dans la deuxième partie de la série, vous allez automatiser la création d’images miniatures. Vous n’avez donc pas besoin de cette image. Dans le conteneur thumbnails, sélectionnez l’image que vous avez chargée et sélectionnez Supprimer pour la supprimer.