Aracılığıyla paylaş

JavaScript ile Azure Depolama blob'larına görüntü yükleme

  • Makale

Azure Depolama SAS belirtecine sahip bir Azure Depolama @azure/storage-blob npm paketi kullanarak azure Depolama bloba dosya yüklemek için statik bir web uygulaması kullanın.

Önkoşullar

Uygulama mimarisi

Bu uygulama mimarisi iki Azure kaynağı içerir:

  • Statik olarak oluşturulan istemci uygulaması için Azure Static Web Apps. Kaynak ayrıca yönetilen Azure İşlevleri API'sini de sağlar. Yönetilen, Statik Web Apps kaynağının API kaynağını kendi kullanımı için yönettiği anlamına gelir.
  • Blob depolama için Azure Depolama.

Diagram showing how a customer interacts from their computer to use the website to upload a file to Azure Storage directly.

Adımlar Veri Akışı Açıklaması
1 Müşteri statik olarak oluşturulan web sitesine bağlanır. Web sitesi Azure Static Web Apps'te barındırılır.
2 Müşteri, karşıya yüklenecek dosyayı seçmek için bu web sitesini kullanır. Bu öğreticide, ön uç çerçevesi Vite React ve karşıya yüklenen dosya bir görüntü dosyasıdır.
3 Web sitesi, karşıya yüklenecek dosyanın tam dosya adına göre bir SAS belirteci almak için Azure İşlevleri API'sini sas çağırır. Sunucusuz API, SAS belirtecini oluşturmak için Azure Blob Depolama SDK'sını kullanır. API, sorgu dizesi olarak SAS belirtecini içeren dosyayı karşıya yüklemek için kullanılacak tam URL'yi döndürür.
https://YOUR-STORAGE-NAME.blob.core.windows.net/YOUR-CONTAINER/YOUR-FILE-NAME?YOUR-SAS-TOKEN
4 Ön uç web sitesi SAS belirteci URL'sini kullanarak dosyayı doğrudan Azure Blob Depolama'a yükler.

Yerel ve derleme ortamları

Bu öğreticide aşağıdaki ortamlar kullanılır:

  • GitHub Codespaces veya Visual Studio Code ile yerel geliştirme.
  • GitHub Actions ile derleme ve dağıtma.

1. GitHub ile çatal örnek uygulama deposu

Bu öğreticide, örnek uygulamayı Azure'a dağıtmak için GitHub eylemleri kullanılmaktadır. Bu dağıtımı tamamlamak için bir GitHub hesabı ve örnek uygulama deposu çatalı gerekir.

  1. Bir web tarayıcısında, örnek deponun kendi hesabınızın çatalını başlatmak için aşağıdaki bağlantıyı kullanın: Azure-Samples/azure-typescript-e2e-apps.
  2. Örneği yalnızca ana dal ile çatalla oluşturma adımlarını tamamlayın.

2. Geliştirme ortamını yapılandırma

Geliştirme kapsayıcısı ortamı, bu projedeki her alıştırmayı tamamlamak için gereken tüm bağımlılıklarla kullanılabilir. Geliştirme kapsayıcısını GitHub Codespaces'ta veya Visual Studio Code kullanarak yerel olarak çalıştırabilirsiniz.

GitHub Codespaces, Kullanıcı arabirimi olarak Web için Visual Studio Code ile GitHub tarafından yönetilen bir geliştirme kapsayıcısı çalıştırır. En basit geliştirme ortamı için GitHub Codespaces'ı kullanarak bu eğitim modülünü tamamlamak için doğru geliştirici araçlarını ve bağımlılıklarını önceden yüklemiş olursunuz.

Önemli

