从亚马逊的 s3 加载一个 html 元素

Posted 2023-03-24

【中文标题】从亚马逊的 s3 加载一个 html 元素

【英文标题】：Load an html element from amazon's s3

【发布时间】：2021-08-19 23:58:36

【问题描述】：

我知道可以通过src 属性引用存储在s3 中的图像，但是如果我想加载更复杂的东西，比如一段静态html，该怎么办。有什么方法可以简单地将 html 拉下来以供使用/插入到 DOM 中（我想类似于 rest 调用）？

我认为在这种情况下 css 将是内联的，但这将是下一个挑战。

（作为参考，我在一个角度框架中尝试实现页面的一部分，该部分将通过存储在 s3 中的代码呈现，因此无需部署代码库即可轻松更新它）

【问题讨论】：

问：可以通过 src 属性引用存储在 s3 中的图像吗？答：当然：只需“获取”URL。问：但是如果我想加载更复杂的东西，比如一段静态 html，该怎么办？ A: 1) 你需要一个网络抓取工具或库：hevodata.com/learn/8-best-web-scraping-tools ...或者...你将构建你的应用程序以从 CDN 中提取“静态”文件（HTML、图像、mp3 剪辑等） ：Powering server-side rendering by offloading static assets to CDN for Angular apps

【参考方案1】：

一个可能的解决方案是拥有一个返回 JSON 格式文件的 API（只是一个粗略的假设）：

htmlCodeAlongWithStyle:'Code in string'

这里我们没有创建单独的样式表，而是使用单个 HTML 组件的样式属性。

现在嵌入代码只需创建一个 div 标签并将 innerHTML 设置为 json 的 htmlCodeAlongWithStyle 属性的值。 示例：

<div [innerHTML]='variableStoringAPIResponse.htmlCodeAlongWithStyle'></div>

【参考方案2】：

我强烈建议您查看CDNs 是否适合您的用例：

Powering server-side rendering by offloading static assets to CDN for Angular apps

由于您使用的是 Amazon S3，我建议您查看 Amazon Cloudfront。但是您还有许多其他选择 - 包括直接从您的 S3 实例提供静态内容。