Kurz: Upload dat obrázků v cloudu pomocí Azure Storage

Tento kurz je první částí série. V tomto kurzu se dozvíte, jak nasadit webovou aplikaci. Webová aplikace používá klientskou knihovnu Azure Blob Storage k nahrání obrázků do účtu úložiště. Až budete hotovi, budete mít webovou aplikaci, která ukládá a zobrazuje obrázky z úložiště Azure.

V první části tohoto kurzu se naučíte:

  • Vytvoření účtu úložiště
  • Vytvoření kontejneru a nastavení oprávnění
  • Načtení přístupového klíče
  • Nasazení webové aplikace do Azure
  • Konfigurace nastavení aplikace
  • Interakce s webovou aplikací

Požadavky

K dokončení tohoto kurzu potřebujete předplatné Azure. Než začnete, vytvořte si bezplatný účet.

Použití služby Azure Cloud Shell

Azure hostí interaktivní prostředí Azure Cloud Shell, které můžete používat v prohlížeči. Pro práci se službami Azure můžete v prostředí Cloud Shell použít buď Bash, nebo PowerShell. Můžete použít předinstalované příkazy služby Cloud Shell ke spuštění kódu uvedeného v tomto článku, aniž byste museli instalovat cokoli do svého místního prostředí.

Spuštění služby Azure Cloud Shell:

Možnost Příklad nebo odkaz
Zvolte Vyzkoušet v pravém horním rohu bloku kódu. Výběr Vyzkoušet automaticky nekopíruje kód do služby Cloud Shell. Příklad Vyzkoušet služby Azure Cloud Shell
Přejděte na adresu https://shell.azure.com nebo výběrem tlačítka Spustit Cloud Shell otevřete Cloud Shell v prohlížeči. Spuštění služby Cloud Shell v novém okně
Zvolte tlačítko Cloud Shell v pruhu nabídky v pravém horním rohu webu Azure Portal. Tlačítko Cloud Shell na webu Azure Portal

Pokud chcete spustit kód uvedený v tomto článku ve službě Azure Cloud Shell, postupujte takto:

  1. Spusťte Cloud Shell.

  2. Vyberte tlačítko Kopírovat na bloku kódu a kód zkopírujte.

  3. Vložte kód do relace Cloud Shell pomocí kláves Ctrl+Shift+V ve Windows a Linuxu nebo pomocí kláves Cmd+Shift+V v systému macOS.

  4. Spusťte kód stisknutím klávesy Enter.

Pokud chcete rozhraní příkazového řádku nainstalovat a používat místně, spusťte Azure CLI verze 2.0.4 nebo novější. Verzi zjistíte spuštěním příkazu az --version. Pokud potřebujete instalaci nebo upgrade, přečtěte si téma Instalace rozhraní příkazového řádku Azure CLI.

Vytvoření skupiny prostředků

Následující příklad vytvoří skupinu prostředků s názvem myResourceGroup.

Vytvořte skupinu prostředků pomocí příkazu New-AzResourceGroup. Skupina prostředků Azure je logický kontejner, ve kterém se nasazují a spravují prostředky Azure.

New-AzResourceGroup -Name myResourceGroup -Location southeastasia

Vytvoření účtu úložiště

Ukázka nahraje obrázky do kontejneru objektů blob v účtu úložiště Azure. Účet služby Storage poskytuje jedinečný obor názvů pro ukládání datových objektů Azure Storage a přístup k nim.

Důležité

Ve druhé části kurzu použijete nástroj Azure Event Grid blob storage. Nezapomeňte vytvořit účet úložiště v oblasti Azure, která podporuje Event Grid. Seznam podporovaných oblastí najdete v tématu Produkty Azure podle oblastí.

V následujícím příkazu nahraďte zástupný symbol vlastním globálně jedinečným názvem účtu služby Blob <blob_storage_account> Storage.

Ve skupině prostředků, kterou jste vytvořili, vytvořte účet úložiště pomocí příkazu New-AzStorageAccount.

$blobStorageAccount="<blob_storage_account>"

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

Vytvoření kontejnerů úložiště objektů blob

Aplikace používá v účtu služby Blob Storage dva kontejnery. Kontejnery se podobají složkám a objektům blob úložiště. Aplikace nahrává obrázky v plném rozlišení do kontejneru images. V pozdější části série aplikace funkcí Azure nahraje miniatury obrázků se změněnou velikostí do *miniatury.

Veřejný přístup kontejneru images je nastavený na off . Veřejný přístup ke kontejneru thumbnails je nastavený na container . Nastavení container veřejného přístupu umožňuje uživatelům, kteří navštíví webovou stránku, zobrazit miniatury.

Získejte klíč účtu úložiště pomocí příkazu Get-AzStorageAccountKey. Pak pomocí tohoto klíče vytvořte dva kontejnery pomocí příkazu 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

Poznamenejte si název a klíč účtu služby Blob Storage. Ukázková aplikace používá tato nastavení pro připojení k účtu úložiště a nahrání obrázků.

