Stellen Sie eine React-basierte Einzelseitenanwendung auf Amazon S3 bereit und CloudFront - AWS Prescriptive Guidance
ÜbersichtVoraussetzungen und EinschränkungenArchitekturToolsBewährte MethodenEpenZugehörige RessourcenZusätzliche Informationen

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Stellen Sie eine React-basierte Einzelseitenanwendung auf Amazon S3 bereit und CloudFront

Erstellt von Jean-Baptiste Guillois () AWS

Code-Repository: React-basierte einseitige Anwendung CORS

Umgebung: Produktion

Technologien: Web- und mobile Apps; Serverlos

Arbeitslast: Alle anderen Workloads

AWSDienste: Amazon API Gateway; Amazon CloudFront

Übersicht

Eine einseitige Anwendung (SPA) ist eine Website oder Webanwendung, die den Inhalt einer angezeigten Webseite dynamisch aktualisiert, indem JavaScript APIs sie Dieser Ansatz verbessert die Benutzererfahrung und Leistung einer Website, da nur neue Daten aktualisiert werden, anstatt die gesamte Webseite vom Server neu zu laden.

Dieses Muster bietet einen step-by-step Ansatz zum Codieren und Hosten einerSPA, die in React auf Amazon Simple Storage Service (Amazon S3) und Amazon geschrieben ist CloudFront. Das SPA in diesem Muster verwendete eine RESTAPI, die in Amazon API Gateway konfiguriert und über eine CloudFront Amazon-Distribution verfügbar gemacht wurde, um die Verwaltung der ursprungsübergreifenden Ressourcenfreigabe (CORS) zu vereinfachen.

Voraussetzungen und Einschränkungen

Voraussetzungen

  • Ein aktiver AWS-Konto.

  • Node.js undnpm, installiert und konfiguriert. Weitere Informationen finden Sie im Abschnitt Downloads der Dokumentation zu Node.js.

  • Yarn, installiert und konfiguriert. Weitere Informationen finden Sie in der Yarn-Dokumentation.

  • Git, installiert und konfiguriert. Weitere Informationen finden Sie in der Git-Dokumentation.

Architektur

Architektur für die Bereitstellung eines React-basierten SPA auf Amazon S3 und CloudFront

Diese Architektur wird automatisch mithilfe von AWS CloudFormation (Infrastruktur als Code) bereitgestellt. Es verwendet regionale Dienste wie Amazon S3 zum Speichern der statischen Ressourcen und Amazon CloudFront mit Amazon API Gateway, um regionale API (REST) Endpunkte verfügbar zu machen. Die Anwendungsprotokolle werden mithilfe von Amazon gesammelt CloudWatch. Alle AWS API Anrufe werden geprüft. AWS CloudTrail Die gesamte Sicherheitskonfiguration (z. B. Identitäten und Berechtigungen) wird in AWS Identity and Access Management (IAM) verwaltet. Statische Inhalte werden über das Amazon CloudFront Content Delivery Network (CDN) bereitgestellt, und DNS Anfragen werden von Amazon Route 53 bearbeitet.

Tools

