Hızlı Başlangıç: Tarayıcıda JavaScript v12 SDK ile blobları yönetme

  • Makale

Azure Blob depolama, büyük miktarlarda yapılandırılmamış verileri depolamak için iyileştirilmiştir. Bloblar görüntüler, belgeler, akış medyası ve arşiv verileri dahil olmak üzere metin veya ikili verileri barındırabilen nesnelerdir. Bu hızlı başlangıçta, tarayıcıda JavaScript kullanarak blobları yönetmeyi öğreneceksiniz. Blobları karşıya yükleyip listeleyecek ve kapsayıcı oluşturup sileceksiniz.

Örnek kod, JavaScript için Azure Blob depolama istemci kitaplığı ile aşağıdaki görevlerin nasıl yerine getir yapılacağını gösterir:

Ek kaynaklar:

API başvurusu | Kitaplık kaynak kodu | Paket (npm) | Örnekleri

Önkoşullar

Nesne modeli

Blob depolama üç tür kaynak sunar:

  • Depolama hesabı
  • Depolama hesabındaki bir kapsayıcı
  • Kapsayıcıdaki bir blob

Aşağıdaki diyagramda bu kaynaklar arasındaki ilişki gösterilmektedir.

Blob depolama mimarisinin diyagramı

Bu hızlı başlangıçta, bu kaynaklarla etkileşime geçmek için aşağıdaki JavaScript sınıflarını kullanacaksınız:

  • BlobServiceClient: sınıfı, BlobServiceClient Azure Depolama kaynaklarını ve blob kapsayıcılarını işlemenize olanak tanır.
  • ContainerClient: sınıfı, ContainerClient Azure Depolama kapsayıcılarını ve bloblarını işlemenize olanak tanır.
  • BlockBlobClient: sınıfı, BlockBlobClient Azure Depolama bloblarını işlemenize olanak tanır.

Tarayıcı erişimi için depolama hesabını yapılandırma

Depolama hesabınıza bir web tarayıcısından program aracılığıyla erişmek için CORS erişimini yapılandırmanız ve bir SAS bağlantı dizesi oluşturmanız gerekir.

CORS kuralı oluşturma

Web uygulamanızın istemciden blob depolamaya erişebilmesi için hesabınızı çıkış noktaları arası kaynak paylaşımını veya CORS'yi etkinleştirecek şekilde yapılandırmanız gerekir.

Azure portal depolama hesabınızı seçin. Yeni bir CORS kuralı tanımlamak için Ayarlar bölümüne gidin ve CORS'yi seçin. Bu hızlı başlangıçta, tamamen açık bir CORS kuralı oluşturursunuz:

Azure Blob Depolama Hesabı CORS ayarları

Aşağıdaki tabloda her bir CORS ayarı açıklanmakta ve kuralı tanımlamak için kullanılan değerler anlatılmaktadır.

Ayar Değer Açıklama
İZIN VERILEN ÇıKıŞ NOKTALARı * Kabul edilebilir çıkış noktaları olarak etki alanları kümesinin virgülle ayrılmış bir listesini kabul eder. Değerin * olarak ayarlanması, depolama hesabına tüm etki alanlarının erişmesine izin verir.
İZIN VERILEN YÖNTEMLER DELETE, GET, HEAD, MERGE, POST, OPTIONS ve PUT Depolama hesabına göre yürütülmesine izin verilen HTTP fiillerini listeler. Bu hızlı başlangıçta tüm kullanılabilir seçenekleri işaretleyin.
İZIN VERILEN ÜST BILGILER * Depolama hesabı tarafından izin verilen istek üst bilgilerinin (ön ekli üst bilgiler dahil) listesini tanımlar. Değerin * olarak ayarlanması tüm üst bilgilere erişim izni verir.
KULLANıMA SUNULAN ÜST BILGILER * Hesaba göre izin verilen yanıt üst bilgilerini listeler. Değerin * olarak ayarlanması hesabın herhangi bir üst bilgiyi göndermesine izin verir.
MAKS YAŞ 86400 Tarayıcının denetim öncesi OPTIONS isteğini saniyeler içinde önbelleğe alma süresi üst sınırı. 86400 değeri, önbelleğin bir tam gün boyunca kalmasına izin verir.

Alanları bu tablodaki değerlerle doldurduktan sonra Kaydet düğmesini seçin.

Önemli

Üretimde kullandığınız tüm ayarların, güvenli erişimi korumak için depolama hesabınıza gereken minimum erişim miktarını ortaya çıkardığından emin olun. Burada açıklanan CORS ayarları esnek bir güvenlik ilkesini tanımladığı için hızlı başlangıç için uygundur. Ancak bu ayarlar gerçek bir bağlam için önerilmez.

