Självstudie: Ladda upp bilddata i molnet med Azure Storage

Den här självstudien ingår i en serie. I den här självstudien lär du dig att distribuera en webbapp. Webbappen använder Azure Blob Storage klientbiblioteket för att ladda upp bilder till ett lagringskonto. När du är klar har du en webbapp som lagrar och visar bilder från Azure Storage.

I del ett i den här serien lärde du dig att:

  • Skapa ett lagringskonto
  • Skapar en container och anger behörigheter
  • Hämta en åtkomstnyckel
  • Distribuera en webbapp till Azure
  • Konfigurera appinställningar
  • Interagera med webbappen

Förutsättningar

Du behöver en Azure-prenumeration för att kunna utföra stegen i den här självstudiekursen. Skapa ett kostnadsfritt konto innan du börjar.

Använda Azure Cloud Shell

Azure är värd för Azure Cloud Shell, en interaktiv gränssnittsmiljö som du kan använda via webbläsaren. Du kan använda antingen Bash eller PowerShell med Cloud Shell för att arbeta med Azure-tjänster. Du kan använda förinstallerade Cloud Shell-kommandon för att köra koden i den här artikeln utan att behöva installera något i din lokala miljö.

Så här startar du Azure Cloud Shell:

Alternativ Exempel/länk
Välj Prova i det övre högra hörnet av ett kodblock. Om du väljer Prova kopieras koden inte automatiskt till Cloud Shell. Exempel på Prova för Azure Cloud Shell
Gå till https://shell.azure.com eller Välj knappen Starta Cloud Shell för att öppna Cloud Shell i webbläsaren. Starta Cloud Shell i ett nytt fönster
Välj knappen Cloud Shell på menyn längst upp till höger i Azure-portalen. Cloud Shell-knappen i Azure Portal

Så här kör du koden i den här artikeln i Azure Cloud Shell:

  1. Starta Cloud Shell.

  2. Kopiera koden genom att klicka på knappen Kopiera på ett kodblock.

  3. Klistra in koden i Cloud Shell-sessionen genom att välja Ctrl+Skift+V på Windows och Linux eller genom att välja Cmd+Skift+V på macOS.

  4. Välj Retur för att köra koden.

Om du vill installera och använda CLI lokalt kör du Azure CLI version 2.0.4 eller senare. Kör az --version för att hitta versionen. Om du behöver installera eller uppgradera kan du läsa informationen i Installera Azure CLI.

Skapa en resursgrupp

I följande exempel skapas en resursgrupp med namnet myResourceGroup.

Skapa en resursgrupp med kommandot New-AzResourceGroup. En Azure-resursgrupp är en logisk container där Azure-resurser distribueras och hanteras.

New-AzResourceGroup -Name myResourceGroup -Location southeastasia

Skapa ett lagringskonto

Exemplet laddar upp bilder till en blobcontainer i ett Azure Storage-konto. Ett Azure-lagringskonto tillhandahåller en unik namnrymd där du kan lagra och få åtkomst till dina Azure-lagringdataobjekt.

Viktigt

I del 2 i självstudien använder du Azure Event Grid med Blob Storage. Se till att skapa ditt lagringskonto i en Azure-region som har stöd för Event Grid. En lista över regioner som stöds finns i Azure-produkter efter region.

I följande kommando ersätter du ditt globalt unika namn för det Blob Storage-konto där platshållaren <blob_storage_account> visas.

Skapa ett lagringskonto i resursgruppen som du skapade med kommandot New-AzStorageAccount.

$blobStorageAccount="<blob_storage_account>"

New-AzStorageAccount -ResourceGroupName myResourceGroup -Name $blobStorageAccount -SkuName Standard_LRS -Location southeastasia -Kind StorageV2 -AccessTier Hot

Skapa Blob Storage-containrar

Appen använder två containrar i bloblagringskontot. Containrar liknar mappar och lagrar blobar. Det är till containern avbildningar som appen överför högupplösta bilder. I en senare del av serien laddar en Azure-funktionsapp upp storleksändrat bildminiatyrer till *miniatyrbilden

Offentlig åtkomst för containern avbildningar har angetts till off. Offentlig åtkomst för containern miniatyrer har angetts till container. Inställningen för offentlig åtkomst för container tillåter att användare som besöker webbplatsen visar miniatyrbilderna.

Hämta lagringskontonyckeln med hjälp av kommandot Get-AzStorageAccountKey. Använd sedan den här nyckeln för att skapa två containrar med kommandot New-AzStorageContainer.

$blobStorageAccountKey = (Get-AzStorageAccountKey -ResourceGroupName myResourceGroup -Name $blobStorageAccount).Key1
$blobStorageContext = New-AzStorageContext -StorageAccountName $blobStorageAccount -StorageAccountKey $blobStorageAccountKey

New-AzStorageContainer -Name images -Context $blobStorageContext
New-AzStorageContainer -Name thumbnails -Permission Container -Context $blobStorageContext