AWSDienstleistungen

  • Amazon API Gateway unterstützt Sie bei der Erstellung, Veröffentlichung, Wartung, Überwachung und Sicherung REST — HTTP und das WebSocket APIs in jeder Größenordnung.

  • AWS CloudFormationhilft Ihnen dabei, AWS Ressourcen einzurichten, sie schnell und konsistent bereitzustellen und sie während ihres gesamten Lebenszyklus regionsübergreifend AWS-Konten zu verwalten.

  • Amazon CloudFront beschleunigt die Verteilung Ihrer Webinhalte, indem es sie über ein weltweites Netzwerk von Rechenzentren bereitstellt, was die Latenz senkt und die Leistung verbessert.

  • AWS CloudTrailhilft Ihnen bei der Prüfung der Unternehmensführung, der Einhaltung von Vorschriften und des betrieblichen Risikos Ihrer AWS-Konto.

  • Amazon CloudWatch hilft Ihnen dabei, die Kennzahlen Ihrer AWS Ressourcen und der Anwendungen, auf denen Sie laufen, AWS in Echtzeit zu überwachen.

  • AWS Identity and Access Management (IAM) hilft Ihnen dabei, den Zugriff auf Ihre AWS Ressourcen sicher zu verwalten, indem kontrolliert wird, wer authentifiziert und autorisiert ist, diese zu verwenden.

  • Amazon Route 53 ist ein hochverfügbarer und skalierbarer DNS Webservice.

  • Amazon Simple Storage Service (Amazon S3) ist ein cloudbasierter Objektspeicherservice, der Sie beim Speichern, Schützen und Abrufen beliebiger Datenmengen unterstützt.

Code

Der Beispielanwendungscode dieses Musters ist im GitHub React-basierten CORS einseitigen Anwendungs-Repository verfügbar.

Bewährte Methoden

Mithilfe des Amazon S3 S3-Objektspeichers können Sie die statischen Ressourcen Ihrer Anwendung auf sichere, hochbelastbare, leistungsstarke und kostengünstige Weise speichern. Für diese Aufgabe ist es nicht erforderlich, einen dedizierten Container oder eine Amazon Elastic Compute Cloud (AmazonEC2) -Instance zu verwenden.

Durch die Nutzung des Amazon CloudFront Content Delivery Network können Sie die Latenz reduzieren, die Ihren Benutzern beim Zugriff auf Ihre Anwendung entstehen kann. Sie können auch eine Firewall für Webanwendungen (AWS WAF) anbringen, um Ihre Ressourcen vor böswilligen Angriffen zu schützen.

Epen

AufgabeBeschreibungErforderliche Fähigkeiten

Klonen Sie das Repository

Führen Sie den folgenden Befehl aus, um das Repository der Beispielanwendung zu klonen:

git clone https://github.com/aws-samples/react-cors-spa react-cors-spa && cd react-cors-spa
App-Entwickler, AWS DevOps

Stellen Sie die Anwendung lokal bereit.

  1. Führen Sie im Projektverzeichnis den npm install Befehl aus, um die Anwendungsabhängigkeiten zu initiieren. 

  2. Führen Sie den yarn dev Befehl aus, um die Anwendung lokal zu starten. 

App-Entwickler, AWS DevOps

Lokal auf die Anwendung zugreifen.

Öffnen Sie ein Browserfenster und geben Sie den ein http://localhost:3000URL, um auf die Anwendung zuzugreifen.

App-Entwickler, AWS DevOps
AufgabeBeschreibungErforderliche Fähigkeiten

Stellen Sie die AWS CloudFormation Vorlage bereit.

  1. Melden Sie sich bei der an AWS Management Console, und öffnen Sie dann die AWS CloudFormation Konsole.

  2. Wählen Sie Stack erstellen und anschließend Mit neuen Ressourcen (Standard) aus.

  3. Wählen Sie Upload a template file (Vorlagendatei hochladen).

  4. Wählen Sie „Datei auswählen“, wählen Sie die react-cors-spa-stack.yaml Datei aus dem geklonten Repository aus und klicken Sie dann auf „Weiter“.

  5. Geben Sie einen Namen für Ihren Stack ein und wählen Sie dann Weiter.

  6. Behalten Sie alle Standardoptionen bei und wählen Sie dann Weiter.

  7. Überprüfen Sie die endgültigen Einstellungen für Ihren Stapel und wählen Sie dann Stapel erstellen aus.

App-Entwickler, AWS DevOps

