Wie ich meine React-Anwendung auf AWS Cloud und CloudFront bereitgestellt habe – eine vollständige Anleitung

Bereitstellen einer React-App auf AWS S3 und CloudFront: Eine Schritt-für-Schritt-Anleitung

Diese Anleitung führt Sie durch die Bereitstellung Ihrer React-Anwendung auf Amazon S3 für statisches Hosting und die Verwendung von CloudFront für die Inhaltsbereitstellung.

Schritt 1: Erste Schritte

Bevor Sie beginnen, stellen Sie sicher, dass Sie Folgendes haben:

1. Node.js und npm lokal installiert.
2. Ein AWS-Konto mit Administratorrechten.

Schritt 2: Erstellen Sie Ihre React-Anwendung

1. Öffnen Sie Ihr Terminal.
2. Erstellen Sie eine neue React-App mit Vite: npm create vite@latest <your_project_name> (ersetzen Sie <your_project_name> durch Ihren gewünschten Namen).
3. Navigieren Sie zum Projektverzeichnis: cd <your_project_name>

Schritt 3: Verifizierung und Erstellung

1. Starten Sie den Entwicklungsserver zum Testen: npm start. Greifen Sie unter http://localhost:3000 auf Ihre App zu.
2. Stoppen Sie den Entwicklungsserver (Strg C).
3. Erstellen Sie Ihre App für die Produktion: npm run build. Dadurch wird ein build/-Ordner mit optimierten Dateien erstellt.

Schritt 4: Einrichten des S3-Buckets

1. Navigieren Sie in der AWS-Managementkonsole zum S3-Dienst.
2. Erstellen Sie einen neuen Bucket und geben Sie einen eindeutigen Namen an (z. B. <your_unique_bucket_name>).
3. Wählen Sie eine Region aus und erstellen Sie den Bucket.

Schritt 5: Statisches Website-Hosting auf S3 aktivieren

1. Wählen Sie Ihren neu erstellten Bucket aus.
2. Gehen Sie zur Registerkarte „Eigenschaften“.
3. Aktivieren Sie es unter „Statisches Website-Hosting“.
4. Setzen Sie „Indexdokument“ und „Fehlerdokument“ auf index.html.
5. Änderungen speichern.

Schritt 6: Bucket-Berechtigungen konfigurieren

1. Navigieren Sie zur Registerkarte „Berechtigungen“.
2. Bearbeiten Sie die Bucket-Richtlinie. Stellen Sie sicher, dass die Richtlinie den öffentlichen Zugriff auf Ihre Website ermöglicht (berücksichtigen Sie Auswirkungen auf die Sicherheit und passen Sie sie entsprechend für Produktionsumgebungen an).
3. Speichern Sie die Richtlinie. Testen Sie Ihre Bereitstellung, indem Sie in Ihrem Browser auf die S3-Bucket-URL zugreifen.

Schritt 7: Testen der S3-Bereitstellung

Greifen Sie über die S3-URL auf Ihre bereitgestellte App zu (z. B. http://<your_unique_bucket_name>.s3-website-.amazonaws.com/).

Schritt 8: CloudFront für CDN konfigurieren

1. Navigieren Sie in der AWS-Managementkonsole zum CloudFront-Dienst.
2. Erstellen Sie eine neue Distribution. Wählen Sie „Web“ als Versandart.
3. Konfigurieren Sie die Ursprungseinstellungen und verweisen Sie auf Ihren S3-Bucket-Endpunkt.
4. Stellen Sie die Viewer-Protokollrichtlinie auf „HTTP zu HTTPS umleiten“ ein.
5. Erstellen Sie die Verteilung.

Schritt 9: Testen der CloudFront-Bereitstellung

Sobald die CloudFront-Distribution bereitgestellt ist, greifen Sie über die CloudFront-URL auf Ihre App zu.

Fazit

Sie haben Ihre React-Anwendung erfolgreich auf AWS S3 und CloudFront bereitgestellt! Ihre Anwendung wird jetzt über ein CDN bereitgestellt, was eine hohe Verfügbarkeit und optimierte Leistung für Benutzer weltweit gewährleistet. Denken Sie daran, Platzhalter-Bucket-Namen und -Regionen durch Ihre tatsächlichen Werte zu ersetzen. Priorisieren Sie bei der Bereitstellung in der Produktion stets Best Practices für die Sicherheit.

Das obige ist der detaillierte Inhalt vonWie ich meine React-Anwendung auf AWS Cloud und CloudFront bereitgestellt habe – eine vollständige Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!