Tüm GitHub hesapları Codespaces'ı her ay 2 çekirdek örneğiyle 60 saate kadar ücretsiz olarak kullanabilir. Daha fazla bilgi için bkz . GitHub Codespaces aylık dahil depolama ve çekirdek saatler.

  1. Web tarayıcısında, örnek deponun GitHub çatalında KOD düğmesini seçerek çatalınızın dalında yeni bir GitHub Codespace main oluşturma işlemini başlatın.

    GitHub screenshot of Code Spaces buttons for a repository.

  2. Kod Alanları sekmesinde üç nokta ...simgesini seçin.

    GitHub screenshot of Code Spaces tab with ellipsis control highlighted.

  3. Belirli bir Codespaces geliştirme kapsayıcısını seçmek için + Seçeneklerle yeni'yi seçin.

    GitHub screenshot of Codespaces New with options menu item highlighted.

  4. Aşağıdaki seçenekleri belirleyin ve ardından Kod alanı oluştur'u seçin.

    • Şube: main
    • Geliştirme kapsayıcı yapılandırması: Tutorial: Upload file to storage with SAS Token
    • Bölge: varsayılanı kabul et
    • Makine türü: varsayılanı kabul et

    GitHub screenshot of Codespaces New with options menu with the following dev container highlighted, Tutorial: Upload file to storage with SAS Token.

  5. Kod alanının başlamasını bekleyin. Bu başlatma işlemi birkaç dakika sürebilir.

  6. Kod alanında yeni bir terminal açın.

    Bahşiş

    Ana menüyü kullanarak Terminal menüsü seçeneğine gidip Yeni Terminal seçeneğini belirleyebilirsiniz.

    Screenshot of the codespaces menu option to open a new terminal.

  7. Bu öğreticide kullandığınız araçların sürümlerini denetleyin.

    node --version
npm --version
func --version

    Bu öğretici, ortamınıza önceden yüklenmiş olan her aracın aşağıdaki sürümlerini gerektirir:

    Araç Sürüm
    Node.js ≥ 18
    npm ≥ 9.5
    temel araçları Azure İşlevleri ≥ 4.5098

  8. Terminali kapatın.

  9. Bu öğreticideki kalan adımlar bu geliştirme kapsayıcısı bağlamında gerçekleşir.

3. Bağımlılıkları yükleme

Bu öğreticinin örnek uygulaması klasöründedir azure-upload-file-to-storage . Projede başka klasör kullanmanız gerekmez.

  1. Visual Studio Code'da bir terminal açın ve proje klasörüne gidin.

    cd azure-upload-file-to-storage

  2. Terminali bölerek biri istemci uygulaması, biri de API uygulaması için olmak üzere iki terminale sahip olursunuz.

  3. Terminallerden birinde aşağıdaki komutu çalıştırarak API uygulamasının bağımlılıklarını yükleyin ve uygulamayı çalıştırın.

    cd api && npm install

  4. Diğer terminalde istemci uygulamasını yüklemek için komutunu çalıştırın.

    cd app && npm install

4. Visual Studio uzantısıyla Depolama kaynağı oluşturma

Örnek uygulamayla kullanılacak Depolama kaynağını oluşturun. Depolama şunlar için kullanılır:

  • Azure İşlevleri uygulamasında tetikleyiciler
  • Blob (dosya) depolama

  1. Azure Depolama uzantısına gidin.

  2. Gerekirse Azure'da oturum açın.

  3. Aboneliğe sağ tıklayın ve öğesini seçin Create Resource....

    Screenshot of Visual Studio Code in the Azure Explorer with the right-click menu showing the Create Resource item highlighted.

  4. Listeden Depolama Hesabı Oluştur'u seçin.

  5. Depolama kaynağınızın nasıl oluşturulacağını anlamak için aşağıdaki tabloyu kullanarak istemleri izleyin.

    Özellik Değer
    Yeni web uygulaması için genel olarak benzersiz bir ad girin. Depolama kaynak adınız için gibi fileuploadstorbenzersiz bir değer girin.

    Bu benzersiz ad, sonraki bölümde kullanılan kaynak adınızdır. Yalnızca en fazla 24 karakter ve sayı kullanın. Daha sonra kullanmak için bu hesap adına ihtiyacınız vardır.
    Yeni kaynaklar için bir konum seçin. Önerilen konumu kullanın.

  6. Uygulama oluşturma işlemi tamamlandığında, yeni kaynak hakkında bilgi içeren bir bildirim görüntülenir.

    Screenshot of Visual Studio Code showing the Azure Activity Bar and the notification that the storage account was successfully created.

5. DEPOLAMA CORS'yi yapılandırma

