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

Question

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

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

我目前正在考虑的方法：这里

Answer 1

如果所有资源都来自 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>>NextReview + assign

现在在 React Js 应用程序中

12. 我们可以将它们添加two Dependencies到 package.json 中并执行 npm i 进行安装。
13. 现在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";

14. 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");

15. 获取 blob 列表

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

16. 下载斑点

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. 适用于 JavaScript 的 Azure 存储 Blob 客户端库 - 版本 12.12.0
2. 快速入门：在 Node.js 中使用 JavaScript SDK 管理 blob