Öğretici: Azure Depolama ile buluta görüntü verileri yüklemeTutorial: Upload image data in the cloud with Azure Storage

Bu öğretici, bir dizinin birinci bölümüdür.This tutorial is part one of a series. Bu öğreticide, bir depolama hesabına görüntü yüklemek için Azure depolama istemci kitaplığı kullanan web uygulamasının nasıl dağıtılacağını öğreneceksiniz.In this tutorial, you will learn how to deploy a web app that uses the Azure Storage Client Library to upload images to a storage account. İşlemi tamamladığınızda, depolar ve Azure depolamadaki görüntüleri görüntüleyen bir web uygulaması oluşturmuş olacaksınız.When you're finished, you'll have a web app that stores and displays images from Azure storage.

Serinin birinci bölümünde şunları öğrenirsiniz:In part one of the series, you learn how to:

  • Depolama hesabı oluşturmaCreate a storage account
  • Kapsayıcı oluşturma ve izinleri ayarlamaCreate a container and set permissions
  • Erişim anahtarı almaRetrieve an access key
  • Bir web uygulamasını Azure'a dağıtmaDeploy a web app to Azure
  • Uygulama ayarlarını yapılandırmaConfigure app settings
  • Web uygulaması ile etkileşim kurmaInteract with the web app

ÖnkoşullarPrerequisites

Bu öğreticiyi tamamlamak için bir Azure aboneliğinizin olması gerekir.To complete this tutorial, you need an Azure subscription. Oluşturma bir ücretsiz bir hesap başlamadan önce.Create a free account before you begin.

Azure Cloud Shell kullanmaUse Azure Cloud Shell

Azure, Azure Cloud Shell, tarayıcınız üzerinden kullanabileceğiniz bir etkileşimli Kabuk ortamını barındırır.Azure hosts Azure Cloud Shell, an interactive shell environment that you can use through your browser. Cloud Shell'i ya da kullanmanıza imkan tanır bash veya PowerShell Azure hizmetleriyle çalışmak için.Cloud Shell lets you use either bash or PowerShell to work with Azure services. Cloud Shell önceden yüklenmiş komutları, yerel ortamınızda herhangi bir yükleme gerekmeden bu makaledeki kodu çalıştırmak için kullanabilirsiniz.You can use the Cloud Shell pre-installed commands to run the code in this article without having to install anything on your local environment.

Azure Cloud Shell'i başlatmak için:To launch Azure Cloud Shell:

SeçenekOption Örnek/bağlantıExample/Link
Kod bloğunun sağ üst köşesindeki Deneyin’i seçin.Select Try It in the upper-right corner of a code block. Seçme deneyin kod Cloud Shell için otomatik olarak kopyalamaz.Selecting Try It doesn't automatically copy the code to Cloud Shell. Örneği Azure Cloud Shell için deneyin
Git https://shell.azure.com veya Cloud Shell'i Başlat Cloud Shell, tarayıcınızda açmak için düğmeyi.Go to https://shell.azure.com or select the Launch Cloud Shell button to open Cloud Shell in your browser. <a href="https://shell.azure.com" title="Azure Cloud Shell'i Başlat
Seçin Cloud Shell düğmesine sağ üst menü çubuğundaki Azure portalında.Select the Cloud Shell button on the top-right menu bar in the Azure portal. Azure portaldaki Cloud Shell düğmesi

Bu makalede Azure Cloud shell'de kod çalıştırmak için:To run the code in this article in Azure Cloud Shell:

  1. Cloud Shell'i başlatın.Launch Cloud Shell.
  2. Seçin kopyalama kodu kopyalamak için bir kod bloğu üzerinde düğmesi.Select the Copy button on a code block to copy the code.
  3. Cloud Shell oturumla kodu yapıştırın Ctrl+Shift+V Windows ve Linux'ta veya Cmd + Shift+V macOS üzerinde.Paste the code into the Cloud Shell session with Ctrl+Shift+V on Windows and Linux, or Cmd+Shift+V on macOS.
  4. Tuşuna Enter kodu çalıştırmak için.Press Enter to run the code.

CLI'yi yerel olarak yükleyip kullanmayı için Bu öğretici, Azure CLI 2.0.4 sürümü çalıştırmanızı gerektirir veya üzeri.To install and use the CLI locally, this tutorial requires that you run the Azure CLI version 2.0.4 or later. Sürümü bulmak için az --version komutunu çalıştırın.Run az --version to find the version. Yükleme veya yükseltme yapmanız gerekirse bkz. Azure CLI’yı yükleme.If you need to install or upgrade, see Install the Azure CLI.

Kaynak grubu oluşturmaCreate a resource group

az group create komutuyla bir kaynak grubu oluşturun.Create a resource group with the az group create command. Azure kaynak grubu, Azure kaynaklarının dağıtıldığı ve yönetildiği bir mantıksal kapsayıcıdır.An Azure resource group is a logical container into which Azure resources are deployed and managed.

