javascript - 使用域路由管理同一域名下的两个不同的 Azure 资源

标签 javascript reactjs azure azure-blob-storage

我正在尝试在 Microsoft Azure 中部署具有简单内容管理功能的 React 应用程序。 当用户访问网站上的静态内容时,应用程序只需从数据库中读取 html 代码并显示它。 鉴于 html 代码本身是静态的,我需要将图像等文件作为静态资源托管在 Azure blob 存储中。但由于我已经将自定义域名分配给应用程序,因此我无法在 Blob 存储中使用相同的域名。 如何将 Blob 存储集成到我的应用程序中,以便当浏览器尝试访问托管在路径(即“/assets”)下的文件时,它会在 Azure Blob 存储中的相应文件夹中查找路径名和文件名?

例如,如果 html 代码想要访问“/assets/img/1.jpg”,它将从我的 Azure Blob 存储文件夹中获取“/img/1.jpg”?

最佳答案

• 您可以通过在“src/azure-storage-blob.ts”中设置资源名称,将 azure blob 存储集成到您的 React 应用程序中,如下所示:-

‘const storageAccountName = process.env.storageresourcename || “文件上传演示”;’ • 使用以下参数生成 SAS token :-

属性(property)值(value) 允许的服务 Blob 允许的资源类型服务、容器、对象 允许的权限读、写、删除、列出、添加、创建 启用删除已检查的版本 开始和到期日期/时间 接受开始日期/时间并将结束日期时间设置为 future 24 小时。您的 SAS token 的有效期只有 24 小时。 仅 HTTPS 已选择 首选路由层 基本 已选择签名 key key1

• 在“src/azure-storage-blob.ts”中设置 SAS token ,如下所示。在代码中添加 SAS token 时,不要在 SAS token 值中添加“?”。

//如果 ? 是 token 的第一个字符,则删除它 const sasToken = process.env.storagesastoken || “SAS token ”;

• 现在,配置 CORS 以允许资源使用自定义域名连接到应用程序并保存。因此,您将能够通过在本地浏览器中打开应用 URL 来上传 azure blob 存储中的图像。

• 上传图像后,可以通过存储资源管理器在层次结构中访问和排列它们,类似地,这些图像的路径可以映射到 Azure Blob 存储并通过浏览器访问。

请参阅以下链接了解更多信息:-

https://learn.microsoft.com/en-us/azure/developer/javascript/tutorial/browser-file-upload-azure-storage-blob

https://learn.microsoft.com/en-us/azure/storage/blobs/storage-custom-domain-name?tabs=azure-portal

谢谢你,

关于javascript - 使用域路由管理同一域名下的两个不同的 Azure 资源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68680410/

相关文章:

azure - Docker 无法登录 azurecr.io

javascript - createPattern 不适用于 Canvas 矩形?

javascript - 如果内容大于屏幕高度,弹出窗口始终显示为固定在顶部边缘但会随着整个页面滚动?

javascript - 将 HTML 从原始文档复制到弹出窗口(使用 JQuery)

css - 具有静态和动态高度的垂直堆叠 View - React Native

javascript - ReactJs类型错误: Cannot assign to read only property 'name' of object '#<Object>'

AzureML 模型注册

javascript - 如何在 flot.js 中设置最小步长而不硬编码最大范围?

ios - 世博会 React Native 应用程序。使用 expo-secure-store 方法时出错 [该方法或属性 SecureStore.setItemAsync 在 ios 上不可用]

azure - ADF 将字符串转换为 Json 对象