删除 S3 中旧的 React 构建文件

如何解决删除 S3 中旧的 React 构建文件

我正在使用 AWS 代码构建和通过 AWS CloudFront 缓存在 AWS S3 中部署我的 React 应用程序，但由于频繁部署，存储桶大小在一个月内增加到 10GB 以上。

我在部署时尝试删除旧的构建文件，但这给浏览器中缓存了旧代码的用户带来了问题。由于旧文件试图获取先前版本的构建但已删除，因此会抛出 404。

我尝试为 index.html 文件设置无缓存，但这并没有解决这个问题。

有人遇到过这个问题吗？

解决方法

有很多元素可能会抛出 404，如果他们正在努力寻找根本原因，您需要一一证明。

首先我会尝试存储桶本身，使用 <s3-bucket-url>/index.html 并查看文件（在本例中为 index.html ）是否存在。

第二个 cloudfront，我假设 cloudfront 分发配置正确（即 / 路径重定向到 /index.html）。此外，每次编辑存储桶文件时，请创建一个 invalidation to speed up propagation。

第三，您需要告诉您的用户不断地重新加载页面，或使用隐身模式，特别是在您的网站处于不断发展中的情况下。

,

@Nilanth 这是我为类似案例所做的：

我的堆栈也是一个 React 应用程序（不是那么关键的业务）（它用于为主要内容管理流程提供文章选择可能性..）应用程序是通过 CodeCommit 构建的 - Codebuild to s3 Bucket 使用 CodePipeline 和 buildspec.yml 文件.通过提交存储库触发构建它。我遇到了类似的问题，Cloudfront 没有为浏览器（html）“提供”最新的 JS 文件，所以它开始感觉像是缓存问题。

我做了这样一个很好的解决方案：

1. 更新 Cloudfront 缓存设置（编辑行为，设置为使用“使用旧缓存设置”）并将最小/最大 TTL 设置为 0。（这有助于缓存，因此用户应立即获取最新版本）

2. 对于 JS / CSS 文件问题，我将“aws cli remove command”行添加到 buildspec.yml 文件中，例如：

• aws s3 rm s3:///static/js/ --recursive
• aws s3 rm s3:///static/css/ --recursive

将它们设置为 pre_build 命令 注意：请注意，通过删除 JS 文件，您的应用程序在 /js 和 /css 文件夹中再次提供新文件之前无法使用。我您的应用程序对业务至关重要，那么您可以考虑更多，因为该应用程序将有 30 到 60 秒的时间无法使用。如果构建失败，那么根本没有 js/css 资产，那么您可以从 Codebuild 触发旧构建。这将需要一些努力来完成关键业务应用的 DevOps 工作。

3. 要允许“删除”对 S3 Bucket 的执行，您需要授予 Codebuild 额外权限。去构建项目，查看环境的服务角色。然后转到 IAM /角色 / 选择正确的角色名称，并授予更多 S3 权限，例如AmazonS3FullAccess，肯定够了..

我不确定，这是来自 Cloudfront 方面 99% 正确的解决方案，但它似乎避免了缓存问题，并且存储桶大小保持较小。

-MM