Tarayıcı dosyayı karşıya yüklemek için kullanıldığından, Azure Depolama hesabının çıkış noktaları arası isteklere izin vermek için CORS'yi yapılandırması gerekir.

  1. Azure Depolama uzantısına gidin. Depolama kaynağınıza sağ tıklayın ve Portalda Aç'ı seçin.

  2. Azure portalı depolama hesabı Ayarlar bölümünde Kaynak paylaşımı (CORS) öğesini seçin.

  3. Bu öğretici için CORS'yi ayarlamak için aşağıdaki özellikleri kullanın.

    • İzin verilen kaynaklar: *
    • İzin verilen yöntemler: Düzeltme eki dışında tümü
    • İzin verilen üst bilgiler: *
    • Kullanıma sunulan üst bilgiler: *
    • Maksimum yaş: 86400

    Bu ayarlar bu öğreticide adımları basitleştirmek için kullanılır ve en iyi yöntemleri veya güvenliği göstermek için tasarlanmamıştır. Azure Depolama için CORS hakkında daha fazla bilgi edinin.

  4. Kaydet'i seçin.

6. Depolamaya anonim erişim verme

Zaman sınırlı ve izin sınırlı bir SAS belirteci oluşturduğunuzda dosya karşıya yüklemenin güvenliği istemciden sağlanır. Ancak, dosya karşıya yüklendikten sonra bu öğretici senaryosunda herkesin görmesini istersiniz. Bunu yapmak için depolama iznini genel olarak erişilebilir olacak şekilde değiştirmeniz gerekir.

Hesaba genel erişim sağlansa da, her kapsayıcı ve her blob özel erişime sahip olabilir. Daha güvenli ancak bu öğretici için çok karmaşık bir yöntem, SAS belirteciyle bir depolama hesabına yüklemek ve ardından blobu genel erişime sahip başka bir depolama hesabına taşımaktır.

  1. Azure portalında genel erişimi etkinleştirmek için depolama hesabınızın Genel Bakış sayfasını seçin, Özellikler bölümünde Blob anonim erişimi'ni ve ardından Devre Dışı'nı seçin.
  2. Yapılandırma sayfasında Blob anonim erişimine izin ver'i etkinleştirin.

7. Karşıya yükleme kapsayıcısı oluşturma

  1. Azure portalı depolama hesabındayken Veri depolama bölümünde Kapsayıcılar'ı seçin.

  2. Kapsayıcınızı upload aşağıdaki ayarlarla oluşturmak için + Kapsayıcı'ya tıklayın:

    • Ad: upload
    • Genel erişim Düzeyi: Blob

  3. Oluştur’u seçin.

8. Kendinize Blob Verileri erişimi verme

Kaynağı oluştururken kapsayıcının içeriğini görüntüleme izniniz yoktur. Bu, belirli IAM rolleri için ayrılmıştır. Kapsayıcılardaki blobları görüntüleyebilmeniz için hesabınızı ekleyin.

  1. Yine Azure portalı depolama hesabında Erişim Denetimi (IAM) seçeneğini belirleyin.
  2. Rol atamaları ekle'yi seçin.
  3. Blob Veri Katkıda Bulunanı'Depolama arayın ve seçin. İleri'yi seçin.
  4. + Üyeleri seç seçeneğini belirleyin.
  5. Hesabınızı arayın ve seçin.
  6. Gözden geçir + ata'yı seçin.
  7. Kapsayıcılar'ı ve ardından kapsayıcıyı karşıya yükle'yi seçin. Yetkilendirme hatası olmadan kapsayıcıda blob olmadığını görebilmeniz gerekir.

9. Depolama kaynak kimlik bilgilerini alma

Depolama kaynak kimlik bilgileri, Depolama kaynağına bağlanmak için Azure İşlevleri API uygulamasında kullanılır.

  1. Azure portalındayken Güvenlik + ağ bölümünde Erişim anahtarları'nı seçin.

  2. API dosyalarının adresinde ./workspaces/azure-typescript-e2e-apps/azure-upload-file-to-storage/apibulunduğunu unutmayın.

  3. API klasöründe dosyasını olarak local.settings.json.sample local.settings.jsonyeniden adlandırın. Dosya Git tarafından yoksayılır, bu nedenle kaynak denetimine iade edilmez.

  4. Aşağıdaki tabloyu kullanmak için local.settings.json ayarları güncelleştirin.

    Özellik Değer Açıklama
    Azure_Depolama_AccountName Azure Depolama hesap adı, örneğin: fileuploadstor. kaynak kodunda Depolama kaynağa bağlanmak için kullanılır.
    Azure_Depolama_AccountKey Azure Depolama hesap anahtarı kaynak kodunda Depolama kaynağa bağlanmak için kullanılır.
    AzureWebJobsStorage Azure Depolama hesabı bağlantı dizesi Durum ve günlükleri depolamak için Azure İşlevleri çalışma zamanı tarafından kullanın.

