将 React JS (with/webpack) 部署到 S3 和 CloudFront答案

【问题标题】：Deploying ReactJS (w/ webpack) to S3 & CloudFront将 React JS (with/webpack) 部署到 S3 和 CloudFront
【发布时间】：2017-07-30 04:31:24
【问题描述】：

我有一个 ReactJS 应用程序，当我执行 npm build 时会生成一个 dist 文件夹。这个可以上传到亚马逊的S3上就一切正常了。

我希望持续部署这个应用程序，所以我的想法是部署到s3://RANDOM_STRING/，生成：

RANDOM_STRING/js RANDOM_STRING/css RANDOM_STRING/index.html

据我所知，我无法告诉 S3 将子目录用作 Web 根目录，因此我查看了 CloudFront 并将源更新到目录。这需要花费大量时间来更新，实际上无法通过aws-cli 完成，因此会破坏持续部署。

我研究过使用file-loader 重写我的url() 调用以将RANDOM_STRING 包含到部署资产中，但这感觉很“丑陋”

有没有人有这种部署的经验并且可以帮助我？

【问题讨论】：

RANDOM_STRING 是存储桶名称，还是存储桶内的路径？
桶内的路径
我想我总是可以部署到一个新的存储桶并更改 DNS，但这也不正确:)
我们使用 CI 部署到 S3 存储桶，但只是覆盖存储桶中的现有文件，尽管任何 js 资产都具有缓存清除文件名。使用自定义 ssl 证书在存储桶前运行 cloudfront。
所以您需要让 Cloudfront 使 index.html 无效？如何清理旧部署？

【解决方案1】：

您是否尝试过设置默认根对象？您可以将其配置为子目录。

【讨论】：