SAS bağlantı dizesi oluşturma

Paylaşılan erişim imzası (SAS), Azure Blob depolama isteklerini yetkilendirmek için tarayıcıda çalışan kod tarafından kullanılır. İstemci, SAS kullanarak hesap erişim anahtarı veya bağlantı dizesi kullanmadan depolama kaynaklarına erişimi yetkilendirebilir. SAS hakkında daha fazla bilgi edinmek için bkz. Paylaşılan erişim imzaları (SAS) kullanma.

Blob hizmeti SAS URL'sini almak için şu adımları izleyin:

  1. Azure portal depolama hesabınızı seçin.
  2. Güvenlik + ağ bölümüne gidin ve Paylaşılan erişim imzası'nı seçin.
  3. SAS belirtecinin tüm depolama hesabı hizmetlerinize erişimi olacağını anlamak için İzin verilen hizmetler'i gözden geçirin:
    • Blob
    • Dosya
    • Kuyruk
    • Tablo
  4. Eklenecek İzin verilen kaynak türlerini seçin:
    • Hizmet
    • Kapsayıcı
    • Nesne
  5. SAS belirtecinin varsayılan olarak sınırlı bir ömrü olduğunu anlamak için Başlangıç ve bitiş tarihini/saatini gözden geçirin.
  6. Ekranı aşağı kaydırın ve SAS ve bağlantı dizesi oluştur düğmesini seçin.
  7. Daha fazla aşağı kaydırın ve Blob hizmeti SAS URL'si alanını bulun
  8. Blob hizmeti SAS URL'si alanının en sağ ucundaki Panoya kopyala düğmesini seçin.
  9. Kopyalanan URL'yi bir gelecek adımda kullanmak üzere bir yere kaydedin.

Not

Portal tarafından döndürülen SAS belirteci, URL sorgu dizesi için sınırlayıcı karakteri ('?') içermez. SAS belirtecini bir kaynak URL'sine ekliıyorsanız, SAS belirtecini eklemeden önce sınırlayıcı karakterini kaynak URL'sine eklemeyi unutmayın.

JavaScript projesi oluşturma

blob-quickstart-v12 adlı bir JavaScript uygulaması oluşturun.

  1. Konsol penceresinde (cmd, PowerShell veya Bash gibi) proje için yeni bir dizin oluşturun.

    mkdir blob-quickstart-v12

  2. Yeni oluşturulan blob-quickstart-v12 dizinine geçin.

    cd blob-quickstart-v12

  3. package.json oluşturun.

    npm init -y

  4. Projeyi Visual Studio Code açın:

    code .

Blob depolama için npm paketini yükleme

  1. Visual Studio Code terminalinde Azure Storage npm paketini yükleyin:

    npm install @azure/storage-blob

  2. Tarayıcının dosyalarını ve paketini paketlemek için bir paketleyici paketi yükleyin:

    npm install parcel

    Farklı bir paketleyici kullanmayı planlıyorsanız Azure SDK'yı paketleme hakkında daha fazla bilgi edinin.

Tarayıcı paketlemeyi yapılandırma

  1. Visual Studio Code'da package.json dosyasını açın ve ekleyinbrowserlist. Bu browserlist , popüler tarayıcıların en son sürümünü hedefler. Tam package.json dosyası şimdi şöyle görünmelidir:

    "browserslist": [
  "last 1 Edge version",
  "last 1 Chrome version",
  "last 1 Firefox version",
  "last 1 safari version",
  "last 1 webkit version"
],

  2. Web sitesini paketlemek için bir başlangıç betiği ekleyin:

    "scripts": {
  "start": "parcel ./index.html"
},

HTML dosyasını oluşturma

  1. Aşağıdaki HTML kodunu oluşturun index.html ve ekleyin:

    <!-- index.html -->
<!DOCTYPE html>
<html>

<body>
    <button id="create-container-button">Create container</button>
    <button id="select-button">Select and upload files</button>
    <input type="file" id="file-input" multiple style="display: none;" />
    <button id="list-button">List files</button>
    <button id="delete-button">Delete selected files</button>
    <button id="delete-container-button">Delete container</button>
    <p><b>Status:</b></p>
    <p id="status" style="height:160px; width: 593px; overflow: scroll;" />
    <p><b>Files:</b></p>
    <select id="file-list" multiple style="height:222px; width: 593px; overflow: scroll;" />
</body>

<script type="module" src="./index.js"></script>

</html>

JavaScript dosyasını oluşturma

Proje dizininden:

  1. index.js adlı yeni bir dosya oluşturun.

  2. Azure Depolama npm paketini ekleyin.

    const { BlobServiceClient } = require("@azure/storage-blob");

