Amazon s3 创建react应用程序：从CDN提供index.html，并在新版本后加载正确的静态资产

Context：当使用create-react应用程序并通过CDN（CloudFront）+S3（源服务器）托管它时，每当生成新的构建时，build index.html引用文件名中带有更新的“hash”的静态资产，以处理这些资产的缓存破坏

缓存：根据create react应用程序文档，建议将静态文件（js、css、媒体）长期缓存到期（缓存控制：最大年龄=31536000），对于index.html：缓存控制：无缓存

我发现这种方法的问题是，index.html总是从源服务器（s3）获取，而CDN被绕过。这将导致延迟，并破坏使用CDN提供快速页面加载的目的

在参考了很多文章之后，我考虑了一些选项，但我没有找到一个看起来很理想的解决方案：

选项1：不要在S3上的index.html上设置缓存控制头，让CDN（CloudFront）为其服务。每当部署新版本时，显式使CDN上index.html的缓存无效

问题：当任何CDN上的缓存密钥无效时，其所有边缘服务器可能需要几分钟才能反映更新的s3对象（index.html）。在此时间窗口期间，从CDN获取旧index.html服务的浏览器将尝试从CDN下载旧静态资产（js、css），如果缓存未命中，CDN将尝试从源服务器（S3）下载S3存储桶中不再存在的资产。这将导致某些遇到此竞争条件的用户无法加载应用程序

选项2:从CRA中弹出，生成一个散列输出文件夹（webpack会自动生成该文件夹），所有静态资产都放置在该文件夹中。创建一个“version.json”文件，在该json文件中写入此输出构建文件夹的名称，并将其上载到S3。 在index.html中，有一个内联脚本，它获取两个文件：

/version.json

/asset-manifest.json 然后，它解析asset-manifest.json以读取入口点，使用从version.json读取的值为这些入口点资产形成版本化URL，并将脚本和链接标记插入index.html，以触发静态资产的加载

这是一条更复杂的路线，在CDN上托管基于CRA的应用程序时，我找不到任何人使用这条路线的参考资料，因此我觉得这种方法可能不是最好的方法（因为它涉及到取消CRA以及重新发明轮子）

有什么建议是正确的方法吗？我对上述问题本身的理解可能是错误的，因此对此的任何澄清/见解都是非常好的。多谢各位