Bereitstellen der react-redux-App in AWS S3

Es gibt ein Video Tutorial zum Bereitstellen der reaktiven App auf s3 . Dies wird für die Bereitstellung der App als solche auf s3 einfach sein, aber wir müssen einige Änderungen in unserer reaktiven App vornehmen. Da es schwierig ist, zu folgen, fasse ich als Schritte zusammen. Hier geht es:

1. Amazon AWS - & gt; s3 - & gt; Bucket erstellen .

2. Bucket-Richtlinie hinzufügen, damit jeder auf die reaktive App zugreifen kann. Klicken Sie auf created bucket - & gt; Eigenschaften - & gt; Berechtigungen Klicken Sie dort auf Bucket-Richtlinie bearbeiten . Hier ist ein Beispiel für die Bucket-Richtlinie.

   %Vor%

3. Wenn Sie Protokolle erstellen möchten, erstellen Sie einen anderen Bucket, und legen Sie den Bucket-Namen unter logs in den Eigenschaften fest.

4. Sie benötigen eine index.html (das ist der Ausgangspunkt Ihrer App) und error.html und alle öffentlichen Elemente (browsered reactJS App und andere CSS, JS, IMG-Dateien) in einem Ordner.

5. Stellen Sie sicher, dass Sie in index.html eine relative Referenz auf all diese öffentlichen Dateien haben.

6. Navigieren Sie nun zu Eigenschaften - & gt; statische Website-Hosting . Aktivieren Sie die Option Website-Hosting . Fügen Sie den Feldern index.html und error.html hinzu. Beim Speichern erhalten Sie den Endpunkt .

7. Schließlich wird Ihre App react-redux bereitgestellt. Alle deine Reaktionsrouten funktionieren ordnungsgemäß. Aber wenn Sie neu laden wird der S3 zu dieser bestimmten Route umleiten. Da solche Routen noch nicht definiert sind, wird error.html

zurückgegeben

8. Wir müssen einige Umleitungsregeln unter statisches Webhosting hinzufügen. Wenn 404 auftritt, muss S3 also zu index.html umleiten, aber dies kann nur durch Hinzufügen eines Präfixes wie #! erfolgen. Wenn Sie nun die Seite mit einer beliebigen Reaktionsroute neu laden, wird statt der error.html dieselbe URL mit dem Präfix #! geladen. Klicken Sie auf Umleitungsregeln bearbeiten und fügen Sie den folgenden Code hinzu:

   %Vor%

9. Als Reaktion müssen wir dieses Präfix entfernen und die Route auf die ursprüngliche Route verschieben. Hier ist die Änderung, die Sie in der Reaction-App vornehmen müssen. Ich habe meine main.js -Datei, die der Ausgangspunkt der react-App ist. Fügen Sie einen Listener wie folgt zu browserHistory hinzu:

   %Vor%

10. Der obige Code entfernt das Präfix und schiebt den Verlauf auf die richtige Route (HTML 5 Browserhistorie). Zum Beispiel: so etwas wie Ссылка ändert sich zu Ссылка . Das macht react-router , um die Route entsprechend zu verstehen und zu ändern. Hier ist meine main.js -Datei zum besseren Verständnis:

    %Vor%

Das Hochladen der Browser- oder Web-Packed-Reaction-App (app.js-Datei) wird also den erforderlichen Bedarf decken. Da ich Schwierigkeiten hatte, all das Zeug zu sammeln, habe ich all diese Schritte zusammengefasst.

Sie können den neunten Schritt ignorieren, indem Sie die 8. Konfiguration als

und benutze browserHistory in react-router