Question

我已将基于ReactJS的应用程序部署到AWS S3存储桶。此外，由于响应路由器问题，我不得不使用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和webpack等构建工具完成。

Answer 2

要使此解决方案完成，create-react-app使用HtmlWebpackPlugin将脚本标记注入index.html文件。要附加哈希，请更改node_modules \ react-scripts \ config \ webpack.config.prod.js，如下所示（添加哈希：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

3 个答案: