Next.js中@azure/storage-blob导入错误的排查与解决

你遇到的导入错误是由于**@azure/storage-blob v12及以上版本重构了API导出结构**，这些类和方法不再从主包@azure/storage-blob导出，需要从对应的子模块引入。

1. 修正导入路径 #

将原来的导入语句替换为以下内容，从对应子模块导入所需对象：

"use client"; 

import { BlobServiceClient } from '@azure/storage-blob';
import { StorageSharedKeyCredential } from '@azure/storage-blob/storage-shared-key-credential';
import { SASProtocol, ContainerSASPermissions, generateBlobSASQueryParameters } from '@azure/storage-blob/sas';

2. 修复代码中的小问题 #

• 修正拼写错误：vidoe_name改为video_name
• 移除"use client"后的多余分号

修改后的完整代码 #

"use client"; 

import { BlobServiceClient } from '@azure/storage-blob';
import { StorageSharedKeyCredential } from '@azure/storage-blob/storage-shared-key-credential';
import { SASProtocol, ContainerSASPermissions, generateBlobSASQueryParameters } from '@azure/storage-blob/sas';

const accountName: string = process.env.AZURE_ACCOUNT_NAME || "";
const accountKey: string = process.env.AZURE_BLOB_ACCESS_KEY || "";

const sharedKeyCredential = new StorageSharedKeyCredential(accountName, accountKey);

console.log("Shared key: ", sharedKeyCredential);

const blobServiceClient = new BlobServiceClient(`https://${accountName}.blob.core.windows.net`, sharedKeyCredential);

const containerName: string = process.env.AZURE_CONTAINER_NAME || "";

const container_client = blobServiceClient.getContainerClient(containerName);
const THUMBNAIL_FOLDER_PATH: string = "/thumbnail/"
const VIDEO_FOLDER_PATH: string = "/video/"


async function get_thumbnail_from_blob(thumbnail_name: string) {
    const blob_client = container_client.getBlobClient(thumbnail_name);
    const blob_data = await blob_client.download(0);
    return blob_data;
}

async function get_video_from_blob(video_name: string) {
    const blob_client = container_client.getBlobClient(video_name);

    const sasOptions = {
        containerName,
        protocol: SASProtocol.Https,
        permission: ContainerSASPermissions.parse('r').toString(),
        expiresOn: new Date(new Date().valueOf() + 3600 * 1000)
    };

    const sasToken = generateBlobSASQueryParameters(sasOptions, sharedKeyCredential).toString();
    return `${blob_client.url}?${sasToken}`;
}


const getBlobs = async(containerBlobName: string) => {
    const blobs: Array<any> = [];
    const blob_names: string[] = [];

    const blob_list = container_client.listBlobsFlat();

    const loader = {
        [THUMBNAIL_FOLDER_PATH]: get_thumbnail_from_blob,
        [VIDEO_FOLDER_PATH]: get_video_from_blob
    };

    const loaderFunction = loader[containerBlobName];

    for await (const blob of blob_list) {
        blobs.push(await loaderFunction(blob.name));
        blob_names.push(blob.name);
    }

    return [blobs, blob_names]
}


export const get_thumbnails = async () => {
    const [thumbnails, thumbnail_names] = await getBlobs(THUMBNAIL_FOLDER_PATH);
    console.log("thumbnail: ", thumbnail_names);
    return [thumbnails, thumbnail_names]
}


export const get_videos = async () => {
    const [videos, video_names] = await getBlobs(VIDEO_FOLDER_PATH);
    return [videos, video_names]
}

关键安全提醒 #

你当前使用"use client"将Azure账户密钥暴露在前端代码中，这会导致密钥泄露，任何人都可通过浏览器开发者工具获取并操作你的存储账户。正确做法是将生成SAS Token的逻辑移到Next.js的API路由（服务器端），前端通过调用API获取视频/缩略图的访问URL，而非直接在客户端处理密钥。

内容的提问来源于stack exchange，提问作者user1828605