1. Adım: Azure Depolama ile görüntü verilerini buluta yükleme
Bu öğretici, bir serinin birinci bölümüdür. Bu öğreticide, bir web uygulamasını dağıtmayı öğreneceksiniz. Web uygulaması, görüntüleri bir depolama hesabına yüklemek için Azure Blob Depolama istemci kitaplığını kullanır.
Serinin birinci bölümünde aşağıdaki görevleri yerine getirin:
- 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
Azure, tarayıcınız aracılığıyla kullanabileceğiniz etkileşimli bir kabuk ortamı olan Azure Cloud Shell'i barındırıyor. Azure hizmetleriyle çalışmak için Cloud Shell ile Bash veya PowerShell kullanabilirsiniz. Yerel ortamınıza herhangi bir şey yüklemek zorunda kalmadan bu makaledeki kodu çalıştırmak için Cloud Shell önceden yüklenmiş komutlarını kullanabilirsiniz.
Azure Cloud Shell'i başlatmak için:
| Seçenek | Örnek/Bağlantı |
|---|---|
| Kodun veya komut bloğunun sağ üst köşesindeki Deneyin'i seçin. Deneyin seçildiğinde kod veya komut otomatik olarak Cloud Shell'e kopyalanmaz. |  |
| https://shell.azure.comadresine gidin veya Cloud Shell'i tarayıcınızda açmak için Cloud Shell'i Başlat düğmesini seçin. |  |
| Azure portalının sağ üst kısmındaki menü çubuğunda Cloud Shell düğmesini seçin. |  |
Azure Cloud Shell'i kullanmak için:
Cloud Shell'i başlatın.
Kodu veya komutu kopyalamak için kod bloğundaki (veya komut bloğundaki) Kopyala düğmesini seçin.
Windows ve Linux'ta Ctrl+Shift V'yi seçerek veya macOS üzerinde Cmd+Shift++V'yi seçerek kodu veya komutu Cloud Shell oturumuna yapıştırın.
Kodu veya komutu çalıştırmak için Enter'ı seçin.
Kaynak grubu oluşturma
Önemli
Öğreticinin 2. adımında Azure Event Grid'i bu adımda oluşturduğunuz blob depolama alanıyla birlikte kullanırsınız. Depolama hesabınızı Event Grid'i destekleyen bir Azure bölgesinde oluşturun. Desteklenen bölgelerin listesi için bkz . Bölgeye göre Azure ürünleri.
Azure Cloud Shell'de, henüz seçili değilse sol üst köşedeki Bash'i seçin.
az group create 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.
Not
ve
rgName(kaynak grubu adı) içinregionuygun değerleri ayarlayın.region="eastus" rgName="egridtutorialrg" az group create --name $rgName --location $region
Depolama hesabı oluşturma
Örnek, görüntüleri Azure depolama hesabındaki bir blob kapsayıcısına yükler.
Oluşturduğunuz kaynak grubunda az storage account create komutunu kullanarak bir depolama hesabı oluşturun.
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
Blob depolama kapsayıcıları oluşturma
Uygulama, Blob depolama hesabında iki kapsayıcı kullanır. Images kapsayıcısı, uygulamanın tam çözünürlüklü görüntüleri yüklediği yerdir. Serinin ikinci adımında, azure işlev uygulaması yeniden boyutlandırılmış görüntü küçük resimlerini thumbnails kapsayıcısına yükler.
Images kapsayıcısının genel erişimi olarak offayarlanır. Küçük resim kapsayıcısının genel erişimi olarak containerayarlanır. Genel erişim ayarı, container web sayfasını ziyaret eden kullanıcıların küçük resimleri görüntülemesine izin verir.
az storage account keys list komutunu kullanarak depolama hesabı anahtarını alın. Ardından az storage container create komutuyla iki kapsayıcı oluşturmak için bu anahtarı kullanın.
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
Örnek uygulama, adını ve erişim anahtarını kullanarak depolama hesabına bağlanı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:
az appservice plan create komutu ile bir App Service planı oluşturun.
planName="MyAppServicePlan"
az appservice plan create --name $planName --resource-group $rgName --sku 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.
az webapp create komutuyla myAppServicePlan App Service planında bir web uygulaması oluşturun.
webapp="mywebapp$RANDOM"
az webapp create --name $webapp --resource-group $rgName --plan $planName
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 ASP.NET MVC uygulaması içerir. Uygulama bir görüntüyü kabul eder, bir depolama hesabına kaydeder ve küçük resim kapsayıcısından görüntüler. Web uygulaması Azure.Depolama, Azure.Depolama kullanır. Bloblar ve Azure.Depolama. Blobs.Azure Depolama hizmetiyle etkileşime geçmek için ad alanlarını modeller.
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
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 dağıtılan uygulamaya uygulama ayarları ekleyin.
az webapp config appsettings set --name $webapp --resource-group $rgName \
--settings AzureStorageConfig__AccountName=$blobStorageAccount \
AzureStorageConfig__ImageContainer=images \
AzureStorageConfig__ThumbnailContainer=thumbnails \
AzureStorageConfig__AccountKey=$blobStorageAccountKey
Web uygulamasını dağıtıp yapılandırdıktan sonra, görüntü yükleme işlevini uygulamada test edebilirsiniz.
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. Ardından, Bir dosya belirtmek ve karşıya yüklemek için Fotoğrafları karşıya yükle bölgesini seçin veya 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 bölümlerinde test edilene kadar boş kalır.
Not
Web uygulamasının adını almak için aşağıdaki komutu çalıştırın: echo $webapp
Örnek kodda, UploadFileToStorage Depolama helper.cs dosyasındaki görev UploadAsync yöntemi kullanılarak görüntüleri depolama hesabı içindeki images kapsayıcısına 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 | Method |
|---|---|
| Uri | Uri oluşturucu |
| Depolama SharedKeyCredential | Depolama SharedKeyCredential(String, String) oluşturucu |
| 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.
Not
Depolama hesabının adını almak için aşağıdakileri çalıştırın:
echo $blobStorageAccount.Soldaki menüde, Veri depolama bölümünde Kapsayıcılar'ı seçin.
Images blob kapsayıcısını seçin.
Kapsayıcıda görüntünün gösterildiğini doğrulayın.
Küçük resim görüntülemeyi test etme
Küçük resim görüntülemeyi test etmek için küçük resim kapsayıcısına bir görüntü yükleyerek uygulamanın küçük resim kapsayıcısını okuyup okuyamadığını denetlersiniz.
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ısını 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ştirerek bu görüntüye ihtiyacınız olmayacaktır. Küçük resim kapsayıcısında karşıya yüklediğiniz görüntüyü seçin ve sil'i seçerek görüntüyü kaldırın.