Aynı hesap kimlik bilgilerini bir kez anahtar, bir kez de bağlantı dizesi olarak iki kez girmişsiniz gibi görünebilir. Yaptınız, ancak özellikle bu basit öğretici için. Genel olarak konuşursak, Azure İşlevleri uygulamaların başka bir amaçla yeniden kullanılamamış ayrı bir Depolama kaynağı olmalıdır. Öğreticinin devamında Azure İşlevi kaynağını oluşturduğunuzda, bulut kaynağı için AzureWebJobs Depolama değerini ayarlamanız gerekmez. Yalnızca kaynak kodda kullanılan Azure_Depolama_AccountName ve Azure_Depolama_AccountKey değerlerini ayarlamanız gerekir.

10. API uygulamasını çalıştırma

İşlevler Uygulamasını çalıştırarak Azure'a dağıtmadan önce düzgün çalıştığından emin olun.

  1. API uygulamasının terminalinde aşağıdaki komutu çalıştırarak API uygulamasını başlatın.

    npm run start

  2. Azure İşlevleri uygulaması başlatılana kadar bekleyin. Azure İşlevleri uygulamasının bağlantı noktası olan 7071'in kullanıma sunulduğuna dair bir bildirim alırsınız. API uygulamasının terminalinde listelenen API'leri de görmeniz gerekir.

    Functions:

        list: [POST,GET] http://localhost:7071/api/list

        sas: [POST,GET] http://localhost:7071/api/sas

        status: [GET] http://localhost:7071/api/status

  3. Alt bölmedeki Bağlantı Noktaları sekmesini seçin, ardından 7071 bağlantı noktasına sağ tıklayın ve Bağlantı Noktası Görünürlüğü'ne tıklayın ve genel'i seçin.

    Bu uygulamayı genel kullanıma sunmazsanız, istemci uygulamasından API'yi kullandığınızda bir hata alırsınız.

  4. API'nin çalışıp çalışmadığını ve depolamaya bağlandığını test etmek için, alt bölmedeki Bağlantı Noktaları sekmesinde 7071 numaralı bağlantı noktasının Yerel Adres alanındaki dünya simgesini seçin. Bu işlem, işlevler uygulamasının bir web tarayıcısını açar.

  5. API yolunu URL adres çubuğuna ekleyin: /api/sas?container=upload&file=test.png. Dosyanın henüz kapsayıcıda yer almamış olması sorun değil. API, SAS belirtecini karşıya yüklenmesini istediğiniz yere göre oluşturur.

  6. JSON yanıtı aşağıdakine benzer olmalıdır:

    {
    "url":"https://YOUR-STORAGE-RESOURCE.blob.core.windows.net/upload/test.png?sv=2023-01-03&spr=https&st=2023-07-26T22%3A15%3A59Z&se=2023-07-26T22%3A25%3A59Z&sr=b&sp=w&sig=j3Yc..."
}

  7. Sonraki adımda kullanmak üzere tarayıcı adres çubuğundaki API URL'sinin tabanını kopyalayın (JSON nesnesindeki SAS belirteci URL'sini değil). Temel URL, 'nin önceki /api/sasher şeyidir.