Kullanıcı arabirimi öğeleri için alanları bildirme

Kullanıcı etkileşimi için DOM öğeleri ekleme:

const createContainerButton = document.getElementById("create-container-button");
const deleteContainerButton = document.getElementById("delete-container-button");
const selectButton = document.getElementById("select-button");
const fileInput = document.getElementById("file-input");
const listButton = document.getElementById("list-button");
const deleteButton = document.getElementById("delete-button");
const status = document.getElementById("status");
const fileList = document.getElementById("file-list");

const reportStatus = message => {
    status.innerHTML += `${message}<br/>`;
    status.scrollTop = status.scrollHeight;
}

Bu kod, her HTML öğesi için alanları bildirir ve çıkışı görüntülemek için bir reportStatus işlev uygular.

Depolama hesabı bilgilerinizi ekleme

Depolama hesabınıza erişmek için index.js dosyasının sonuna aşağıdaki kodu ekleyin. değerini <placeholder> , daha önce oluşturduğunuz Blob hizmeti SAS URL'nizle değiştirin. aşağıdaki kodu index.js dosyasının sonuna ekleyin.

// Update <placeholder> with your Blob service SAS URL string
const blobSasUrl = "<placeholder>";

İstemci nesneleri oluşturma

Depolama hesabınıza bağlanmak için BlobServiceClient ve ContainerClient nesneleri oluşturun. aşağıdaki kodu index.js dosyasının sonuna ekleyin.

// Create a new BlobServiceClient
const blobServiceClient = new BlobServiceClient(blobSasUrl);

// Create a unique name for the container by 
// appending the current time to the file name
const containerName = "container" + new Date().getTime();

// Get a container client from the BlobServiceClient
const containerClient = blobServiceClient.getContainerClient(containerName);

Depolama kapsayıcısı oluşturma ve silme

Web sayfasında ilgili düğmeyi seçtiğinizde depolama kapsayıcısını oluşturun ve silin. aşağıdaki kodu index.js dosyasının sonuna ekleyin.

const createContainer = async () => {
    try {
        reportStatus(`Creating container "${containerName}"...`);
        await containerClient.create();
        reportStatus(`Done. URL:${containerClient.url}`);
    } catch (error) {
        reportStatus(error.message);
    }
};

const deleteContainer = async () => {
    try {
        reportStatus(`Deleting container "${containerName}"...`);
        await containerClient.delete();
        reportStatus(`Done.`);
    } catch (error) {
        reportStatus(error.message);
    }
};

createContainerButton.addEventListener("click", createContainer);
deleteContainerButton.addEventListener("click", deleteContainer);

Blobları listeleme

Dosyaları listele düğmesini seçtiğinizde depolama kapsayıcısının içeriğini listeleyin. aşağıdaki kodu index.js dosyasının sonuna ekleyin.

const listFiles = async () => {
    fileList.size = 0;
    fileList.innerHTML = "";
    try {
        reportStatus("Retrieving file list...");
        let iter = containerClient.listBlobsFlat();
        let blobItem = await iter.next();
        while (!blobItem.done) {
            fileList.size += 1;
            fileList.innerHTML += `<option>${blobItem.value.name}</option>`;


            blobItem = await iter.next();
        }
        if (fileList.size > 0) {
            reportStatus("Done.");
        } else {
            reportStatus("The container does not contain any files.");
        }
    } catch (error) {
        reportStatus(error.message);
    }
};

listButton.addEventListener("click", listFiles);

Bu kod ContainerClient.listBlobsFlat işlevini çağırır ve döndürülen her BlobItem'in adını almak için bir yineleyici kullanır. Her BlobItemiçin , Dosyalar listesini ad özelliği değeriyle güncelleştirir.

Blobları kapsayıcıya yükleme

Dosyaları seç ve karşıya yükle düğmesini seçtiğinizde dosyaları depolama kapsayıcısına yükleyin . aşağıdaki kodu index.js dosyasının sonuna ekleyin.

const uploadFiles = async () => {
    try {
        reportStatus("Uploading files...");
        const promises = [];
        for (const file of fileInput.files) {
            const blockBlobClient = containerClient.getBlockBlobClient(file.name);
            promises.push(blockBlobClient.uploadBrowserData(file));
        }
        await Promise.all(promises);
        reportStatus("Done.");
        listFiles();
    }
    catch (error) {
            reportStatus(error.message);
    }
}

selectButton.addEventListener("click", () => fileInput.click());
fileInput.addEventListener("change", uploadFiles);

