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
*Jean-Baptiste Guillois, Amazon Web Services*
## Zusammenfassung
Eine Single-Page-Anwendung (SPA) ist eine Website oder Webanwendung, die den Inhalt einer angezeigten Webseite dynamisch aktualisiert, indem sie JavaScript APIs 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 eines SPA, das in React auf Amazon Simple Storage Service (Amazon S3) und Amazon geschrieben ist CloudFront. Das SPA in diesem Muster verwendet eine REST-API, die in Amazon API Gateway konfiguriert und über eine CloudFront Amazon-Distribution verfügbar gemacht wird, um das [Cross-Origin Resource Sharing (CORS)](https://docs.aws.amazon.com/AmazonS3/latest/userguide/cors.html) -Management zu vereinfachen.
## Voraussetzungen und Einschränkungen
**Voraussetzungen**
+ Ein aktiver. AWS-Konto
+ Node.js und`npm`, installiert und konfiguriert. Weitere Informationen finden Sie im Abschnitt [Downloads](https://nodejs.org/en/download/) der Dokumentation zu Node.js.
+ Yarn, installiert und konfiguriert. Weitere Informationen finden Sie in der [Yarn-Dokumentation](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable).
+ Git, installiert und konfiguriert. Weitere Informationen finden Sie in der [Git-Dokumentation](https://github.com/git-guides/install-git).
## Architektur
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-Endpunkte (REST) verfügbar zu machen. Die Anwendungsprotokolle werden mithilfe von Amazon gesammelt CloudWatch. Alle AWS API-Aufrufe 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-Abfragen werden von Amazon Route 53 bearbeitet.
## Tools
**AWS-Services**
+ [Amazon API Gateway](https://docs.aws.amazon.com/apigateway/latest/developerguide/welcome.html) unterstützt Sie bei der Erstellung, Veröffentlichung, Wartung, Überwachung und Sicherung von REST, HTTP und WebSocket APIs in jeder Größenordnung.
+ [AWS CloudFormation](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html)hilft 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](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html) beschleunigt die Verteilung Ihrer Webinhalte, indem es sie über ein weltweites Netzwerk von Rechenzentren bereitstellt, was die Latenz senkt und die Leistung verbessert.
+ [AWS CloudTrail](https://docs.aws.amazon.com/awscloudtrail/latest/userguide/cloudtrail-user-guide.html)hilft Ihnen bei der Prüfung der Unternehmensführung, der Einhaltung von Vorschriften und des betrieblichen Risikos Ihrer AWS-Konto.
+ [Amazon CloudWatch](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/WhatIsCloudWatch.html) 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)](https://docs.aws.amazon.com/IAM/latest/UserGuide/introduction.html) 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](https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/) ist ein hochverfügbarer und skalierbarer DNS-Web-Service.
+ [Amazon Simple Storage Service (Amazon S3)](https://docs.aws.amazon.com/AmazonS3/latest/userguide/) 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 einseitigen CORS-Anwendungs-Repository](https://github.com/aws-samples/react-cors-spa) verfügbar.
## Best Practices
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 (Amazon EC2) -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](https://docs.aws.amazon.com/waf/latest/developerguide/cloudfront-features.html)) anbringen, um Ihre Ressourcen vor böswilligen Angriffen zu schützen.
## Epen
### Erstellen und implementieren Sie Ihre Anwendung lokal
| Aufgabe | Description | Erforderliche 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. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | App-Entwickler, AWS DevOps |
| Lokaler Zugriff auf die Anwendung. | Öffnen Sie ein Browserfenster und geben Sie die `http://localhost:3000` URL für den Zugriff auf die Anwendung ein. | App-Entwickler, AWS DevOps |
### Bereitstellen der Anwendung
| Aufgabe | Description | Erforderliche Fähigkeiten |
| --- | --- | --- |
| Stellen Sie die AWS CloudFormation Vorlage bereit. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | App-Entwickler, AWS DevOps |
| Passen Sie Ihre Anwendungsquelldateien an. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | 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. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | App-Entwickler, AWS DevOps |
### Testen der Anwendung
| Aufgabe | Description | Erforderliche 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 |
### Säubere die Ressourcen
| Aufgabe | Description | Erforderliche Fähigkeiten |
| --- | --- | --- |
| Löschen Sie den Inhalt des S3-Buckets. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | AWS DevOps, App-Entwickler |
| Löschen Sie den CloudFormation Stack. | [See the AWS documentation website for more details](http://docs.aws.amazon.com/de_de/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | AWS DevOps, App-Entwickler |
## Zugehörige Ressourcen
Um Ihre Webanwendung bereitzustellen und zu hosten, können Sie auch [AWS Amplify Hosting](https://docs.aws.amazon.com/amplify/latest/userguide/getting-started.html) 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](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html), 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 CORS zu vereinfachen, wird die REST-API über eine CloudFront Distribution verfügbar gemacht.