Öğretici: Azure Depolama ile bulutta görüntü verilerini karşıya yükleme

Bu öğretici, bir dizinin birinci bölümüdür. Bu öğreticide, web uygulaması dağıtmayı öğrenirsiniz. Web uygulaması, depolama Azure Blob Depolama yüklemek için Azure Blob Depolama kitaplığını kullanır. Bitirdikten sonra, Azure depolamadan görüntüleri depolar ve görüntüleyen bir web uygulamasına sahip olursunuz.

Serinin birinci bölümünde şunları öğrenirsiniz:

  • Depolama hesabı oluşturma
  • Kapsayıcı oluşturma ve izinleri ayarlama
  • Erişim anahtarı alma
  • Bir web uygulamasını Azure’a dağıtma
  • Uygulama ayarlarını yapılandırma
  • Web uygulamasıyla etkileşim kurma

Önkoşullar

Bu öğreticiyi tamamlamak için bir Azure aboneliğinizin olması gerekir. Başlamadan önce ücretsiz bir hesap oluşturun.

Azure Cloud Shell kullanma

Azure, tarayıcınız aracılığıyla kullanabileceğiniz etkileşimli bir kabuk ortamı olan Azure Cloud Shell’i barındırır. Azure hizmetleriyle çalışmak için Cloud Shell ile Bash veya PowerShell kullanabilirsiniz. Bu makaledeki kodu, yerel ortamınıza herhangi bir şey yüklemeye gerek kalmadan çalıştırmak için Cloud Shell’in önceden yüklenmiş komutlarını kullanabilirsiniz.

Azure Cloud Shell’i başlatmak için:

Seçenek Örnek/Bağlantı
Kod bloğunun sağ üst köşesindeki Deneyin’i seçin. Deneyin seçeneği belirlendiğinde, kod otomatik olarak Cloud Shell’e kopyalanmaz. Azure Cloud Shell için Deneyin örneği
Cloud Shell’i tarayıcınızda açmak için https://shell.azure.com bölümüne gidin veya Cloud Shell’i Başlat düğmesini seçin. Cloud Shell’i yeni bir pencerede başlatma
Azure portalın sağ üst köşesindeki menü çubuğunda yer alan Cloud Shell düğmesini seçin. Azure portaldaki Cloud Shell düğmesi

Azure Cloud Shell’de bu makaledeki kodu çalıştırmak için:

  1. Cloud Shell’i başlatın.

  2. Kodu kopyalamak için kod bloğunda Kopyala düğmesini seçin.

  3. Windows ve Linux sisteminde Ctrl+Shift+V tuşlarını kullanarak veya macOS’de Cmd+Shift+V tuşlarını kullanarak kodu Cloud Shell oturumuna yapıştırın.

  4. Kodu çalıştırmak için Enter tuşuna basın.

CLI'i yerel olarak yüklemek ve kullanmak için Azure CLI 2.0.4 veya sonraki bir sürümünü çalıştırın. Sürümü bulmak için az --version komutunu çalıştırın. Yükleme veya yükseltme yapmanız gerekirse bkz. Azure CLI’yı yükleme.

Kaynak grubu oluşturma

Aşağıdaki örnek myResourceGroup adlı bir kaynak grubu oluşturur.

New-AzResourceGroup komutuyla bir kaynak grubu oluşturun. Azure kaynak grubu, Azure kaynaklarının dağıtıldığı ve yönetildiği bir mantıksal kapsayıcıdır.

New-AzResourceGroup -Name myResourceGroup -Location southeastasia

Depolama hesabı oluşturma

Örnek, görüntüleri Bir Azure depolama hesabı içinde bir blob kapsayıcıya yükler. Depolama hesabı, Azure Storage veri nesnelerinizi depolamak ve bunlara erişmek için benzersiz ad alanı sağlar.

Önemli

Öğreticinin 2. bölümünde Blob depolama ile Azure Event Grid kullanırsanız. Depolama hesabı oluşturmanızı destekleyen bir Azure bölgesinde Event Grid. Desteklenen bölgelerin listesi için bkz. Bölgeye göre Azure ürünleri.

Aşağıdaki komutta, yer tutucusunu gördüğünüz Blob depolama hesabının genel olarak benzersiz adını <blob_storage_account> değiştirin.

New-AzStorageAccount komutunu kullanarak oluşturduğunuz kaynak grubunda bir depolama hesabı oluşturun.

$blobStorageAccount="<blob_storage_account>"

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

Blob depolama kapsayıcıları oluşturma

Uygulama, Blob depolama hesabında iki kapsayıcı kullanır. Kapsayıcılar klasörlere ve depo bloblara benzer. Images kapsayıcısı, uygulamanın tam çözünürlüklü görüntüleri yüklediği yerdir. Serinin sonraki bir bölümünde, Bir Azure işlev uygulaması yeniden boyutlandırılmış görüntü küçük resimlerini *küçük resim'e yükler

Images kapsayıcısı genel erişimi olarak off ayarlanır. thumbnails kapsayıcısı genel erişimi olarak container ayarlanır. Genel container erişim ayarı, web sayfasını ziyaret eden kullanıcıların küçük resimleri görüntülemesini sağlar.

Get-AzStorageAccountKey komutunu kullanarak depolama hesabı anahtarını alın. Ardından, New-AzStorageContainer komutuyla iki kapsayıcı oluşturmak için bu anahtarı kullanın.

$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

Blob depolama hesabı adı ve anahtarınızı not etmek. Örnek uygulama, görüntüleri karşıya yüklemek için depolama hesabına bağlanmak için bu ayarları kullanır.

App Service planı oluşturma

