使用 S3 和 Cloudfront 的静态 Web 应用程序版本控制答案

【问题标题】：Static Web App versioning with S3 and Cloudfront使用 S3 和 Cloudfront 的静态 Web 应用程序版本控制
【发布时间】：2023-03-15 08:51:01
【问题描述】：

目前我正在使用 S3 和 CloudFront 来托管静态 Angular 应用程序。

我想在每次部署时对应用进行版本控制，以确保轻松回滚（通过我的命令行工具或自动管道）。

我的 S3 存储桶看起来像这样：

/production/v1.2
/production/v1.3
/production/v1.4

下一次部署将在文件夹 /production/v1.5 等中。

我想使用这种策略，以便在回滚的情况下，我只需将网站指向从旧版本 /production/v1.4 加载。

我的第一个解决方案是更新 CloudFront 配置源路径以指向新文件夹，例如 /production/v1.4
在回滚的情况下，我只需将 CloudFront 配置源路径更新为 /production/v1.3

第二个解决方案相反，我想有一个 live/ 文件夹并有一个 CloudFront 原始路径指向 S3 中的 live/index.html 文件夹，并将我的应用程序的最后一个版本复制到那里，或者每次都复制回滚版本而不更改CloudFront 源路径：

/production/v1.2
/production/v1.3
/production/v1.4
/production/live

在/production/v1.4和/production/live中部署新版本
在回滚的情况下，只需将/production/v1.3 复制到/production/live

考虑到通过 cli 和缓存失效更新 CloudFront 分发设置并不容易：

你有什么推荐的？有没有更好的方法来处理这种情况？

【问题讨论】：

第二种解决方案的唯一问题是缓存。即使您更改了存储桶的内容，Cloudfront 仍可能从缓存中提供旧版本
@albanx，你是怎么解决这个问题的？我是第一次实现这个，并且一直倾向于第一种方法，更新原始路径。但是 AWS cloudfront 更新分发看起来有点毛茸茸，所以我有第二个想法......
@CharlesO。我在这里的部署脚本pastebin.com/wHJ5MN3D 基本上是第一个解决方案，通过将 index.html 从构建目录复制到 s3 根目录，还有一个额外的步骤，还要注意角度构建选项，它们定义了输出目录和部署url，影响 index.html

标签： angular amazon-s3 static amazon-cloudfront

【解决方案1】：

根据您的要求，我创建了 python 库，该库负责为回滚操作创建部署和备份文件夹。它还包括 CloudFront 缓存失效。

https://github.com/aviboy2006/angular-upload-s3cf

【讨论】：

【解决方案2】：

不确定这是否适合大多数人，但我已经在我们的生产环境中实施了这个概念验证；

我需要使用 nonce 实现内容安全策略。我在那里实现了一个 API 网关，它提供一个 lambda 函数，其中包含我们的 Index.html 文件和一个 js 函数来添加标头（带有 nonce 的 content-security-policy）

由于我们仍然使用 Angularjs 1.X，因此 index.html 文件将整个应用程序链接在一起（这可能对大多数单页应用程序都很重要）。我们的 CSS 和 JS 文件带有时间戳（在它们的文件名中），因此它不会在每次新部署时被云端缓存。如果我想回滚我的应用程序，我可以使用 Lambda 的内置版本控制。

如何实现 API 网关 + lambda 函数来为 index.html 文件提供服务的示例 https://github.com/csarkosh/readme-viewer/tree/master

csarkosh 在他的中等帖子中没有详细解释他的冒险经历： https://medium.com/@csarkosh/my-experience-getting-an-a-from-mozillas-observatory-tool-on-aws-f0abf12811a1

【讨论】：