11. İstemci uygulamasını yapılandırma ve çalıştırma

  1. Dosyayı olarak .envyeniden adlandırın./azure-upload-file-to-storage/app/.env.sample.

  2. .env dosyasını açın ve önceki bölümdeki temel URL'yi değerini VITE_API_SERVERolarak yapıştırın.

    Codespaces ortamı örneği şuna benzer olabilir: VITE_API_SERVER=https://improved-space-fishstick-pgvxvxjpqgrh6qxp-7071.app.github.dev

  3. Diğer bölünmüş terminalde aşağıdaki komutla istemci uygulamasını başlatın:

    npm run dev

  4. Terminal, uygulamanın 5173 numaralı bağlantı noktasında kullanılabilir olduğuna ilişkin aşağıdaki bildirimi döndürene kadar bekleyin.

      VITE v4.4.4  ready in 410 ms

  ➜  Local:   https://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

  5. Alt bölmedeki Bağlantı Noktaları sekmesini seçin, ardından 5173 bağlantı noktasına sağ tıklayın ve dünya simgesini seçin.

  6. Basit web uygulamasını görmeniz gerekir.

    Screenshot of web browser showing web app with Select File button available.

  7. Web uygulamasıyla etkileşim kurma:

    • Karşıya yüklemek için yerel bilgisayarınızdan bir görüntü dosyası (*.jpg veya *.png) seçin.
    • API uygulamasından SAS belirteci istemek için SAS Al düğmesini seçin. Yanıt, dosyayı Depolama yüklemek için kullanılacak tam URL'yi gösterir.
    • Görüntü dosyasını doğrudan Depolama göndermek için Karşıya Yükle düğmesini seçin.

    Screenshot of web browser showing web app with the image file uploaded and a thumbnail of the file displayed.

  8. İstemci uygulaması ve API uygulaması kapsayıcılı geliştirici ortamında başarıyla birlikte çalıştı.

12. Kod değişikliklerini işleme

  1. Visual Studio Code'da Kaynak Denetimi sekmesini açın.
  2. Tüm değişiklikleri hazırlamak için simgeyi + seçin. Bu değişiklikler yalnızca bu öğreticinin app ve api klasörleri için yeni package-lock.json dosyalarını içermelidir.

13. Statik web uygulamasını Azure'a dağıtma

Azure İşlevleri uygulaması bir önizleme özelliği kullanıyor, düzgün çalışması için Batı ABD 2'ye dağıtılması gerekir.

  1. Visual Studio Code'da Azure gezginini seçin.

  2. Azure Gezgini'nde abonelik adına sağ tıklayın ve öğesini seçin Create Resource....

  3. Listeden Statik Web Uygulaması Oluştur'u seçin.

  4. Statik Web Uygulaması kaynağınızın nasıl oluşturulacağını anlamak için aşağıdaki tabloyu kullanarak istemleri izleyin.

    Özellik Değer
    Yeni web uygulaması için genel olarak benzersiz bir ad girin. Depolama kaynak adınız için gibi fileuploadstorbenzersiz bir değer girin.

    Bu benzersiz ad, sonraki bölümde kullanılan kaynak adınızdır. Yalnızca en fazla 24 karakter ve sayı kullanın. Daha sonra kullanmak için bu hesap adına ihtiyacınız vardır.
    Yeni kaynaklar için bir konum seçin. Önerilen konumu kullanın.

  5. Aşağıdaki bilgileri sağlamak için istemleri izleyin:

    İstem Enter
    Yeni kaynaklar için bir kaynak grubu seçin. Depolama kaynağınız için oluşturduğunuz kaynak grubunu kullanın.
    Yeni statik web uygulamasının adını girin. Varsayılan adı kabul edin.
    SKU seçme Bu öğretici için ücretsiz SKU'yu seçin. Aboneliğinizde zaten ücretsiz bir Statik Web Uygulaması kaynağı varsa sonraki fiyatlandırma katmanını seçin.
    Varsayılan proje yapısını yapılandırmak için derleme ön ayarını seçin. Özel'i seçin.
    Uygulama kodunuzun konumunu seçin azure-upload-file-to-storage/app
    Azure İşlevleri kodunuzun konumunu seçin azure-upload-file-to-storage/api
    Derleme çıkışınızın yolunu girin... dist

    Bu, uygulamanızdan statik (oluşturulan) dosyalarınıza giden yoldur.
    Yeni kaynaklar için bir konum seçin. Size yakın bir bölge seçin.

  6. İşlem tamamlandığında bir bildirim açılır penceresi görüntülenir. İş Akışını Görüntüle/Düzenle'yi seçin.

  7. Uzak çatalınızın Static Web Apps'e dağıtmak için yeni bir iş akışı dosyası var. Terminalde aşağıdaki komutu kullanarak bu dosyayı ortamınıza çekin:

    git pull origin main

  8. konumundaki /.github/workflows/iş akışı dosyasını açın.

  9. Bu öğreticinin Statik Web uygulamasına özgü iş akışının bölümü şu şekilde görünmelidir:

    ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
