將基於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