Bu kod , Dosyaları seç ve karşıya yükle düğmesini gizli file-input öğeye bağlar. Düğme click olayı, dosya giriş click olayını tetikler ve dosya seçiciyi görüntüler. Dosyaları seçip iletişim kutusunu kapattıktan sonra olay input gerçekleşir ve uploadFiles işlev çağrılır. Bu işlev bir BlockBlobClient nesnesi oluşturur ve seçtiğiniz her dosya için yalnızca tarayıcı uploadBrowserData işlevini çağırır. Her çağrı bir Promisedöndürür. Her Promise biri bir listeye eklenir, böylece hepsi birlikte beklenebilir ve bu da dosyaların paralel olarak karşıya yüklenmesine neden olur.

Blob’ları silme

Seçili dosyaları sil düğmesini seçtiğinizde depolama kapsayıcısından dosyaları silin . aşağıdaki kodu index.js dosyasının sonuna ekleyin.

const deleteFiles = async () => {
    try {
        if (fileList.selectedOptions.length > 0) {
            reportStatus("Deleting files...");
            for (const option of fileList.selectedOptions) {
                await containerClient.deleteBlob(option.text);
            }
            reportStatus("Done.");
            listFiles();
        } else {
            reportStatus("No files selected.");
        }
    } catch (error) {
        reportStatus(error.message);
    }
};

deleteButton.addEventListener("click", deleteFiles);

Bu kod, listede seçilen her dosyayı kaldırmak için ContainerClient.deleteBlob işlevini çağırır. Daha sonra Dosyalar listesinin listFiles içeriğini yenilemek için daha önce gösterilen işlevi çağırır.

Kodu çalıştırma

  1. Visual Studio Code terminalden uygulamayı çalıştırın.

    npm start

    Bu işlem dosyaları paketler ve bir web sunucusu başlatır.

  2. Aşağıdaki URL'yi kullanarak web sitesine bir tarayıcıyla erişin:

    http://localhost:1234

1. Adım: Kapsayıcı oluşturma

  1. Web uygulamasında Kapsayıcı oluştur'u seçin. durumu, bir kapsayıcının oluşturulduğunu gösterir.
  2. Azure portal kapsayıcınızın oluşturulduğunu doğrulayın. Depolama hesabınızı seçin. Blob hizmeti bölümünden Kapsayıcılar’ı seçin. Yeni kapsayıcının göründüğünü doğrulayın. ( Yenile'yi seçmeniz gerekebilir.)

2. Adım: Kapsayıcıya blob yükleme

  1. Yerel bilgisayarınızda, test.txtgibi bir test dosyası oluşturun ve kaydedin.
  2. Web uygulamasında Dosya seç ve karşıya yükle'yi seçin.
  3. Test dosyanıza göz atın ve aç'ı seçin. Durum, dosyanın karşıya yüklendiğini ve dosya listesinin alındığını gösterir.
  4. Azure portal daha önce oluşturduğunuz yeni kapsayıcının adını seçin. Test dosyasının göründüğünü doğrulayın.

3. Adım: Blobu silme

  1. Web uygulamasındaki Dosyalar'ın altında test dosyasını seçin.
  2. Seçili dosyaları sil'i seçin. durumu, dosyanın silindiğini ve kapsayıcının dosya içermediğini gösterir.
  3. Azure portal Yenile'yi seçin. Blob bulunamadı ifadesini gördüğünüzden emin olun.

4. Adım: Kapsayıcıyı silme

  1. Web uygulamasında Kapsayıcıyı sil'i seçin. durumu kapsayıcının silindiğini gösterir.
  2. Azure portal hesap adını> | seçin< Portal bölmesinin sol üst kısmındaki Kapsayıcılar bağlantısı.
  3. Yenile'yi seçin. Yeni kapsayıcı kaybolur.
  4. Web uygulamasını kapatın.

Depolama öykünücüsü kullanma

Bu hızlı başlangıçta Azure bulutu üzerinde bir kapsayıcı ve blob oluşturulmuştur. Bu kaynakları geliştirme ve test amacıyla Azure Depolama öykünücüsinde yerel olarak oluşturmak için Azure Blob depolama npm paketini de kullanabilirsiniz.

Kaynakları temizleme

  1. Bu hızlı başlangıcı tamamladığınızda dizini silin blob-quickstart-v12 .
  2. Azure Depolama kaynağınızı kullanmayı bitirdiyseniz, iki yöntemden birini kullanarak kaynak grubunuzu kaldırın:

Sonraki adımlar

Bu hızlı başlangıçta JavaScript kullanarak blobları karşıya yüklemeyi, listelemeyi ve silmeyi öğrendiniz. Ayrıca blob depolama kapsayıcısı oluşturmayı ve silmeyi de öğrendinsiniz.

Öğreticiler, örnekler, hızlı başlangıçlar ve diğer belgeler için şu adresi ziyaret edin:

JavaScript için Azure belgeleri