= Verwendung von AWS Amplify zur Bereitstellung einer React-Anwendung =
== Eine Anleitung zum Bereitstellen von React-Anwendungen mit AWS Amplify ==
Seit ich als Software Engineer mit der Beratung begonnen habe, wollte ich eine Portfolio-Website zusammenstellen, die das präsentiert
persönliche und berufliche Projekte, an denen ich gearbeitet habe. In dieser Winterpause habe ich Zeit damit verbracht, meine Portfolio-Site zu entwerfen, zu entwickeln und bereitzustellen, und in diesem Artikel werde ich Sie durch die Bereitstellung mit AWS Amplify führen. Sie können die Website unter dan-murphy.com und den Code auf GitHub anzeigen.
= Ein kurzer Hintergrund =
Der größte Teil meiner beruflichen Arbeit besteht darin, datengesteuerte Anwendungen zu erstellen und Datenpipelines zu rationalisieren. Um diese Aufgaben zu erfüllen, verwende ich regelmäßig Python und Ruby und integriere JavaScript für alle Frontend-Arbeiten. Um mich mit React vertrauter zu machen, habe ich mich entschieden, das Framework zum Erstellen meiner Portfolio-Website zu verwenden.
= Einrichten der Anwendung =
Der erste Schritt, den ich unternahm, war die Entscheidung, wie ich die Bewerbung strukturieren sollte. Ich habe verwendet
create-react-app als Basisvorlage für meine Verzeichnisse erstellt und die Anwendung dann mit einigen zusätzlichen Ordnern neu strukturiert. Das fertige Setup sieht so aus:
Quelle
Komponenten
âÃÂÃÂArchive
âÂÂExtras
Daten
âÂÃÂimgs
Seiten
âÂÃÂInhalt
Daten
Stile
Prüfungen
Vorrichtungen
Einige der bemerkenswerten Änderungen sind die
**Komponenten**
, Und
**Seiten**
Verzeichnisse.
**Stile**
,
: Hier speichere ich alle Komponenten für die Anwendung. Durch das Speichern der Komponenten in einem zentralen Ordner ist es einfacher, meinen Code wiederzuverwenden und umzugestalten, und er ist für andere intuitiver verständlich. Einige der Komponenten, aus denen meine Portfolio-Website besteht, sind
Komponenten
Header,
Fußzeile und
ProjektSidebar.
: Hier erstelle ich die verschiedenen Seiten für die Anwendung. Ich importiere die benötigten Komponenten aus der
Seiten
Ordner und aggregieren sie dann, um die Seite zu entwerfen. Hier ist ein Beispiel dafür, wie ich das für die gemacht habe
Komponenten Homepage:
: Hier definiere ich globale CSS-Stile für die Anwendung. Ich liebe es zu benutzen
Stile
styled-components für einzelne Komponenten, aber ich fand es auch nützlich, globale Stile zu erstellen, die für jede Seite verfügbar sind.
Schließlich verwenden wir, um Anfragen den richtigen Seiten zuzuordnen
reagieren-router-dom. Die Routen sind in der definiert
App.js-Datei wie unten gezeigt:
Dies wird zuordnen
Startseite,
/projects Anfragen an
ProjekteSeite,
/über Anfragen an
AboutPage und
/bookshelf Anfragen an
Buchseite. Jetzt, da die Entwicklung der Anwendung abgeschlossen ist, müssen wir sie bereitstellen, damit andere sie verwenden können!
/Anfragen an
= Bereitstellen mit AWS Amplify =
== Übersicht ==
Es gibt mehrere Möglichkeiten, eine React-Website bereitzustellen, aber ich habe festgestellt, dass eine der einfachsten die Verwendung ist
**AWS Amplify Amplify wird als der „schnellste und einfachste Weg zum Erstellen skalierbarer mobiler und Web-Apps“ beschrieben. AWS extrapoliert alle Komplikationen beim Einrichten eines Servers, Installieren von Abhängigkeiten und Erstellen eines Produktions-Builds Ihrer Website, sodass Sie sich ausschließlich auf die Erstellung einer intuitiven UX konzentrieren können. Um mehr darüber zu erfahren, was AWS Amplify für datengesteuerte Anwendungen bietet (insbesondere Websites mit einem **Front-End** und **Back-End), lesen Sie deren Dokumentation.
== Verbinde dein Repository ==
Um Ihre Web-App auf AWS Amplify zu hosten, müssen Sie zuerst das Repository verbinden, das Ihren Quellcode enthält. Navigieren Sie dazu zu
*AWS Amplify* *Erste Schritte* **Meine Web-App hosten und auf **App-Repo verbinden *Seite klicken, zu*Seite scrollen, zu 
Dann werden Sie auf eine separate Seite weitergeleitet, auf der Sie das Repository mit Ihrem Quellcode verbinden können. Für dieses Beispiel wähle ich GitHub, aber AWS Amplify unterstützt auch BitBucket, GitLab, AWS CodeCommit und sogar die Bereitstellung ohne einen Git-Anbieter.
Nach erfolgreicher Autorisierung können Sie auswählen, welches Repository Sie bereitstellen möchten, und den Branch auswählen, den AWS Amplify für Produktions-Builds verwenden soll.
Klicken Sie danach auf
**Next** und AWS fordert Sie auf, Ihre *build*- und *test*-Einstellungen zu konfigurieren. Die von AWS bereitgestellte Basisvorlage ist unten dargestellt.
Version 1
Frontend:
Phasen:
Vorbau:
Befehle:
- npm-Installations-Build:
Befehle:
- npm-Run-Build
Artefakte:
Basisverzeichnis: build
Dateien:
-
Zwischenspeicher:
Wege:
- node_modules
Außerdem unter der
**Erweiterte Einstellungen** umschalten, Sie können Umgebungsvariablen und einen benutzerdefinierten Build-Container festlegen.
Nachdem Sie die Einstellungen für Ihre Anwendung überprüft haben, klicken Sie schließlich auf
**Speichern und bereitstellen ** und **AWS beginnt mit der Konfiguration und Bereitstellung Ihrer Anwendung. Wenn AWS mit der Bereitstellung fertig ist, können Sie zur Amplify-Startseite navigieren und sehen, dass Ihre neu bereitgestellte Anwendung von AWS mit der Konfiguration und Bereitstellung Ihrer Anwendung beginnt. Wenn AWS mit der Bereitstellung fertig ist, können Sie zur Amplify-Homepage navigieren und Ihre neu bereitgestellte Anwendung sehen.
Passen Sie jetzt die URL mit an
**AWS Amplify-Domänenverwaltung
== Hinzufügen einer benutzerdefinierten Domäne ==
Um mit dem Hinzufügen einer benutzerdefinierten Domäne zu beginnen, navigieren Sie zur linken Seitenleiste und wählen Sie aus
**Domänenverwaltung 
**Domänenverwaltung**Einstellung.
Wählen Sie dann aus
**Domäne hinzufügen **Domäne konfigurieren **Geben Sie Ihren Domänennamen ein (wie unten gezeigt) und klicken Sie auf**Geben Sie Ihren Domänennamen ein (wie unten gezeigt) und klicken Sie auf 
Danach können Sie alle Weiterleitungen einrichten, die für Ihre Domain erforderlich sind. Im folgenden Beispiel erstelle ich beispielsweise eine Weiterleitung von httpsdan-murphy.com zu httpswww.dan-murphy.com.
Nachdem Ihre benutzerdefinierte Domäne korrekt konfiguriert wurde, stellt AWS Ihnen schließlich eine
**Validierungszertifikat Sie können dieses Zertifikat auch in der AWS Certificate Manager-Konsole anzeigen.
== Hinzufügen eines CNAME-Eintrags ==
Der letzte Schritt bei der Konfiguration Ihrer benutzerdefinierten Domäne ist das Hinzufügen eines CNAME-Eintrags. Im folgenden Beispiel verwende ich Google Domains, aber die grundlegenden Konzepte bleiben bei verschiedenen Domain-Registraren gleich.
Scrollen Sie zuerst nach unten zu
**Benutzerdefinierte Ressourceneinträge** in Google Domains. Erstellen Sie einen *CNAME *-Eintrag, der alle Unterdomänen auf die AWS Amplify-Domäne verweist: Name: Geben Sie den Namen der Unterdomäne ein. Wenn die Subdomain www.domain.com ist, geben Sie . Wenn es www app.domain.com ist, geben Sie app ein. Daten: Klicken Sie auf der Domain-Verwaltungsseite auf Aktionen und wählen Sie dann DNS-Einträge anzeigen aus. Geben Sie dann die unter DNS-Anbieter konfigurieren verfügbare AWS Amplify-Domäne ein. 
Seite **Domänenverwaltung**, wählen Sie **Aktionen **DNS-Einträge anzeigen**
Insgesamt sieht der benutzerdefinierte Ressourceneintrag wie folgt aus:
Als nächstes fügen Sie eine weitere hinzu
*CNAME*-Eintrag, der auf den AWS Certificate Manager-Validierungsserver verweist. Der validierte AWS Certificate Manager handhabt TLS für Ihre Anwendung: Name: Geben Sie die Unterdomäne des Validierungsservers ein. Wenn der DNS-Eintrag zur Überprüfung der Inhaberschaft Ihrer Domain _1234.example.com lautet, geben Sie nur _1234 ein. Daten: Geben Sie das ACM-Validierungszertifikat ein. Wenn der Validierungsserver _1234.abcdefg.acm-validations.aws. ist, geben Sie _1234.abcdefg.acm-validations.aws ein.
Alle Informationen zu Ihren Validierungszertifikaten finden Sie in der AWS Certificate Manager-Konsole. Nach dem zweiten
*CNAME* wird hinzugefügt, Ihre benutzerdefinierten Einträge sollten so aussehen: 
Zuletzt fügen wir a hinzu
**Synthetischer Datensatz** zum Einrichten einer Subdomain-Weiterleitung: Subdomain: Geben Sie die Domain-URL ein: www. 
= Abschluss =
Insgesamt haben wir in diesem Artikel gelernt, wie man React-Anwendungen strukturiert und mit AWS Amplify bereitstellt. Zuerst haben wir besprochen, wie man eine Reaktionsanwendung modularisiert
*Komponenten* *Seiten* Ordner. Dann lernten wir etwas über **AWS Amplify** und wie man damit statische und datengesteuerte Anwendungen bereitstellt. Schließlich lernten wir die Verwendung von **AWS Amplify Domain Management** und **Google Domains ** zum Anpassen der Domäne unserer Anwendung. **und und
Wenn Sie Fragen, Bedenken oder Feedback zu diesem Artikel oder meiner Portfolio-Website haben, können Sie mir gerne einen Kommentar hinterlassen oder eine E-Mail an senden
*
[email protected]*. Danke fürs Lesen!