Aşağıdaki örnek myResourceGroup adlı bir kaynak grubu oluşturur.The following example creates a resource group named myResourceGroup.

az group create --name myResourceGroup --location southeastasia 

Depolama hesabı oluşturmaCreate a storage account

Örnek, görüntüleri bir Azure Depolama Hesabındaki blob kapsayıcısına yükler.The sample uploads images to a blob container in an Azure Storage account. Depolama hesabı, Azure Storage veri nesnelerinizi depolamak ve bunlara erişmek için benzersiz ad alanı sağlar.A storage account provides a unique namespace to store and access your Azure storage data objects. Oluşturduğunuz kaynak grubunda az storage account create komutunu kullanarak bir depolama hesabı oluşturun.Create a storage account in the resource group you created by using the az storage account create command.

Önemli

Öğreticinin 2 Blob Depolama ile Azure Event grid'i kullanın.In part 2 of the tutorial, you use Azure Event Grid with Blob storage. Event Grid destekleyen bir Azure bölgesinde depolama hesabınızı oluşturduğunuzdan emin olun.Make sure to create your storage account in an Azure region that supports Event Grid. Desteklenen bölgelerin bir listesi için bkz. bölgelere göre Azure ürünleri.For a list of supported regions, see Azure products by region.

Aşağıdaki komutta, gördüğünüz Blob Depolama hesabına ilişkin kendi genel benzersiz adınızı değiştirin <blob_storage_account> yer tutucu.In the following command, replace your own globally unique name for the Blob storage account where you see the <blob_storage_account> placeholder.

blobStorageAccount=<blob_storage_account>

az storage account create --name $blobStorageAccount \
--location southeastasia --resource-group myResourceGroup \
--sku Standard_LRS --kind blobstorage --access-tier hot 

BLOB Depolama kapsayıcıları oluşturmaCreate Blob storage containers

Uygulama, Blob depolama hesabında iki kapsayıcı kullanır.The app uses two containers in the Blob storage account. Kapsayıcılar klasörlere benzer ve blobları depolamak.Containers are similar to folders and store blobs. Images kapsayıcısı, uygulamanın tam çözünürlüklü görüntüleri yüklediği yerdir.The images container is where the app uploads full-resolution images. Serinin sonraki bölümlerinde bir Azure işlev uygulaması, yeniden boyutlandırılan küçük resimleri thumbnails kapsayıcısına yükler.In a later part of the series, an Azure function app uploads resized image thumbnails to the thumbnails container.

az storage account keys list komutunu kullanarak depolama hesabı anahtarını alın.Get the storage account key by using the az storage account keys list command. Ardından, iki kapsayıcı içeren oluşturmak için bu anahtarı kullanırsınız az depolama kapsayıcısı oluşturma komutu.Then, use this key to create two containers with the az storage container create command.

Görüntüleri kapsayıcının genel erişim ayarı off.The images container's public access is set to off. Küçük resimleri kapsayıcının genel erişim ayarı container.The thumbnails container's public access is set to container. container Genel erişim ayarı küçük resimleri görüntülemek için web sayfasını ziyaret eden kullanıcılara izin verir.The container public access setting permits users who visit the web page to view the thumbnails.

blobStorageAccountKey=$(az storage account keys list -g myResourceGroup \
-n $blobStorageAccount --query [0].value --output tsv)

az storage container create -n images --account-name $blobStorageAccount \
--account-key $blobStorageAccountKey --public-access off

az storage container create -n thumbnails --account-name $blobStorageAccount \
--account-key $blobStorageAccountKey --public-access container

echo "Make a note of your Blob storage account key..."
echo $blobStorageAccountKey

Blob Depolama hesabı adı ve anahtarı not edin.Make a note of your Blob storage account name and key. Örnek uygulama, görüntüleri karşıya yüklemek için depolama hesabına bağlanmak için bu ayarları kullanır.The sample app uses these settings to connect to the storage account to upload the images.

App Service planı oluşturmaCreate an App Service plan

App Service planı, uygulamanızı barındıran web sunucusu grubunun konumunu, boyutunu ve özelliklerini belirtir.An App Service plan specifies the location, size, and features of the web server farm that hosts your app.

az appservice plan create komutu ile bir App Service planı oluşturun.Create an App Service plan with the az appservice plan create command.

Aşağıdaki örnekte, Ücretsiz fiyatlandırma katmanı kullanılarak myAppServicePlan adlı bir App Service planı oluşturulmaktadır:The following example creates an App Service plan named myAppServicePlan in the Free pricing tier:

az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku Free

Web uygulaması oluşturmaCreate a web app

