我正在尝试在 Microsoft Azure 中部署一个具有简单内容管理功能的 React 应用程序。 当用户访问网站上的静态内容时，应用程序只需从数据库中读取 html 代码并显示出来。 鉴于 html 代码本身是静态的，我需要将图像等文件作为静态资源托管在 Azure Blob 存储中。但由于我已经将我的自定义域名分配给了应用程序，因此我无法将相同的域名用于 Blob 存储。 如何在我的应用程序中集成 blob 存储，以便当浏览器尝试访问路径下托管的文件时，即“/assets”，它会在 Azure blob 存储中的相应文件夹中查找路径名和文件名？
例如，如果 html 代码要访问“/assets/img/1.jpg”，它会从我的 Azure Blob Storage 文件夹中获取“/img/1.jpg”？
【问题讨论】：
标签： javascript reactjs azure azure-blob-storage
• 您可以通过在“src/azure-storage-blob.ts”中设置资源名称来将 azure blob 存储集成到您的 react 应用程序中，如下所示：-
‘const storageAccountName = process.env.storageresourcename || “文件上传演示”；' • 使用以下参数生成 SAS 令牌：-
物业价值 允许的服务 Blob 允许的资源类型服务、容器、对象 允许的权限 读取、写入、删除、列出、添加、创建 启用删除版本检查 开始和到期日期/时间 接受开始日期/时间并将结束日期时间设置为未来 24 小时。您的 SAS 令牌仅在 24 小时内有效。 仅 HTTPS 已选择 首选路由层基本 已选择签名密钥 key1
• 在“src/azure-storage-blob.ts”中设置 SAS 令牌，如下所示。在代码中添加 SAS 令牌时，不要在 SAS 令牌值中添加“？”。
// 如果?是token的第一个字符，则删除它
常量 sasToken = process.env.storagesastoken || “SAS 令牌”；
• 现在，配置 CORS 以允许资源使用自定义域名连接到应用程序并保存。因此，您可以通过在本地浏览器中打开应用 URL 来上传 azure blob 存储中的图像。
• 上传图像后，可以通过存储资源管理器在层次结构中访问和排列它们，类似地，这些图像的路径可以映射到 Azure blob 存储并通过浏览器访问。
更多信息请参考以下链接：-
https://docs.microsoft.com/en-us/azure/storage/blobs/storage-custom-domain-name?tabs=azure-portal
谢谢你，
【讨论】：