次に、JavaScript を使用して Azure Blob Storage.js の一時的にダウンロード可能な URL を作成する方法を学習します。

Next.js を使用して Azure で BLOB ダウンロード用の一時 URL を生成する

Azure SDK と Blob オブジェクト URL を使用したフロントエンド JavaScript ソリューション

// Import the Azure SDK and setup the blockBlobClient  
import { BlobServiceClient } from "@azure/storage-blob";  
const blobServiceClient = BlobServiceClient.fromConnectionString(process.env.AZURE_STORAGE_CONNECTION_STRING);  
const containerClient = blobServiceClient.getContainerClient("my-container");  
const blockBlobClient = containerClient.getBlockBlobClient("example-image.png");  

// Function to generate temporary downloadable URL from blob  
async function generateBlobDownloadURL() {  
  try {  
    const response = await blockBlobClient.download();  
    const blobData = await response.blobBody; // Retrieve the blob body  
    const tempUrl = URL.createObjectURL(blobData); // Create an object URL  
    console.log("Temporary URL:", tempUrl); // Log for testing  
    return tempUrl;  
  } catch (error) {  
    console.error("Error generating download URL:", error);  
    return null;  
  }  
}  

// Usage in React component within Next.js  
export default function BlobDownloader() {  
  const handleDownload = async () => {  
    const url = await generateBlobDownloadURL();  
    if (url) window.open(url, "_blank"); // Open URL in new tab  
  };  

  return (  
    <button onClick={handleDownload}>Download Image</button>  
  );  
}  

エラー管理を使用した BLOB データのダウンロードの処理

効率的なメモリ使用のためのストリームを使用したバックエンド Node.js アプローチ

// Import necessary Azure SDK modules  
const { BlobServiceClient } = require("@azure/storage-blob");  
const express = require("express");  
const app = express();  
const PORT = process.env.PORT || 3000;  

// Initialize Azure Blob Service Client  
const blobServiceClient = BlobServiceClient.fromConnectionString(process.env.AZURE_STORAGE_CONNECTION_STRING);  

app.get("/download", async (req, res) => {  
  try {  
    const containerClient = blobServiceClient.getContainerClient("my-container");  
    const blockBlobClient = containerClient.getBlockBlobClient("example-image.png");  

    // Stream the blob content to the response  
    const downloadBlockBlobResponse = await blockBlobClient.download();  
    downloadBlockBlobResponse.readableStreamBody.pipe(res);  
  } catch (error) {  
    console.error("Error downloading blob:", error);  
    res.status(500).send("Failed to download blob");  
  }  
});  

// Start Express server  
app.listen(PORT, () => {  
  console.log(`Server is running on port ${PORT}`);  
});  

BLOB ダウンロード機能の単体テスト

Jest を使用した単体テストでダウンロード動作が正しいことを確認する

// Test for front-end blob download function using Jest  
import { generateBlobDownloadURL } from "../components/BlobDownloader";  

describe("generateBlobDownloadURL", () => {  
  test("should return a valid object URL", async () => {  
    const url = await generateBlobDownloadURL();  
    expect(url).toMatch(/^blob:/);  
  });  

  test("should handle errors gracefully", async () => {  
    jest.spyOn(console, "error").mockImplementation(() => {});  
    const url = await generateBlobDownloadURL();  
    expect(url).toBeNull();  
  });  
});  

// Test for back-end stream handling using Jest and Supertest  
const request = require("supertest");  
const app = require("../server"); // Assuming the server script is named server.js  

describe("GET /download", () => {  
  it("should return 200 and stream the blob content", async () => {  
    const response = await request(app).get("/download");  
    expect(response.status).toBe(200);  
  });  

  it("should return 500 on error", async () => {  
    jest.spyOn(console, "error").mockImplementation(() => {});  
    const response = await request(app).get("/download");  
    expect(response.status).toBe(500);  
  });  
});  

Next.js の BLOB URL の問題に関する一般的な質問と解決策

1. BLOB URL に正しい画像が表示されないのはなぜですか?
2. を使用していることを確認してください URL.createObjectURL() 正しい BLOB オブジェクトで、BLOB のコンテンツ タイプが Azure Blob Storage で正しく設定されていることを確認します。
3. メモリ リークを防ぐために BLOB URL を取り消すにはどうすればよいですか?
4. 使用 URL.revokeObjectURL() BLOB の使用が完了したら、メモリを解放し、古い参照を回避します。
5. 有効期限を設けて BLOB URL を保護することは可能ですか?
6. はい、Azure を使用します Shared Access Signatures (SAS)を使用すると、一定時間後に期限切れになる URL を作成して、安全なアクセス制御を実現できます。
7. BLOB URL がモバイル ブラウザーで機能しない場合はどうすればよいですか?
8. を使用してリダイレクトなどのフォールバックを実装します。 window.location.href または、BLOB URL がサポートされていない場合は、ファイルを手動で保存するようにユーザーに求めます。
9. Node.js で大きなファイルのダウンロードを効率的に管理するにはどうすればよいですか?
10. 使用 readableStreamBody.pipe() コンテンツを応答に直接ストリーミングするため、メモリの過負荷が防止され、スムーズなファイル転送が保証されます。
11. 一時 URL を使用せずに Azure Blob Storage からファイルをダウンロードできますか?
12. はい、Express でバックエンド ルートを設定し、次を使用して BLOB コンテンツをクライアントに直接ストリーミングできます。 blockBlobClient.download()。
13. BLOB をダウンロードすると破損したデータが返されるのはなぜですか?
14. BLOB のエンコーディングとコンテンツ タイプが Azure で正しく構成されているかどうかを確認します。また、応答本文が次を使用して正しく解析されていることを確認してください。 response.blobBody。
15. BLOB のダウンロードをテストする最良の方法は何ですか?
16. Jest と Supertest を使用してダウンロード リクエストをシミュレートし、ダウンロード ロジックがさまざまな条件下で正しく動作することを検証します。
17. BLOB URL は複数回再利用できますか?
18. はい、ただし、ブラウザ セッションがこれらの URL をキャッシュする可能性があることに注意してください。使用 URL.revokeObjectURL() メモリを解放して問題を回避します。
19. 新しいタブで BLOB URL を開くにはどうすればよいですか?
20. 使用 window.open() BLOB URL を使用して、新しいタブで開きます。これが機能しない場合は、ブラウザの設定でポップアップが許可されていることを確認してください。
21. BLOB コンテンツをダウンロードする代わりにインラインで表示するにはどうすればよいですか?
22. 適切に設定します content-disposition Azure Blob Storage のヘッダーを使用して、ダウンロードを強制する代わりにファイルをインラインで表示します。

BLOB ダウンロードの管理から得られる重要なポイント:

BLOB のダウンロードを効率的に処理する Next.js アプリには、次のようなメソッドを使用してバイナリ データを一時 URL に変換することが含まれます。 URL.createObjectURL()。オブジェクト URL の取り消しなど、適切なメモリ管理は、リークやパフォーマンスの問題を回避するために重要です。

一時的な URL は共有できるため、セキュリティも重要な考慮事項です。 SAS トークンを実装すると、時間制限のあるアクセス制御が追加されます。さらに、ブラウザーの互換性を確保し、BLOB URL をサポートしないデバイスにフォールバックを提供することで、最適なユーザー エクスペリエンスが保証されます。