Web uygulaması, GitHub örnek deposundan dağıtılan örnek uygulama kodu için bir barındırma alanı sağlar.The web app provides a hosting space for the sample app code that's deployed from the GitHub sample repository. az webapp create komutuyla myAppServicePlan App Service planında bir web uygulaması oluşturun.Create a web app in the myAppServicePlan App Service plan with the az webapp create command.

Aşağıdaki komutta <web_app> benzersiz bir ada sahip.In the following command, replace <web_app> with a unique name. Geçerli karakterler: a-z, 0-9, ve -.Valid characters are a-z, 0-9, and -. Varsa <web_app> olan benzersiz değilse, hata iletisiyle karşılaşırsınız: Verilen ada sahip Web sitesi <web_app> zaten mevcut.If <web_app> is not unique, you get the error message: Website with given name <web_app> already exists. Web uygulamasının varsayılan URL'si https://<web_app>.azurewebsites.net şeklindedir.The default URL of the web app is https://<web_app>.azurewebsites.net.

webapp=<web_app>

az webapp create --name $webapp --resource-group myResourceGroup --plan myAppServicePlan

GitHub deposundan örnek uygulamayı dağıtmaDeploy the sample app from the GitHub repository

App Service bir web uygulamasına içerik dağıtmanın birkaç yolunu destekler.App Service supports several ways to deploy content to a web app. Bu öğreticide, web uygulamasını bir genel GitHub örnek deposundan dağıtırsınız.In this tutorial, you deploy the web app from a public GitHub sample repository. az webapp deployment source config komutuyla Git dağıtımını web uygulamasında gerçekleşecek şekilde yapılandırın.Configure GitHub deployment to the web app with the az webapp deployment source config command.

Örnek Proje içeren bir ASP.NET MVC uygulama.The sample project contains an ASP.NET MVC app. Uygulama görüntüyü kabul eden, bir depolama hesabına kaydeden ve küçük resim kapsayıcısından görüntüleri görüntüler.The app accepts an image, saves it to a storage account, and displays images from a thumbnail container. Web uygulaması kullandığı Microsoft.Azure.Storage, Microsoft.Azure.Storage.Blobve Azure ile etkileşim kurmak için Azure depolama istemci Kitaplığı'ndan Microsoft.Azure.Storage.Auth ad alanları depolama alanı.The web app uses the Microsoft.Azure.Storage, Microsoft.Azure.Storage.Blob, and the Microsoft.Azure.Storage.Auth namespaces from the Azure Storage client library to interact with Azure storage.

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

Web uygulaması ayarlarını yapılandırmaConfigure web app settings

Örnek web uygulaması, görüntüleri karşıya yüklemek için kullanılan erişim belirteçlerini istemek için Azure Depolama İstemci Kitaplığı’nı kullanır.The sample web app uses the Azure Storage Client Library to request access tokens, which are used to upload images. Depolama SDK'sı tarafından kullanılan depolama hesabı kimlik bilgileri, web uygulaması için uygulama ayarları olarak ayarlanır.The storage account credentials used by the Storage SDK are set in the app settings for the web app. Uygulama ayarlarını dağıtılmış uygulamaya ekleyin az webapp config appsettings set komutu.Add app settings to the deployed app with the az webapp config appsettings set command.

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

Dağıtma ve web uygulaması'ı yapılandırdıktan sonra uygulamada görüntüyü karşıya yükleme işlevini test edebilirsiniz.After you deploy and configure the web app, you can test the image upload functionality in the app.

Bir görüntüyü karşıya yüklemeUpload an image

Web uygulamasını test etmek için, yayımlanan uygulamanızın URL'sine gidin.To test the web app, browse to the URL of your published app. Web uygulamasının varsayılan URL'si https://<web_app>.azurewebsites.net şeklindedir.The default URL of the web app is https://<web_app>.azurewebsites.net.

Seçin fotoğrafları karşıya yükle bölgeyi seçin ve bir dosyayı karşıya yükleyin veya bir dosyayı bölgenin sürükleyin.Select the Upload photos region to select and upload a file, or drag a file onto the region. Görüntü başarıyla karşıya yüklenirse kaybolur.The image disappears if successfully uploaded. Oluşturulan küçük resimler bu konunun ilerleyen bölümlerinde test edebiliriz kadar bölümü boş kalır.The Generated Thumbnails section will remain empty until we test it later in this topic.

. NET'te fotoğraf yükleyin

Örnek kodda UploadFiletoStorage görevi Storagehelper.cs görüntüleri karşıya yüklemek için kullanılan dosya görüntüleri kullanarak depolama hesabı içinde kapsayıcı UploadFromStreamAsync yöntemi.In the sample code, the UploadFiletoStorage task in the Storagehelper.cs file is used to upload the images to the images container within the storage account using the UploadFromStreamAsync method. Aşağıdaki kod örneği UploadFiletoStorage görevini içerir.The following code sample contains the UploadFiletoStorage task.

