将基于 reactjs 的应用程序部署到 AWS答案

【问题标题】：Deploying reactjs based application to AWS将基于 reactjs 的应用程序部署到 AWS
【发布时间】：2017-11-28 23:27:09
【问题描述】：

我已将基于 ReactJS 的应用程序部署到 AWS S3 存储桶。此外，由于 react-router 问题，我不得不使用 CloudFront，请参阅 S3 Static Website Hosting Route All Paths to Index.html。现在，使用 CloudFront，当我更改端点（例如 API 主机、回调 URL 等）时，我必须重新创建分配，这是它的工作方式吗？

【问题讨论】：

标签： reactjs amazon-s3 amazon-cloudfront

【解决方案1】：

不，您不必重新创建 Cloudfront 分发版。

一种常见的做法是将哈希附加到静态资产，例如：

<script src="myapp.bundle.js?v=12345678"></script>

散列通常是文件的 MD5/SHA1 散列。有些人可能会使用您构建代码的时间的时间戳。因此，在您更新文件内容并发布新的部署后，应该使用新的哈希。将以下流程视为客户端：

客户端请求myapp.bundle.js?v=1
缓存尚不存在，Cloudfront直接将请求代理到S3并缓存内容。
Cloudfront 将缓存内容提供给 myapp.bundle.js?v=1 以供任何后续请求使用。
现在您更新了代码并部署到 S3（在 index.html 中使用新的哈希）。
客户现在改为请求myapp.bundle.js?v=2
重复 2-3 以此类推

哈希附加通常由构建工具完成，例如 gulp 和 webpack 与插件。

【讨论】：

这个其实很有道理，我想试试。我使用了 create-react-app，你知道我需要进行哪些更改才能获得捆绑版本吗？
我相信它已经为你这样做了github.com/facebookincubator/create-react-app/blob/master/…
我检查了，它是在js文件中添加一个哈希码，但我没有看到哈希值在变化。
考虑用另一个问题来问这个问题。原始问题更多关于 Cloudfront。
CRA 已经附加了一个哈希值。如果源代码发生变化，哈希值也会发生变化。

【解决方案2】：

为了完成这个解决方案，create-react-app 使用 HtmlWebpackPlugin 将 script 标签注入到 index.html 文件中。要附加哈希，请更改 node_modules\react-scripts\config\webpack.config.prod.js 如下（添加 hash:true 行）

new HtmlWebpackPlugin({
      inject: true,
      template: paths.appHtml,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
      },
      hash:true
    }),

要查看详细信息，请参阅文档 https://github.com/jantimon/html-webpack-plugin#configuration

【讨论】：

不，你不需要在 Create React App 中添加任何类似的东西。它已经添加了哈希。

【解决方案3】：

最好的方法是这里写的https://medium.com/@omgwtfmarc/if-youre-not-already-doing-this-creating-an-invalidation-for-cloudfront-will-dramatically-speed-7080357c9e8d

只需为 /index.html 添加失效

【讨论】：