如何通过Azure Front Door展示存储容器中的所有Blob

要实现通过Azure Front Door URL展示存储容器内所有Blob并支持下载，按以下步骤操作：

1. 配置存储容器权限与列表功能 #

• 将目标存储容器的访问级别设置为容器（Container），允许匿名访问并列出容器内的Blob；如果需要保持容器私有，后续需通过Front Door的托管标识授权访问。
• 若使用私有容器，需在Azure存储账户的“访问控制（IAM）”中，为Front Door的托管标识分配Storage Blob Data Reader角色，确保Front Door能读取容器内的Blob列表。

2. 配置Azure Front Door路由规则 #

• 在Front Door的路由规则中，添加一条新路由：
  • 前端路径：设置为你想要的访问路径（例如/blob-container）
  • 后端池：选择你的存储账户后端，或者直接指定存储容器的列表端点https://<存储账户名>.blob.core.windows.net/<容器名>
  • 路由规则设置：开启“查询字符串传递”，并确保允许传递restype=container&comp=list参数；如果是私有容器，需在后端设置中启用托管标识认证。

3. 优化Blob列表展示（可选） #

默认的Blob列表是XML格式，不够用户友好，你可以自定义一个HTML页面来渲染可点击的下载链接：

• 创建一个简单的HTML文件（示例代码如下），将其中的占位符替换为你的存储账户和容器信息：

<!DOCTYPE html>
<html>
<head>
    <title>Blob下载列表</title>
</head>
<body>
    <h2>可用Blob文件</h2>
    <div id="blob-links"></div>
    <script>
        // 替换为你的存储容器列表端点
        const listEndpoint = 'https://<存储账户名>.blob.core.windows.net/<容器名>?restype=container&comp=list';
        fetch(listEndpoint)
            .then(res => res.text())
            .then(xmlStr => {
                const xmlDoc = new DOMParser().parseFromString(xmlStr, 'text/xml');
                const blobs = xmlDoc.querySelectorAll('Blob');
                const container = document.getElementById('blob-links');
                blobs.forEach(blob => {
                    const blobName = blob.querySelector('Name').textContent;
                    // 替换为你的Front Door域名
                    const downloadUrl = `https://<你的Front Door域名>/<容器名>/${blobName}`;
                    const link = document.createElement('a');
                    link.href = downloadUrl;
                    link.textContent = blobName;
                    link.download = blobName;
                    link.style.display = 'block';
                    link.style.margin = '8px 0';
                    container.appendChild(link);
                });
            });
    </script>
</body>
</html>

• 将该HTML文件命名为index.html，上传到存储容器中；
• 在Front Door中调整路由，将前端路径指向存储容器的静态网站端点（需先启用存储账户的静态网站功能，将索引文档设为index.html）。

4. 验证效果 #

完成配置后，访问Front Door的对应URL即可看到格式化的Blob列表，点击链接即可直接下载对应的Blob文件。

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