public static async Task<bool> UploadFileToStorage(Stream fileStream, string fileName, AzureStorageConfig _storageConfig)
{
    // Create storagecredentials object by reading the values from the configuration (appsettings.json)
    StorageCredentials storageCredentials = new StorageCredentials(_storageConfig.AccountName, _storageConfig.AccountKey);

    // Create cloudstorage account by passing the storagecredentials
    CloudStorageAccount storageAccount = new CloudStorageAccount(storageCredentials, true);

    // Create the blob client.
    CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();

    // Get reference to the blob container by passing the name by reading the value from the configuration (appsettings.json)
    CloudBlobContainer container = blobClient.GetContainerReference(_storageConfig.ImageContainer);

    // Get the reference to the block blob from the container
    CloudBlockBlob blockBlob = container.GetBlockBlobReference(fileName);

    // Upload the file
    await blockBlob.UploadFromStreamAsync(fileStream);

    return await Task.FromResult(true);
}

Aşağıdaki sınıflar ve yöntemler, yukarıdaki görevde kullanılır:The following classes and methods are used in the preceding task:

SınıfClass YöntemMethod
StorageCredentialsStorageCredentials
CloudStorageAccountCloudStorageAccount CreateCloudBlobClientCreateCloudBlobClient
CloudBlobClientCloudBlobClient GetContainerReferenceGetContainerReference
CloudBlobContainerCloudBlobContainer GetBlockBlobReferenceGetBlockBlobReference
CloudBlockBlobCloudBlockBlob UploadFromStreamAsyncUploadFromStreamAsync

Depolama hesabında görüntünün gösterildiğini doğrulayınVerify the image is shown in the storage account

Azure Portal oturum açın.Sign in to the Azure portal. Soldaki menüden Depolama hesapları’nı ve sonra depolama hesabınızın adını seçin.From the left menu, select Storage accounts, then select the name of your storage account. Altında Blob hizmetiseçin Blobları, ardından görüntüleri kapsayıcı.Under Blob Service, select Blobs, then select the images container.

Kapsayıcıda görüntünün gösterildiğini doğrulayın.Verify the image is shown in the container.

Kapsayıcı görüntülerini Azure portalı listesi

Küçük resim görüntülemeyi test etmeTest thumbnail viewing

Küçük resim görüntülemeyi test etmek için bir görüntü için karşıya yükleyelim küçük resimleri uygulamanın okuyabileceği olup olmadığını denetlemek için kapsayıcı küçük resimleri kapsayıcı.To test thumbnail viewing, you'll upload an image to the thumbnails container to check whether the app can read the thumbnails container.

Azure Portal oturum açın.Sign in to the Azure portal. Soldaki menüden Depolama hesapları’nı ve sonra depolama hesabınızın adını seçin.From the left menu, select Storage accounts, then select the name of your storage account. Altında Blob hizmetiseçin Blobları, ardından küçük resimleri kapsayıcı.Under Blob Service, select Blobs, then select the thumbnails container. Karşıya Yükle’yi seçerek Blobu karşıya yükle bölmesini açın.Select Upload to open the Upload blob pane.

Dosya Seçici ile bir dosya seçip seçin karşıya.Choose a file with the file picker and select Upload.

thumbnails kapsayıcısına yüklenen görüntünün görünür olduğunu doğrulamak için uygulamanıza geri gidin.Navigate back to your app to verify that the image uploaded to the thumbnails container is visible.

Serinin iki küçük resim oluşturma, bu yansıma böylece otomatikleştirin.In part two of the series, you automate thumbnail image creation so you don't need this image. Azure portalındaki thumbnails kapsayıcısında, karşıya yüklediğiniz görüntüyü seçin ve Sil’i seçerek görüntüyü silin.In the thumbnails container in the Azure portal, select the image you uploaded and select Delete to delete the image.

Azure depolama hesabınızdan içeriği önbelleğe almak için CDN etkinleştirebilirsiniz.You can enable CDN to cache content from your Azure storage account. Azure depolama hesabınızla CDN'yi etkinleştirme hakkında daha fazla bilgi için bkz. bir Azure depolama hesabını Azure CDN ile tümleştirme.For more information about how to enable CDN with your Azure storage account, see Integrate an Azure storage account with Azure CDN.

Sonraki adımlarNext steps

Bölümünde bir dizi depolama ile etkileşimde bulunmak için bir web uygulamasını yapılandırma hakkında bilgi edindiniz.In part one of the series, you learned how to configure a web app to interact with storage.

Serinin iki Event Grid kullanarak bir görüntüyü yeniden boyutlandırmaya yönelik Azure işlevini tetikleme hakkında bilgi edinmek için oturum gidin.Go on to part two of the series to learn about using Event Grid to trigger an Azure function to resize an image.