= Bereitstellen von React-Apps auf Amazon S3 =
== 5-Minuten-Anleitung zum Bereitstellen von React-Apps mit S3 ==
Sie haben also Ihre React-App fertiggestellt und möchten sie irgendwo hosten. Wussten Sie, dass Sie Amazon AWS S3 zum Hosten Ihrer React-Apps verwenden können? Es ist relativ einfach, kostengünstig und schnell zu implementieren.
= Fangen wir an! =
== Voraussetzungen ==
Bevor wir uns mit dem Hosting befassen, lassen Sie uns die administrative Einrichtung erledigen. Stellen Sie sicher, dass Folgendes abgeschlossen ist:
**Sie haben ein AWS-Konto Melden Sie sich hier für ein AWS-Konto an: httpsaws.amazon.com/resources/create-account/ **Erstellen eines AWS-Benutzers Gehen Sie in der AWS-Konsole zur Registerkarte IAM und dann zu à Abschnitt ¢ÃÃBenutzer¢ÃÂà in der Seitenleiste.
Klicken Sie auf „Benutzer hinzufügen“ und markieren Sie „Programmgesteuerter Zugriff“. ÃÂ.
Klicken Sie auf „Weiter: Berechtigungen“ und wählen Sie hier „Bestehende Richtlinien direkt anhängen“. ÂÃÂ. Aktivieren Sie für den Bereitstellungszweck „AdministratorAccess“ (Administratorzugriff).
Klicken Sie sich durch die Schaltflächen Weiter und klicken Sie schließlich auf „Benutzer erstellen“.
Im letzten Schritt erhalten wir eine Zugangsschlüssel-ID und einen geheimen Zugangsschlüssel. Herunterladen und
**Speichern Sie sie auf Ihrem Computer, da Sie diese später benötigen
== AWS CLI installieren ==
Die AWS CLI ist ein leistungsstarkes Tool, das uns dabei helfen kann, den Bereitstellungsprozess zu vereinfachen.
Lassen Sie uns AWS CLI mit Homebrew (für macOS) installieren. Installiere Homebrew, falls du es noch nicht getan hast.
*Hinweis: Wenn Sie Windows verwenden, finden Sie die Anweisungen in den offiziellen Dokumenten * *hier*
Öffnen Sie Ihr Terminal und geben Sie es ein
awscli installieren.
Sobald das CLI-Tool installiert ist, können wir unser AWS-Konto mit konfigurieren
aws konfigurieren. Hier müssen Sie die zuvor heruntergeladenen Zugangsschlüsselinformationen eingeben. Es sollte etwa wie folgt aussehen.
Für die Region können Sie Ihre URL in der AWS-Konsole überprüfen und Ihre Region wird erwähnt. Meine ist zum Beispiel âÃÂÃÂap-southeast-1âÃÂÃÂ.
= Erstellen einer React-App =
Möglicherweise ist Ihre React-App bereits einsatzbereit. Wenn Sie jedoch eine Beispiel-App benötigen, können Sie die folgenden Optionen verwenden:
- Generieren Sie eine vorgefertigte React-App, indem Sie sie ausführen
npx create-react-app meine-app
- Laden Sie meine Beispiel-React-App (mit einem Formularbeispiel) von httpsgithub.com/harishv7/react-hook-form-example herunter. Dies wurde für ein Tutorial zum Hinzufügen von Formularen zu React-Apps durchgeführt. Schau es dir hier an.
Stellen Sie anschließend sicher, dass alle Abhängigkeiten installiert sind
Garn installieren und die App mit ausführen
Garn beginnen.
= Richten Sie einen S3-Bucket ein =
Nachdem wir nun unsere Beispiel-App bereit haben, konfigurieren wir einen S3-Bucket zum Hosten unserer App.
Suchen Sie in der AWS-Konsole nach âÃÂÃÂS3âÃÂàund gehen Sie zum S3-Dashboard. Klicken Sie auf „Bucket erstellen“ und geben Sie dem Bucket einen Namen wie „my-react“. -app-2021âÃÂà (oder alles andere, was Sie wünschen).
*Hinweis: Der Bucket-Name muss in ganz S3 eindeutig sein. Wählen Sie also einen eindeutigen Namen, der nicht existiert, sonst erhalten Sie eine Fehlermeldung!* 
Aktivieren Sie den öffentlichen Zugriff auf den Bucket, da wir ihn live hosten.
Lassen Sie die restlichen Einstellungen unverändert und klicken Sie auf „Bucket erstellen“. Auf Ihrem S3-Dashboard sehen Sie einen Eintrag wie den folgenden.
Lassen Sie uns klicken und in unseren neu erstellten S3-Bucket gehen.
Klicken Sie auf „Eigenschaften“ und scrollen Sie ganz nach unten, wo Sie möchten siehe „Statisches Website-Hosting“.
Klicken Sie auf „Aktivieren“ und geben Sie „index.html“ ein ÃÂ unter Index-Dokument.
Lassen Sie die anderen Felder unverändert und klicken Sie auf „Änderungen speichern“.
= Bereitstellen auf S3 =
Jetzt können wir unsere App auf S3 bereitstellen. Verwenden Sie dazu den folgenden CLI-Befehl:
aws s3 sync build/ s3your-bucket-name>--acl public-read
Wir können diesen Befehl auch als âÃÂÃÂdeployâÃÂÃÂ-Skript zu unserer package.json-Datei hinzufügen.
Lassen Sie uns unsere App mit erstellen
Garnaufbau, der zu einem optimierten Produktionsaufbau beiträgt.
Als Nächstes führen wir den oben angegebenen CLI-Befehl aus, oder wenn Sie Ihr Veröffentlichungsskript in package.json eingerichtet haben, können wir es verwenden
Garn bereitstellen.
Das war's, unsere App ist jetzt im Einsatz!
Um herauszufinden, wo unsere App gehostet wird (der Website-Link), gehen Sie zur AWS S3-Konsole und klicken Sie auf den von Ihnen erstellten Bucket.
Gehen Sie auf die Registerkarte „Eigenschaften“ und scrollen Sie ganz nach unten zur statischen Website Hosting-Bereich und unsere URL wird dort sein.
Klicken Sie darauf und Ihre App wird in einem neuen Tab geöffnet. Hier ist meins!
= Fazit =
Wir haben unsere React-App erfolgreich auf Amazon S3 bereitgestellt! Dies ist eine großartige Wahl, um Ihre React-Prototypen schnell bereitzustellen und zu testen und sie mit anderen zu teilen. Es ist wirklich einfach und schnell zu implementieren.
Ich hoffe, dieses Tutorial war hilfreich für Sie!
Viel Spaß beim Codieren! ðÃÂû
*Weitere Inhalte unter * *plainenglish.io*
