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

我已将基于ReactJS的应用程序部署到AWS S3存储桶。另外，由于反应路由器问题，我必须使用CloudFront，请参阅S3 Static Website Hosting Route All Paths to Index.html。现在，使用CloudFront时，我必须在更改端点（例如API主机，回调URL等）时重新创建分配，这是否正常工作？将基于reactjs的应用程序部署到AWS

来源

2017-06-26 nomadus

不，您不必重新创建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使用插件来完成。

来源

2017-06-26 07:08:44

这实际上是有道理的人，我想试试。我使用了create-react-app，你知道我需要做什么修改才能获得捆绑版本？ – nomadus

我相信这样做对你来说已经是https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.prod.js#L74 –

我检查过了，它正在向js文件中添加哈希代码，但我没有看到哈希值正在改变。 – nomadus

为了使此解决方案完整，create-react-app使用HtmlWebpackPlugin将脚本标记插入到index.html文件中。要追加的散列，改变node_modules \反应的脚本\设置\ webpack.config.prod.js如下（添加的散列：真线）

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

来源

2017-06-26 09:10:25 nomadus

不，你不需要添加这样的东西来创建React应用程序。它已经添加了散列。 –

CRA在内部使用Webpack .... –

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

书面只需添加无效的/index.html

来源

2017-06-26 10:35:50 nomadus