app_location: "/azure-upload-file-to-storage/app" # App source code path
api_location: "/azure-upload-file-to-storage/api" # Api source code path - optional
output_location: "dist" # Built app content directory - optional
###### End of Repository/Build Configurations ######

  10. Adlı Azure Static Web Apps CI/CDderleme ve dağıtma eyleminin başarıyla tamamlandığını doğrulamak için örneğin https://github.com/YOUR-ACCOUNT/azure-typescript-e2e-apps/actions GitHub çatalınıza gidin. Bu işlemin tamamlanması birkaç dakika sürebilir.

  11. Uygulamanız için Azure portalınıza gidin ve Ayarlar API'ler bölümünü görüntüleyin. Üretim ortamındaki Arka Uç Kaynak Adı, (managed) API'lerinizin başarıyla dağıtıldığını gösteriyor.

  12. Uygulamada yüklenen API'lerin listesini görmek için (yönetilen) öğesini seçin:

    • listele
    • Sas
    • durum

  13. Dağıtılan uygulamanızın URL'sini bulmak için Genel Bakış sayfasına gidin.

  14. Uygulamanın dağıtımı tamamlandı.

14. API'yi Depolama kaynak adı ve anahtarıyla yapılandırma

API düzgün çalışmadan önce uygulamanın Azure Depolama kaynak adına ve anahtarına ihtiyacı vardır.

  1. Yine Azure Gezgini'nde, Statik Web Uygulaması kaynağına sağ tıklayın ve Portalda Aç'ı seçin.

  2. Ayarlar bölümünde Yapılandırma'ya tıklayın.

  3. Aşağıdaki tabloyu kullanarak uygulama ayarlarını ekleyin.

    Özellik Değer Açıklama
    Azure_Depolama_AccountName Azure Depolama hesap adı, örneğin: fileuploadstor. kaynak kodunda Depolama kaynağa bağlanmak için kullanılır.
    Azure_Depolama_AccountKey Azure Depolama hesap anahtarı kaynak kodunda Depolama kaynağa bağlanmak için kullanılır.

  4. Her iki ayarı da kaydetmek için Yapılandırma sayfasında Kaydet'i seçin.

Dekont

İstemci uygulaması ve API aynı etki alanından barındırıldığından istemci uygulamasının env değişkenini VITE_API_SERVER ayarlamanız gerekmez.

15. Azure tarafından dağıtılan statik web uygulamasını kullanın

Web sitesini kullanarak dağıtımın ve yapılandırmanın başarılı olduğunu doğrulayın.

  1. Visual Studio Code'da, Azure gezgininden Statik web uygulamanıza sağ tıklayın ve Siteye gözat'ı seçin.
  2. Yeni web tarayıcısı penceresinde Dosya Seç'i ve ardından karşıya yüklenecek bir görüntü dosyası (*.png veya *.jpg) seçin.
  3. Sas belirtecini al'ı seçin. Bu eylem, dosya adını API'ye geçirir ve dosyayı karşıya yüklemek için gereken SAS belirteci URL'sini alır.
  4. SAS belirteci URL'sini kullanarak dosyayı karşıya yüklemek için Dosyayı karşıya yükle'yi seçin. Tarayıcı, karşıya yüklenen dosyanın küçük resmini ve URL'sini görüntüler.

16. Kaynakları temizleme

Visual Studio Code'da Kaynak Grupları için Azure gezginini kullanın, kaynak grubunuz için sağ tıklayın ve Sil'i seçin.

Bu işlem, Depolama ve Statik Web uygulaması kaynaklarınız da dahil olmak üzere gruptaki tüm kaynakları siler.

Sorun giderme

Aşağıda belirtilen GitHub deposunda bu örnekle ilgili sorunları bildirin. Soruna aşağıdakileri ekleyin:

  • Makalenin URL'si
  • Makalenin sorunlu olan adımı veya bağlamı
  • Geliştirme ortamınız

Örnek kod

İlgili içerik

Bu uygulamayla devam etmek isterseniz, aşağıdaki seçeneklerden biriyle uygulamayı barındırmak üzere Azure'a dağıtmayı öğrenin: