Aracılığıyla paylaş

Öğretici: JavaScript ile azure depolama blob'larına görüntü yükleme

Bu öğreticide, bir Azure Depolama blob'una dosyaları doğrudan yüklemek için @azure/storage-blob paketini kullanarak statik web uygulaması kullanacaksınız. API, Valet Anahtarı deseninin ardından bir SAS belirteci oluşturur ve tam kimlik bilgilerini açığa çıkarmadan sınırlı erişimi güvenli bir şekilde devretmenizi sağlar.

Dikkat

Bu öğreticide, işlev uygulamanızı tüketim planında nasıl barındırabileceğiniz gösterilmektedir. Yönetilen kimliklerle Microsoft Entra ID kullanarak bağlantılarınızın güvenliğini sağlamayı planlıyorsanız, bunun yerine uygulamanızı Flex Tüketim planında barındırmayı düşünmelisiniz. Flex Consumption katmanı, yönetilen kimliklerin ve sanal ağ tümleştirmesinin kullanımını destekleyerek güvenliği iyileştirir.

Önkoşullar

  • Azure aboneliği; Henüz bir Azure aboneliğiniz yoksa, ücretsiz Azure hesabına kaydolabilirsiniz.
  • GitHub hesabı fork etmek ve bir depoya push yapmak için.

Uygulama mimarisi

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

  • Azure Static Web Apps hem statik istemciyi hem de bağlı Azure İşlevleri API'sini barındırır ve hizmet API kaynağını otomatik olarak yönetir.
  • Blob depolama için Azure Depolama.

Müşterinin doğrudan Azure Depolama'ya dosya yüklemek üzere web sitesini kullanmak için bilgisayarından nasıl etkileşim kuracaklarını gösteren diyagram.

Adım Açıklama
1 Müşteri statik olarak oluşturulan web sitesine bağlanır. Web sitesi Azure Static Web Appsiçinde 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 resim dosyasıdır.
3 Web sitesi, karşıya yüklenecek dosyanın tam dosya adına göre bir SAS belirteci almak için sas API 'ye çağrı yapar. 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'ne 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.

GitHub ile örnek uygulama deposunu çatallayın

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ına ve örnek uygulama deposunun bir fork'una ihtiyaç vardır.

  1. Bir web tarayıcısında, örnek deponun kendi hesabınız üzerinde kopyasını oluşturmak için aşağıdaki bağlantıyı kullanın: Azure-Samples/azure-typescript-e2e-apps.
  2. Örnek projeyi yalnızca ana dalıyla fork etme adımlarını tamamlayın.

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

geliştirme kapsayıcısı ortamı, bu projedeki tüm alıştırmaları 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 olarak dahil edilen depolama ve çekirdek çalışma saatleri.

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

    bir depo için Codespaces düğmelerinin GitHub ekran görüntüsü.

  2. Codespaces sekmesinde üç nokta simgesini seçin ....

    GitHub'un Codespaces sekmesi ekran görüntüsü, üç nokta kontrolünün vurgulandığı.

  3. Belirli bir Codespaces geliştirme kapsayıcısını seçmek için + Yeni ardından Seçenekler'i seçin.

    Seçenekler menü öğesinin vurgulandığı Codespaces New'ın GitHub ekran görüntüsünü .

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

    • Dal: 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

    Şu geliştirme kapsayıcısının vurgulandığı Codespaces New with options menüsünün GitHub ekran görüntüsü: Öğretici: SAS Belirteci ile dosyayı depolamaya yükleme.

  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ü seçeneğine gidebilir ve ardından Yeni Terminal seçeneğini belirleyebilirsiniz.

    yeni bir terminal açmak için codespaces menü seçeneğinin ekran görüntüsü .

  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
    Azure İşlevleri temel araçları ≥ 4.5098

  8. Terminali kapatın.

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

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

Bu öğreticinin örnek uygulaması azure-upload-file-to-storage klasöründedir. 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'sini uygulamanın bağımlılıklarını yükleyin ve uygulamayı çalıştırın.

    cd api && npm install

  4. Diğer terminalde komutunu çalıştırarak istemci uygulamasınıyükleyin.

    cd app && npm install

Visual Studio uzantısıyla depolama kaynağı oluşturma

Örnek uygulamayla kullanılacak Azure Depolama kaynağını oluşturun. Depolama alanı şu nedenler 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 Create Resource...seçin.

    Kaynak Oluştur öğesinin vurgulandığı sağ tıklama menüsüyle Azure Gezgini'nde Visual Studio Code'un ekran görüntüsü.

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

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

    Mülk Değer
    Yeni web uygulaması için genel olarak benzersiz bir ad girin. Depolama kaynağı adınız için fileuploadstorgibi benzersiz bir değer girin.

    Bu benzersiz ad, sonraki bölümde kullanılan kaynak adınız . En fazla 24 alfasayısal karakter uzunluğunda kullanın. Bu hesap adını daha sonra kullanmak için 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.

    Azure Etkinlik Çubuğu'nu ve depolama hesabının başarıyla oluşturulduğuna ilişkin bildirimi gösteren Visual Studio Code ekran görüntüsü.

Depolama CORS'lerini 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. Bu CORS 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çinCORS hakkında daha fazla bilgi edinin.

  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: Patch dışındaki tümü
    • İzin verilen üst bilgiler: *
    • Görünür üst bilgiler: *
    • Maksimum yaş: 86400

  4. Kaydetöğesini seçin.

Depolamaya anonim erişim verme

Dosya karşıya yüklendikten sonra öğretici senaryosu, görüntüleme için bloba genel erişim gerektirir. Kolaylık olması için, bu kılavuz karşıya yüklenen dosyalar için anonim erişim sağlar.

  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 ve ardından devre dışı öğesini seçin.
  2. Yapılandırma sayfasında Blob anonim erişimini etkinleştirin.

Karşıya yükleme kapsayıcısı oluştur

Genel olarak okunabilir blobları olan özel bir kapsayıcı oluşturun.

  1. Azure portal depolama hesabındayken, Veri depolama bölümünde, Kapsayıcılarseçeneğini seçin.

  2. aşağıdaki ayarlarla kapsayıcınızı oluşturmak için upload'ni seçin:

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

  3. 'i seçin,oluşturun.

Kendinize Blob Verilerine erişim verin

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

  1. Azure portalı depolama hesabında Erişim Denetimi (IAM) öğesini seçin.
  2. SeçinRol atamaları ekle.
  3. depolama blobu veri katkıda bulunanı arayın ve seçin. Sonraki seçin.
  4. 'ı seçin +üyelerini seçin.
  5. Hesabınızı arayın ve seçin.
  6. seçin gözden geçir veata.
  7. "Kapsayıcılar'yi, ardından karşıya yükleme kapsayıcısını seçin." Yetkilendirme hatası olmadan kapsayıcıda blob olmadığını görebilmeniz gerekir.

Depolama kaynağı kimlik bilgilerini alma

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

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

  2. Key anahtarını kopyalayın.

  3. Visual Studio Code'da, ./workspaces/azure-typescript-e2e-apps/azure-upload-file-to-storage/apiklasöründe dosyasını local.settings.json.sampleolarak local.settings.json. Dosya Git tarafından ihmal edilir, bu nedenle kaynak denetimine eklenmez.

  4. Aşağıdaki tabloyu kullanarak local.settings.json ayarlarını güncelleştirin.

    Mülk Değer Açıklama
    Azure_Depolama_HesapAdı Azure Depolama hesabı adı, örneğin: fileuploadstor. Depolama kaynağına bağlanmak için kaynak kodunda kullanılır.
    Azure_Storage_AccountKey Azure Depolama hesabı anahtarı Depolama kaynağına bağlanmak için kaynak kodunda 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ılır.

