Krok 1: Nahrání 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 služby Azure Blob Storage k nahrání obrázků do účtu úložiště.

V první části série provedete následující úlohy:

• Vytvoření účtu úložiště
• Vytvořit kontejner a nastavit 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 .

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. Předinstalované příkazy Cloud Shellu můžete použít ke spuštění kódu v tomto článku, aniž byste museli instalovat cokoli do místního prostředí.

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

Možnost	Příklad nebo odkaz
Vyberte Vyzkoušet v pravém horním rohu bloku kódu nebo příkazu. Výběrem možnosti Vyzkoušet se kód ani příkaz automaticky nekopíruje do Cloud Shellu.
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.
Zvolte tlačítko Cloud Shell v pruhu nabídky v pravém horním rohu webu Azure Portal.

Použití Azure Cloud Shellu:

1. Spusťte Cloud Shell.

2. Výběrem tlačítka Kopírovat v bloku kódu (nebo bloku příkazů) zkopírujte kód nebo příkaz.

3. Vložte kód nebo příkaz do relace Cloud Shellu tak, že ve Windows a Linuxu vyberete ctrl+Shift+V nebo vyberete Cmd+Shift+V v macOS.

4. Stisknutím klávesy Enter spusťte kód nebo příkaz.

Vytvoření skupiny zdrojů

Důležité

V kroku 2 kurzu použijete Azure Event Grid s úložištěm objektů blob, které v tomto kroku vytvoříte. Vytvořte účet úložiště v oblasti Azure, která podporuje Event Grid. Seznam podporovaných oblastí najdete v produktech Azure podle oblastí.

Azure CLI

1. V Azure Cloud Shellu vyberte Bash v levém horním rohu, pokud ještě není vybraný.

   

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

   Poznámka:

   Nastavte odpovídající hodnoty pro region a rgName (název skupiny prostředků).

   region="eastus"
   rgName="egridtutorialrg"
   az group create --name $rgName --location $region
   
   

PowerShell

1. V Azure Cloud Shellu vyberte PowerShell v levém horním rohu, pokud ještě není vybraný.

   

2. 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.

   Poznámka:

   Nastavte odpovídající hodnoty pro region a rgName (název skupiny prostředků).

   $region="eastus"
   $rgName="egridtutorialrg"
   New-AzResourceGroup -Name $rgName -Location $region
   
   

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

Ukázka nahraje obrázky do kontejneru objektů blob v účtu úložiště Azure.

Azure CLI

Ve skupině prostředků, kterou jste vytvořili vytvořte účet úložiště pomocí příkazu 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

PowerShell

Ve skupině prostředků, kterou jste vytvořili, vytvořte účet úložiště pomocí příkazu New-AzStorageAccount . Poznamenejte si název účtu služby Azure Storage, který se zobrazí ve výstupu.

$blobStorageAccount="myblobstorage" + (Get-Random).ToString()
echo $blobStorageAccount
New-AzStorageAccount -ResourceGroupName $rgName -Name $blobStorageAccount -SkuName Standard_LRS -Location $region -Kind StorageV2 -AccessTier Hot -AllowBlobPublicAccess $true

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

Aplikace používá v účtu služby Blob Storage dva kontejnery. Aplikace nahrává obrázky v plném rozlišení do kontejneru images. V druhém kroku série aplikace funkcí Azure nahraje miniatury obrázků se změněnou velikostí do kontejneru miniatur .

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

Azure CLI

Pomocí příkazu az storage account keys list zjistěte klíč účtu úložiště. Pak pomocí tohoto klíče vytvořte dva kontejnery pomocí příkazu 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

PowerShell

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 $rgName -Name $blobStorageAccount)| Where-Object {$_.KeyName -eq "key1"}).Value
$blobStorageContext = New-AzStorageContext -StorageAccountName $blobStorageAccount -StorageAccountKey $blobStorageAccountKey

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

Ukázková aplikace se připojí k účtu úložiště pomocí názvu a přístupového klíče.

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:

