Passaggio 1: Caricare i dati dell'immagine nel cloud con Archiviazione di Azure
Questa è la prima di una serie di esercitazioni. Questa esercitazione illustra come distribuire un'app Web. L'app Web usa la libreria client Archiviazione BLOB di Azure per caricare immagini in un account di archiviazione.
Nella prima parte della serie vengono eseguite le attività seguenti:
- Creare un account di archiviazione
- Creare un contenitore e impostare le autorizzazioni
- Ottenere una chiave di accesso
- Distribuire un'app Web in Azure
- Configurare le impostazioni applicazione
- Interagire con l'app Web
Prerequisiti
Per completare l'esercitazione, è necessaria una sottoscrizione di Azure. Prima di iniziare, creare un account gratuito.
Azure Cloud Shell
Azure Cloud Shell è un ambiente di shell interattivo ospitato in Azure e usato tramite il browser. È possibile usare Bash o PowerShell con Cloud Shell per usare i servizi di Azure. È possibile usare i comandi preinstallati di Cloud Shell per eseguire il codice in questo articolo, senza dover installare alcun elemento nell'ambiente locale.
Per avviare Azure Cloud Shell:
| Opzione | Esempio/Collegamento |
|---|---|
| Selezionare Prova nell'angolo superiore destro di un codice o di un blocco di comandi. Selezionando Prova non viene copiato automaticamente il codice o il comando in Cloud Shell. |  |
| Passare a https://shell.azure.com o selezionare il pulsante Avvia Cloud Shell per aprire Cloud Shell nel browser. |  |
| Selezionare il pulsante Cloud Shell nella barra dei menu nell'angolo in alto a destra del portale di Azure. |  |
Per usare Azure Cloud Shell:
Avviare Cloud Shell.
Selezionare il pulsante Copia in un blocco di codice (o blocco di comandi) per copiare il codice o il comando.
Incollare il codice o il comando nella sessione di Cloud Shell selezionando CTRL+MAIUSC+V in Windows e Linux oppure selezionando CMD+MAIUSC+V in macOS.
Selezionare INVIO per eseguire il codice o il comando.
Creare un gruppo di risorse
Importante
Nel passaggio 2 dell'esercitazione si userà Griglia di eventi di Azure con l'archivio BLOB creato in questo passaggio. Creare l'account di archiviazione in un'area di Azure che supporta Griglia di eventi. Per un elenco delle aree supportate, vedere Prodotti di Azure in base all'area.
In Azure Cloud Shell selezionare Bash nell'angolo in alto a sinistra se non è già selezionato.
Creare un gruppo di risorse con il comando az group create. Un gruppo di risorse di Azure è un contenitore logico in cui le risorse di Azure vengono distribuite e gestite.
Nota
Impostare i valori appropriati per
regionergName(nome del gruppo di risorse).region="eastus" rgName="egridtutorialrg" az group create --name $rgName --location $region
Creare un account di archiviazione
L'esempio carica le immagini in un contenitore BLOB in un account di archiviazione di Azure.
Creare un account di archiviazione nel gruppo di risorse creato usando il 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
Creare contenitori di archiviazione BLOB
L'app usa due contenitori nell'account di archiviazione BLOB. Il contenitore images è la posizione in cui l'applicazione carica le immagini ad alta risoluzione. Nel secondo passaggio della serie un'app per le funzioni di Azure carica le anteprime delle immagini ridimensionate nel contenitore delle anteprime .
L'accesso pubblico al contenitore images è impostato su off. L'accesso pubblico al contenitore thumbnails è impostato su container. L'impostazione di accesso pubblico container consente agli utenti che visitano la pagina Web di visualizzare le anteprime.
Usare il comando az storage account keys list per ottenere le chiavi dell'account di archiviazione. Usare quindi questa chiave per creare due contenitori con il 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
L'app di esempio si connette all'account di archiviazione usando il nome e la chiave di accesso.
Creare un piano di servizio app
Un piano di servizio app specifica la località, le dimensioni e le funzionalità della server farm Web che ospita l'app. L'esempio seguente crea un piano di servizio app denominato myAppServicePlan nel piano tariffario Gratuito:
Creare un piano di servizio app con il comando az appservice plan create.
planName="MyAppServicePlan"
az appservice plan create --name $planName --resource-group $rgName --sku Free
Creare un'app Web
L'app Web offre uno spazio di hosting per il codice dell'app di esempio che viene distribuito dal repository di esempi GitHub.
Creare un'app Web nel piano di servizio app myAppServicePlan con il comando az webapp create.
webapp="mywebapp$RANDOM"
az webapp create --name $webapp --resource-group $rgName --plan $planName
Distribuire l'app di esempio dal repository GitHub
Il servizio app offre diversi modi per distribuire contenuto in un'applicazione Web. In questa esercitazione si distribuisce l'app Web da un repository pubblico di esempio GitHub. Configurare la distribuzione GitHub nell'applicazione Web con il comando az webapp deployment source config.
Il progetto di esempio contiene un'app MVC ASP.NET. L'app accetta un'immagine, la salva in un account di archiviazione e visualizza le immagini da un contenitore di anteprime. L'app Web usa gli spazi dei nomi Azure.Storage, Azure.Storage.Blobs e Azure.Storage.Blobs.Models per interagire con il servizio di archiviazione di 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
Configurare le impostazioni delle app Web
L'app Web di esempio usa le API di archiviazione di Azure per .NET per caricare le immagini. Le credenziali dell'account di archiviazione sono definite nelle impostazioni dell'app Web. Aggiungere le impostazioni dell'app all'app distribuita con il 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
Dopo aver distribuito e configurato l'app Web, è possibile testare la funzionalità di caricamento immagini nell'app.
Caricare un'immagine
Per testare l'applicazione Web, passare all'URL dell'app pubblicata. L'URL predefinito dell'app Web è https://<web_app>.azurewebsites.net. Selezionare quindi l'area Carica foto per specificare e caricare un file oppure trascinare un file nell'area. Se è stata caricata correttamente, l'immagine scompare. La sezione Anteprime generate rimane vuota fino a quando non viene testata più avanti in questa esercitazione.
Nota
Eseguire il comando seguente per ottenere il nome dell'app Web: echo $webapp
Nel codice di esempio l'attività UploadFileToStorage nel file Storagehelper.cs viene usata per caricare le immagini nel contenitore images all'interno dell'account di archiviazione usando il metodo UploadAsync. L'esempio di codice seguente contiene l'attività 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);
}
Nell'attività precedente vengono usate le classi e i metodi seguenti:
| Classe | Method |
|---|---|
| URI | Costruttore URI |
| StorageSharedKeyCredential | Costruttore StorageSharedKeyCredential(String, String) |
| BlobClient | UploadAsync |
Verificare che l'immagine venga visualizzata nell'account di archiviazione
Accedere al portale di Azure. Nel menu a sinistra selezionare Account di archiviazione e quindi selezionare il nome dell'account di archiviazione.
Nota
Eseguire il comando seguente per ottenere il nome dell'account di archiviazione:
echo $blobStorageAccount.Nel menu a sinistra, nella sezione Archiviazione dati selezionare Contenitori.
Selezionare il contenitore BLOB images .
Verificare che l'immagine venga visualizzata nel contenitore.
Test della visualizzazione dell'anteprima
Per testare la visualizzazione delle anteprime, caricare un'immagine nel contenitore delle anteprime per verificare se l'app può leggere il contenitore delle anteprime .
Accedere al portale di Azure. Nel menu a sinistra selezionare Account di archiviazione e quindi selezionare il nome dell'account di archiviazione. Selezionare Contenitori, quindi selezionare il contenitore thumbnails. Selezionare Carica per aprire il riquadro Carica BLOB.
Scegliere un file con la selezione file e quindi scegliere Carica.
Tornare all'app per verificare che l'immagine caricata nel contenitore thumbnails sia visibile.
Nella seconda parte della serie la creazione di immagini di anteprima è automatizzata, quindi questa immagine non è necessaria. Nel contenitore thumbnails selezionare l'immagine caricata e quindi selezionare Elimina per rimuoverla.