App Service planı, uygulamanızı barındıran web sunucusu grubunun konumunu, boyutunu ve özelliklerini belirtir.

Aşağıdaki örnekte, Ücretsiz fiyatlandırma katmanı kullanılarak myAppServicePlan adlı bir App Service planı oluşturulmaktadır:

New-AzAppServicePlan komutuyla App Service planı oluşturun.

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

Web uygulaması oluşturma

Web uygulaması, GitHub örnek deposundan dağıtılan örnek uygulama kodu için bir barındırma alanı sağlar.

Aşağıdaki komutta yerine <web_app> benzersiz bir ad yazın. Geçerli karakterler: a-z, 0-9 ve -. Benzersiz <web_app> değilse şu hata iletisini alırsınız: Verilen adla web sitesi zaten <web_app> var. Web uygulamasının varsayılan URL'si https://<web_app>.azurewebsites.net şeklindedir.

myAppServicePlan New-AzWebApp komutuyla App Service planında bir web uygulaması oluşturun.

$webapp="<web_app>"

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

GitHub deposundan örnek uygulamayı dağıtma

App Service bir web uygulamasına içerik dağıtmanın birkaç yolunu destekler. Bu öğreticide, web uygulamasını bir genel GitHub örnek deposundan dağıtırsınız. az webapp deployment source config komutuyla Git dağıtımını web uygulamasında gerçekleşecek şekilde yapılandırın.

Örnek proje bir MVC ASP.NET içerir. Uygulama bir görüntüyü kabul eder, bir depolama hesabına kaydeder ve küçük resim kapsayıcısı görüntülerini görüntüler. Web uygulaması, Azure Depolama hizmetiyle etkileşim kurmak için Azure.Storage, Azure.Storage.Blobsve Azure.Storage.Blobs.Models ad alanlarını kullanır.

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

Web uygulaması ayarlarını yapılandırma

Örnek web uygulaması, görüntüleri karşıya yüklemek için .NET için Azure Depolama API'lerini kullanır. Depolama hesabı kimlik bilgileri, web uygulamasının uygulama ayarlarında ayarlanır. az webapp config appsettings set veya New-AzStaticWebAppSetting komutuyla uygulama ayarlarını dağıtılan uygulamaya ekleyin.

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

Web uygulamasını dağıtın ve yapılandırdikten sonra, uygulamada görüntü karşıya yükleme işlevselliğini test edin.

Bir görüntüyü karşıya yükleme

Web uygulamasını test etmek için, yayımlanan uygulamanızın URL'sine gidin. Web uygulamasının varsayılan URL'si https://<web_app>.azurewebsites.net şeklindedir.

Bir dosya belirtmek ve karşıya yüklemek için Fotoğrafları karşıya yükle bölgeyi seçin veya bir dosyayı bölgeye sürükleyin. Görüntü başarıyla karşıya yüklenirse kaybolur. Oluşturulan Küçük Resimler bölümü, bu öğreticinin ilerleyen kısımlarında test olana kadar boş kalır.

.NET'te Fotoğrafları Karşıya Yükleme

Örnek kodda, UploadFileToStorage Storagehelper.cs dosyasındaki görev, UploadAsync yöntemini kullanarak görüntüleri depolama hesabındaki images kapsayıcıya yüklemek için kullanılır. Aşağıdaki kod örneği UploadFileToStorage görevini içerir.

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

Aşağıdaki sınıflar ve yöntemler, yukarıdaki görevde kullanılır:

Sınıf Yöntem
Urı Uri oluşturucusu
StorageSharedKeyCredential StorageSharedKeyCredential(Dize, Dize) oluşturucusu
BlobClient UploadAsync

Depolama hesabında görüntünün gösterildiğini doğrulayın

Azure portalında oturum açın. Soldaki menüden Depolama hesapları’nı ve sonra depolama hesabınızın adını seçin. Kapsayıcılar'ı ve ardından images kapsayıcıyı seçin.

Kapsayıcıda görüntünün gösterildiğini doğrulayın.

Azure portal kapsayıcısı listesi

Küçük resim görüntülemeyi test etme

Küçük resim görüntülemeyi test etmek için, uygulamanın thumbnails kapsayıcısını okuyabilip okuyabile olmadığını kontrol etmek için thumbnails kapsayıcısına bir görüntü yükleyebilirsiniz.

Azure portalında oturum açın. Soldaki menüden Depolama hesapları’nı ve sonra depolama hesabınızın adını seçin. Kapsayıcılar'ı ve ardından thumbnails kapsayıcıyı seçin. Karşıya Yükle’yi seçerek Blobu karşıya yükle bölmesini açın.

Dosya seçicisi olan bir dosya seçin ve Karşıya Yükle'yi seçin.

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.

Serinin ikinci bölümünde küçük resim oluşturma işlemini otomatikleştirin, böylece bu görüntüye ihtiyacınız yoktur. Thumbnails kapsayıcısı içinde karşıya yüklediğiniz görüntüyü seçin ve Sil'i seçerek görüntüyü kaldırın.

Azure depolama Content Delivery Network önbelleğe Content Delivery Network (CDN) etkinleştirebilirsiniz. Daha fazla bilgi için bkz. Azure CDN ile bir Azure depolama hesabını tümleştirme.

Sonraki adımlar

Serinin ilk bölümünde, bir web uygulamasını depolama ile etkileşim kuracak şekilde yapılandırmayı öğrendinsiniz.

Görüntüyü yeniden boyutlandırmak için Azure işlevini tetiklemek için Event Grid kullanma hakkında bilgi edinmek için serinin ikinci parçasına gidin.