Azure CLI

Pomocí příkazu az appservice plan create vytvořte plán služby App Service.

planName="MyAppServicePlan"
az appservice plan create --name $planName --resource-group $rgName --sku Free

PowerShell

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

$planName="MyAppServicePlan"
New-AzAppServicePlan -ResourceGroupName $rgName -Name $planName -Tier "Free" -Location $region

Vytvoření webové aplikace

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

Azure CLI

Pomocí příkazu az webapp create vytvořte webovou aplikaci v plánu služby App Service myAppServicePlan.

webapp="mywebapp$RANDOM"

az webapp create --name $webapp --resource-group $rgName --plan $planName

PowerShell

Pomocí příkazu New-AzWebApp vytvořte webovou aplikaci v plánu služby App Service. Poznamenejte si název webové aplikace. Výchozí adresa URL webové aplikace je https://<web_app>.azurewebsites.net.

$webapp="MyWebApp" + (Get-Random).ToString()
echo $webapp
New-AzWebApp -ResourceGroupName $rgName -Name $webapp -AppServicePlan $planName

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 aplikaci 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á obory názvů Azure.Storage, Azure.Storage.Blobs a Azure.Storage.Blobs.Models k interakci se službou Azure Storage.

Azure CLI

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

PowerShell

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

Konfigurace nastavení webové aplikace

Ukázková webová aplikace používá k nahrání obrázků rozhraní API služby Azure Storage pro .NET . Přihlašovací údaje účtu úložiště jsou nastavené v nastavení aplikace pro webovou aplikaci. Přidejte do nasazené aplikace nastavení aplikace pomocí příkazu az webapp config appsettings set nebo New-AzStaticWebAppSetting .

Azure CLI

az webapp config appsettings set --name $webapp --resource-group $rgName \
  --settings AzureStorageConfig__AccountName=$blobStorageAccount \
    AzureStorageConfig__ImageContainer=images \
    AzureStorageConfig__ThumbnailContainer=thumbnails \
    AzureStorageConfig__AccountKey=$blobStorageAccountKey

PowerShell

Set-AzWebApp -ResourceGroupName $rgName -Name $webapp -AppSettings `
  @{ `
    '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.

Odeslat obrázek

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. Potom vyberte oblast Nahrát fotky a určete a nahrajte soubor nebo přetáhněte soubor do oblasti. Obrázek po úspěšném nahrání zmizí. Oddíl Vygenerované miniatury zůstane prázdný, dokud ho později v tomto kurzu netestujeme.

Poznámka:

Spuštěním následujícího příkazu získejte název webové aplikace: echo $webapp

V ukázkovém kódu UploadFileToStorage se úloha v souboru Storagehelper.cs používá k nahrání obrázků do kontejneru imagí 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
Identifikátor URI	Konstruktor URI
StorageSharedKeyCredential	StorageSharedKeyCredential(String, String) – konstruktor
BlobClient	UploadAsync

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

1. Přihlaste se k portálu Azure. V nabídce vlevo vyberte Účty úložiště a potom vyberte název svého účtu úložiště.

   Poznámka:

   Spuštěním následujícího příkazu získejte název účtu úložiště: echo $blobStorageAccount.

2. V nabídce vlevo v části Úložiště dat vyberte Kontejnery.

3. Vyberte kontejner objektů blob obrázků.

4. Zkontrolujte, jestli se obrázek v kontejneru zobrazuje.

   

Test zobrazení miniatury

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

1. Přihlaste se k portálu Azure. 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 miniatur. Výběrem položky Nahrát otevřete podokno Nahrát objekt blob.

2. Zvolte soubor s výběrem souboru a vyberte Nahrát.

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

   

4. Ve druhé části série automatizujete vytváření miniatur, takže tento obrázek nepotřebujete. V kontejneruminiaturch

Další kroky

Aktivace funkce Azure pro změnu velikosti obrázku pomocí Event Gridu