Bereitstellen reactjs basierte Anwendung auf AWS

Question

Ich habe eine ReactJS basierte Anwendung auf AWS S3 Eimer eingesetzt. Außerdem musste ich CloudFront aufgrund von Problemen mit dem Router verwenden, siehe S3 Static Website Hosting Route All Paths to Index.html. Nun, mit CloudFront muss ich die Verteilung neu erstellen, wenn ich Endpunkte (z. B. API-Host, Callback-URL usw.) ändern, ist das so, wie es funktioniert?

Answer 1

Nein, Sie müssen nicht Cloudfront Verteilung neu erstellen.

Eine gängige Praxis ist, einen Hash zu dem statischen Vermögenswert anzuhängen, zB:

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

Der Hash ist in der Regel die MD5/SHA1-Hash der Datei. Einige verwenden möglicherweise den Zeitstempel der Zeit, in der Sie den Code erstellen. Nachdem Sie den Dateiinhalt aktualisiert und eine neue Bereitstellung vorgenommen haben, sollte daher ein neuer Hash verwendet werden. Betrachten Sie die folgende Strömung als Client:

1. Ein Client-Anfragen für myapp.bundle.js?v=1
2. Cache existiert noch nicht, Proxies Cloudfront die Anforderung an S3 direkt und speichert den Inhalt.
3. Cloudfront liefert zwischengespeicherten Inhalt für alle nachfolgenden Anforderungen an myapp.bundle.js?v=1.
4. Jetzt haben Sie Ihren Code aktualisiert und auf S3 bereitgestellt (mit einem neuen Hash in Ihrer index.html).
5. Clients fordern jetzt myapp.bundle.js?v=2 statt
6. wiederholen 2-3 und so weiter

Das Hash Anfügen in der Regel von Build-Tool wie gulp und webpack mit Plugins erfolgt.

Answer 2

Zu dieser Lösung komplett zu machen, erstellen reagieren-App HtmlWebpackPlugin verwendet Script-Tag in die Datei index.html zu injizieren.

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 
    }), 

Um die Details zu sehen, finden Sie in der Dokumentation https://github.com/jantimon/html-webpack-plugin#configuration: Um einen Hash, die node_modules ändern \ reagieren-Scripts \ config \ webpack.config.prod.js wie unten (true Zeile hinzugefügt Hash) anhängen

Answer 3

der beste Weg, derjenige sein würde, der https://medium.com/@omgwtfmarc/if-youre-not-already-doing-this-creating-an-invalidation-for-cloudfront-will-dramatically-speed-7080357c9e8d hier geschrieben

Nur Ungültigkeits hinzufügen für /index.html