Aynı hesap kimlik bilgilerini bir kez anahtar, bir kez de bağlantı dizesi olarak iki kez girmişsiniz gibi görünebilir. Ancak, özellikle bu basit eğitim için yaptınız. Genel olarak bakıldığında, Azure İşlevleri uygulamalarının başka bir amaç için yeniden kullanılamamış ayrı bir Depolama kaynağına sahip olması gerekir. Azure İşlevi kaynağını öğreticinin ilerleyen bölümlerinde oluşturduğunuzda, bulut kaynağı için AzureWebJobsStorage değerini ayarlamanız gerekmez. Kaynak kodda kullanılan Azure_Storage_AccountName ve Azure_Storage_AccountKey değerlerini ayarlamanız gerekir.

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 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üğü'ni seçin ve genel 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ı için 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 yüklemek istediğiniz konuma 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, /api/sasöncesinin her şeyidir. Bu temel URL'yi sonraki bölümde istemci uygulama ortam değişkeni dosyasına yapıştıracaksınız.

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

  1. ./azure-upload-file-to-storage/app/.env.sample dosyasını .envolarak yeniden adlandırın.

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

    Codespaces ortamı için bir örnek şu şekilde 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 bağlantı noktasında - 5173- kullanılabildiğine dair 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. Web uygulamasını görmeniz gerekir.

    Dosya Seç düğmesinin kullanılabilir olduğu web uygulamasını gösteren web tarayıcısının ekran görüntüsü.

  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'ya yüklemek için kullanılacak tam URL'yi gösterir.
    • Görüntü dosyasını depolamaya doğrudan göndermek için Yükle düğmesini seçin.

    Görüntü dosyasının karşıya yüklendiği ve dosyanın küçük resminin görüntülendiği web uygulamasını gösteren web tarayıcısının ekran görüntüsü.

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

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 + simgesini seçin. Bu değişiklikler yalnızca bu öğreticinin app ve api klasörleri için yeni package-lock.json dosyaları içermelidir.

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 Create Resource...seçin.

  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.

    Mülk Değer
    Yeni web uygulaması için genel olarak benzersiz bir ad girin. Depolama kaynağı adınız için fileuploadstorgibi benzersiz bir değer girin.

    Bu benzersiz ad, sonraki bölümde kullanılan kaynak adınız . Yalnızca en fazla 24 karakter ve sayı kullanın. Bu hesap adını daha sonra kullanmak için 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:

    Uyarı Gir
    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çin Bu ders 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. Özelleştirseç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

    değeri, 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üzenleseçin.

  7. Uzak kopyanızın Static Web Apps'e yayınlamak için yeni bir workflow dosyası var. Terminalde aşağıdaki komutu kullanarak bu dosyayı ortamınıza çekin:

    git pull origin main

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

  9. Bu öğretici için Statik Web uygulamasına özgü iş akışının şu şekilde görünmesi gerektiği bölümünü doğrulayın:

    ###### 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. Örneğinizin GitHub çatalına gidin, derleme ve dağıtma işleminin, https://github.com/<YOUR-ACCOUNT>/azure-typescript-e2e-apps/actionsadlı, başarıyla tamamlandığını doğrulamak için Azure Static Web Apps CI/CD kontrol edin. Bu eylemin tamamlanması birkaç dakika sürebilir.

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

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

    • liste
    • 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ı.

API'yi Depolama kaynağı 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. Azure Static Web Apps'e dağıtıldığında istemci uygulaması ve API aynı etki alanından barındırılır ve istemci uygulamasının ortam değişkenini VITE_API_SERVER ayarlama gereksinimi ortadan kaldırılır.

  1. 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'ı seçin.

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

    Mülk Değer Açıklama
    Azure_Depolama_HesapAdı Azure Depolama hesabı adı, örneğin: fileuploadstor. Depolama kaynağına bağlanmak için kaynak kodunda kullanılır.
    Azure_Storage_AccountKey Azure Depolama hesabı anahtarı Depolama kaynağına bağlanmak için kaynak kodunda kullanılır.

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

Azure tarafından dağıtılan statik web uygulamasını kullanma

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 Gezgini'nden Statik web uygulamanıza sağ tıklayın ve Siteyigöz at'ı seçin.
  2. Yeni web tarayıcısı penceresinde Dosya Seç'i seçin ardından karşıya yüklemek için bir görüntü dosyası (*.png veya *.jpg) seçin.
  3. sas belirtecini alseç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. Dosya karşıya yükle seçeneğini kullanarak dosyayı karşıya yüklemek için SAS belirteci URL'sini seçin. Tarayıcı, karşıya yüklenen dosyanın küçük resmini ve URL'sini görüntüler.

Kaynakları temizleme

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

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

Sorun giderme

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

  • GitHub deposu: azure-upload-file-to-storage

İlgili içerik

  • Azure Blob Depolama belgeleri
  • @azure/storage-blob
    • npm paketi
  • Azure Statik Web uygulaması