Passen Sie Ihre Anwendungsquelldateien an.

  1. Öffnen Sie nach der Bereitstellung Ihres Stacks die Registerkarte Ausgabe und identifizieren Sie den Bucket Namen und den APIDomain Wert.

  2. Kopieren Sie die CloudFront Distributionsdomäne für RESTAPI.

  3. Navigieren Sie zu <project_root>/src/pages/index.tsx und fügen Sie diese Domäne dann in den APIEndPoint Variablenwert in Zeile 13 der index.tsx Datei ein oder fügen Sie sie ein.

App-Developer

Erstellen Sie das Anwendungspaket.

Führen Sie in Ihrem Projektverzeichnis den yarn build Befehl aus, um das Anwendungspaket zu erstellen.

App-Developer

Stellen Sie das Anwendungspaket bereit.

  1. Öffnen Sie die Amazon S3-Konsole.

  2. Identifizieren und wählen Sie den S3-Bucket aus, der zuvor vom CloudFormation Stack erstellt wurde.

  3. Wählen Sie Upload und anschließend Dateien hinzufügen aus.

  4. Wählen Sie den Inhalt Ihres out Ordners aus.

  5. Wählen Sie Ordner hinzufügen und wählen Sie dann das _next Verzeichnis aus.

    Wichtig: Wählen Sie das _next Verzeichnis, nicht den Inhalt.

  6. Wählen Sie Upload, um die Dateien und das Verzeichnis in Ihren S3-Bucket hochzuladen.

App-Entwickler, AWS DevOps
AufgabeBeschreibungErforderliche Fähigkeiten

Greifen Sie auf die Anwendung zu und testen Sie sie.

Öffnen Sie ein Browserfenster und fügen Sie dann die CloudFront Verteilungsdomäne (die SPADomain Ausgabe des CloudFormation Stacks, den Sie zuvor bereitgestellt haben) ein, um auf die Anwendung zuzugreifen.

App-Entwickler, AWS DevOps
AufgabeBeschreibungErforderliche Fähigkeiten

Löschen Sie den Inhalt des S3-Buckets.

  1. Öffnen Sie die Amazon S3 S3-Konsole und wählen Sie den Bucket aus, der zuvor vom Stack erstellt wurde (der erste Bucket, dessen Name mit beginntreact-cors-spa-). 

  2. Wählen Sie Leer, um den Inhalt des Buckets zu löschen.

  3. Wählen Sie den zweiten Bucket aus, der zuvor vom Stack erstellt wurde (den zweiten Bucket, dessen Name mit beginnt react-cors-spa- und endet mit-logs).

  4. Wählen Sie Leer, um den Inhalt des Buckets zu löschen.

AWS DevOps, App-Entwickler

Lösche den AWS CloudFormation Stapel.

  1. Öffnen Sie die AWS CloudFormation Konsole und wählen Sie den Stack aus, den Sie zuvor erstellt haben.

  2. Wählen Sie Löschen, um den Stack und alle zugehörigen Ressourcen zu löschen.

AWS DevOps, App-Entwickler

Zugehörige Ressourcen

Um Ihre Webanwendung bereitzustellen und zu hosten, können Sie auch AWS Amplify Hosting verwenden, das einen Git-basierten Workflow für das Hosten serverloser Full-Stack-Web-Apps mit kontinuierlicher Bereitstellung bietet. Amplify Hosting ist Teil von AWS Amplify, das eine Reihe von speziell entwickelten Tools und Funktionen bietet, mit denen Frontend-Web- und Mobilentwickler schnell und einfach Full-Stack-Anwendungen erstellen können. AWS

Zusätzliche Informationen

Um ungültige Anfragen URLs des Benutzers zu behandeln, die zu 403-Fehlern führen könnten, fängt eine benutzerdefinierte Fehlerseite, die in der CloudFront Distribution konfiguriert ist, 403-Fehler ab und leitet sie an den Einstiegspunkt der Anwendung weiter (). index.html

Um die Verwaltung von zu vereinfachenCORS, REST API wird der über eine CloudFront Verteilung verfügbar gemacht.