Vytvoření plánu služby App Service

Plán služby App Service určuje umístění, velikost a funkce farmy webových serverů, která je hostitelem vaší aplikace.

Následující příklad vytvoří plán služby App Service s názvem myAppServicePlan v cenové úrovni Free:

Vytvořte plán App Service pomocí příkazu New-AzAppServicePlan.

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

Vytvoření webové aplikace

Webová aplikace poskytuje prostor pro hostování kódu ukázkové aplikace, který je nasazený z GitHub úložiště.

V následujícím příkazu nahraďte <web_app> jedinečným názvem. Platné znaky jsou a-z, 0-9 a -. Pokud není jedinečný, zobrazí se chybová zpráva <web_app> Web s daným názvem už <web_app> existuje. Výchozí adresa URL webové aplikace je https://<web_app>.azurewebsites.net.

Vytvořte webovou aplikaci v myAppServicePlan App Service pomocí příkazu New-AzWebApp.

$webapp="<web_app>"

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

Nasazení ukázkové aplikace z úložiště GitHubu

Služba App Service podporuje několik způsobů nasazení obsahu do webové aplikace. V tomto kurzu nasadíte webovou aplikaci z veřejného úložiště ukázek GitHubu. Nakonfigurujte nasazení z GitHubu do webové aplikace pomocí příkazu az webapp deployment source config.

Ukázkový projekt obsahuje ASP.NET MVC. Aplikace přijme obrázek, uloží ho do účtu úložiště a zobrazí obrázky z kontejneru miniatur. Webová aplikace používá Azure.Storage, Azure.Storage. Objekty bloba Azure.Storage. Obory názvů Blobs.Models pro interakci s Azure Storage službou

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

Konfigurace nastavení webové aplikace

Ukázková webová aplikace k nahrávání obrázků Azure Storage rozhraní API pro .NET. Storage účtu jsou nastavené v nastavení aplikace pro webovou aplikaci. Pomocí příkazu az webapp config appsettings set nebo New-AzStaticWebAppSetting přidejte do nasazené aplikace nastavení aplikace.

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

Po nasazení a konfiguraci webové aplikace můžete otestovat funkci nahrávání obrázků v aplikaci.

Nahrání image

Pokud chcete otestovat webovou aplikaci, přejděte na adresu URL publikované aplikace. Výchozí adresa URL webové aplikace je https://<web_app>.azurewebsites.net.

Vyberte oblast Upload photos a určete a nahrajte soubor, nebo přetáhněte soubor do oblasti. Obrázek po úspěšném nahrání zmizí. Část Generated Thumbnails (Vygenerované miniatury) zůstane prázdná, dokud ji později v tomto kurzu nebudeme testovat.

Upload Fotky v .NET

V ukázkovém kódu se úloha v souboru UploadFileToStorage Storagehelper.cs používá k nahrání obrázků do kontejneru images v rámci účtu úložiště pomocí metody UploadAsync. Úlohu UploadFileToStorage obsahuje následující vzorek kódu.

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

Předchozí úloha využívá následující třídy a metody:

Třída Metoda
Uri Konstruktor uri
StorageSharedKeyCredential Konstruktor StorageSharedKeyCredential(String, String)
Klient objektu blob UploadAsync

Kontrola zobrazení obrázku v účtu úložiště

Přihlaste se k webu Azure Portal. V nabídce vlevo vyberte Účty úložiště a potom vyberte název svého účtu úložiště. Vyberte Kontejnery a pak vyberte kontejner images.

Zkontrolujte, jestli se obrázek v kontejneru zobrazuje.

Azure Portal výpisu kontejneru images

Test zobrazení miniatury

Pokud chcete otestovat zobrazení miniatur, nahrajete obrázek do kontejneru thumbnails a zkontrolujete, jestli aplikace dokáže kontejner thumbnails přečíst.

Přihlaste se k webu Azure Portal. V nabídce vlevo vyberte Účty úložiště a potom vyberte název svého účtu úložiště. Vyberte Kontejnery a pak vyberte kontejner thumbnails. Výběrem položky Nahrát otevřete podokno Nahrát objekt blob.

Zvolte soubor s výběrem souboru a vyberte Upload.

Vraťte se do své aplikace a zkontrolujte, jestli je viditelný obrázek nahraný do kontejneru thumbnails.

Ve druhé části série automatizujete vytváření miniatur obrázků, takže tento obrázek nepotřebujete. V kontejneru thumbnails vyberte obrázek, který jste nahráli, a výběrem možnosti Odstranit obrázek odeberte.

Můžete povolit, Content Delivery Network (CDN) ukládat obsah z účtu úložiště Azure do mezipaměti. Další informace najdete v tématu Integrace účtu úložiště Azure s Azure CDN.

Další kroky

V první části série jste se dozvěděli, jak nakonfigurovat webovou aplikaci pro interakci s úložištěm.

Přejděte ke druhé části série, ve které se dozvíte, jak pomocí Event Grid aktivovat funkci Azure a změnit velikost obrázku.