Anteckna namnet och nyckeln till ditt Blob Storage-konto. Exempelappen använder dessa inställningar för att ansluta till lagringskontot för att ladda upp bilderna.

Skapa en App Service-plan

En App Service-plan anger plats, storlek och funktioner för webbservergruppen som är värd för din app.

I följande exempel skapas en App Service-plan med namnet myAppServicePlan på prisnivån Kostnadsfri:

Skapa en App Service plan med kommandot New-AzAppServicePlan.

New-AzAppServicePlan -ResourceGroupName myResourceGroup -Name myAppServicePlan -Tier "Free"

Skapa en webbapp

Webbappen tillhandahåller ett värdutrymme för exempelappens kod som distribueras på GitHub-exempellagringsplatsen.

I följande kommando ersätter du <web_app> med ett unikt namn. Giltiga tecken är a-z, 0-9 och -. Om <web_app> inte är unikt visas felmeddelandet: Webbplatsen med det angivna namnet finns <web_app> redan. Standardwebbadressen för webbappen är https://<web_app>.azurewebsites.net.

Skapa en webbapp i myAppServicePlan App Service plan med kommandot New-AzWebApp.

$webapp="<web_app>"

New-AzWebApp -ResourceGroupName myResourceGroup -Name $webapp -AppServicePlan myAppServicePlan

Distribuera exempelappen från GitHub-lagringsplatsen

App Service har stöd för flera olika sätt att distribuera innehåll till en webbapp. I de här självstudierna distribuerar du webbappen från en offentlig GitHub exempellagringsplats. Konfigurera lokal Git-distribution till webbappen med kommandot az webapp deployment source config-local-git.

Exempelprojektet innehåller en ASP.NET MVC-app. Appen accepterar en bild, sparar den till ett lagringskonto och visar bilder från en container med miniatyrer. Webbappen använder Azure.Storage, Azure.Storage. Blobaroch Azure.Storage. Blobs.Models-namnrymder för att interagera Azure Storage tjänsten.

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

Konfigurera inställningarna för webbappen

Exempelwebbappen använder de Azure Storage API:erna för .NET för att ladda upp bilder. Storage kontoautentiseringsuppgifter anges i appinställningarna för webbappen. Lägg till appinställningar i den distribuerade appen med kommandot az webapp config appsettings set eller New-AzStaticWebAppSetting.

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

När du har distribuerat och konfigurerat webbappen kan du testa funktionen för bilduppladdning i appen.

Ladda upp en avbildning

Om du vill testa webbappen bläddrar du till URL-adressen till din publicerade app. Standardwebbadressen för webbappen är https://<web_app>.azurewebsites.net.

Välj regionen Upload foton för att ange och ladda upp en fil, eller dra en fil till regionen. Bilden försvinner om överföringen lyckas. Avsnittet Genererade miniatyrer förblir tomt tills vi testar det senare i den här självstudien.

Upload Photos i .NET

I exempelkoden används aktiviteten i filen UploadFileToStorage Storagehelper.cs för att ladda upp bilderna till containern images i lagringskontot med hjälp av metoden UploadAsync. Följande kodexempel innehåller aktiviteten 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);
}

Följande klasser och metoder som används i den föregående aktiviteten:

Klass Metod
Uri URI-konstruktor
StorageSharedKeyCredential StorageSharedKeyCredential(String, String) konstruktor
BlobClient UploadAsync

Kontrollera att avbildningen visas på lagringskontot

Logga in på Azure-portalen. I den vänstra menyn väljer du Lagringskonton och sedan namnet på ditt lagringskonto. Välj Containrar och sedan containern images.

Kontrollera att avbildningen visas i containern.

Azure Portal lista över containern images

Testa miniatyrvisning

Om du vill testa miniatyrvisning laddar du upp en bild till containern miniatyrer för att kontrollera huruvida appen kan läsa containern miniatyrer.

Logga in på Azure-portalen. I den vänstra menyn väljer du Lagringskonton och sedan namnet på ditt lagringskonto. Välj Containrar och sedan containern miniatyrer. Välj Överför för att öppna fönstret Överför blobb.

Välj en fil med filväljaren och välj Ladda upp.

Gå tillbaka till din app för att kontrollera att avbildningen som har överförts till containern Miniatyrer syns.

I del två i serien automatiserar du skapandet av miniatyrbilden så du inte behöver den här bilden. I containern miniatyrer väljer du den bild som du laddade upp och väljer Ta bort för att ta bort avbildningen.

Du kan aktivera Content Delivery Network (CDN) för att cachelagra innehåll från ditt Azure Storage-konto. Mer information finns i Integrera ett Azure Storage-konto med Azure CDN.

Nästa steg

I del ett av serien lärde du dig att konfigurera en webbapp för att interagera med lagring.

Gå vidare till del två i serien och lär dig använda Event Grid för att utlösa en Azure-funktion för att ändra storlek på en bild.