reactjs - 如何将azure blob存储数据获取到Azure应用程序服务上托管的React应用程序中

Question

您好，我正在开发 React 项目，我想从 Azure Blob 存储下载巨大的文件(超过 2.5GB)来 React 应用程序，(场景是当用户单击导出按钮时，我在 Azure Blob 存储中有文本文件，我想要它们要下载到本地系统)，我一直在寻找几种方法，因为我是 azure 的新手，我有点困惑

使用 azure AD，我们可以访问 azure blob 存储，但由于我的应用程序托管在应用程序服务上，我们如何将这两者连接在一起，或者我们可以通过 azure 应用程序服务直接访问文件？

我目前正在考虑的方法:here

Answer 1

如果所有资源都来自 Azure，那么我们应该在您的案例中使用管理身份或服务原则(也在幕后使用管理身份)链接。

就您而言，您有两个 azure 资源

1. Azure Blob 存储
2. 应用服务(作为reactjs应用程序托管)这里有关于如何连接和读取 blob 的分步说明

在AppService(作为reactjs应用程序托管)

1. 转到您的应用服务
2. 然后点击 Identity in Left panel
3. 然后 System assigned托管身份
4. 之后clicking save按钮然后它生成 Object Id 。

在 Azure Blob 存储中

1. 转到Your blob storage account

2. 点击Access Control (IAM)

3. 点击Role Assignment (RBAC)

4. 点击Add > Add Role assignment

5. 选择Role根据您的需要，如 Storage Blob Data Reader

6. 点击Next > Select Managed Identity > Select Member

7. 然后Select your Subscription然后App Service

8. 然后List of Managed identity显示 > Select your App Service需要连接存储的

9. 然后点击Select然后Next

10. 然后您将看到以下屏幕。匹配object id生成于 step 4到网格下方

11. 然后点击Next > Next > Review + assign

现在在React Js应用程序中

我们可以添加这些 two Dependencies在 package.json 中并执行 npm i 进行安装。

现在connect blob storage with DefaultAzureCredential来自 @azure/identity 包:-当我们直接使用服务原则或托管身份向另一个 azure 资源授予一个 azure 的权限/访问权限时，我们使用默认的 azure 凭据，然后 azure 自动验证它们。代码 For Import package

                import { DefaultAzureCredential } from "@azure/identity";
               // we're using these objects from the storage sdk - there are others for different needs
               import { BlobServiceClient, BlobItem } from "@azure/storage-blob";

Create service client and container

               const blobStorageClient = new BlobServiceClient(
                // this is the blob endpoint of your storage acccount. Available from the portal 
               // they follow this format: <accountname>.blob.core.windows.net for Azure global
               // the endpoints may be slightly different from national clouds like US Gov or Azure China
                 "https://<your storage account name>.blob.core.windows.net/",
                   new DefaultAzureCredential()
                 )

             // this uses our container we created earlier
        var containerClient = blobStorageClient.getContainerClient("your container name");

获取 blob 列表

        let blobs = containerClient.listBlobsFlat();
        for await (const blob of blobs) {
         console.log(`Blob ${i++}: ${blob.name}`);
  }

下载 blob

const blobClient = containerClient.getBlobClient(blobName);

  // Get blob content from position 0 to the end
  // In Node.js, get downloaded data by accessing downloadBlockBlobResponse.readableStreamBody
  const downloadBlockBlobResponse = await blobClient.download();
  const downloaded = (
    await streamToBuffer(downloadBlockBlobResponse.readableStreamBody)
  ).toString();
  console.log("Downloaded blob content:", downloaded);

  // [Node.js only] A helper method used to read a Node.js readable stream into a Buffer
  async function streamToBuffer(readableStream) {
    return new Promise((resolve, reject) => {
      const chunks = [];
      readableStream.on("data", (data) => {
        chunks.push(data instanceof Buffer ? data : Buffer.from(data));
      });
      readableStream.on("end", () => {
        resolve(Buffer.concat(chunks));
      });
      readableStream.on("error", reject);
    });
  }

欲了解更多详情，请访问以下链接

1. Azure Storage Blob client library for JavaScript - version 12.12.0
2. Quickstart: Manage blobs with JavaScript SDK in Node.js