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

Question

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

Answer 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 and webpack 和插件。

Answer 2

为了完成这个解决方案，create-react-app 使用 HtmlWebpackPlugin 将脚本标签注入 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

Answer 3

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

只需为 /index.html

添加失效

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

Deploying reactjs based application to AWS

reactjs

amazon-s3

amazon-cloudfront