Erstellen einer Full-Stack-React-App mit AWS Amplify

Routenübersicht

Diese Anleitung führt Sie Schritt für Schritt durch den Prozess der App-Erstellung. Full Stack Basierend auf React mit AWS Amplify Der Gesamtprozess umfasst die Vorbereitung der Entwicklungsumgebung, die Erstellung des Frontends, das Hinzufügen des Backends mit Amplify, die Verbindung des Frontends mit Diensten, die Bereitstellung, die Verbindung der Domäne und des CDN sowie die Konfiguration von Sicherheit und Überwachung.

Voraussetzungen und Installation der Tools (lokal)

Notwendige Komponenten auf dem Entwicklungsrechner:

• Node.js (>=14) und npm oder yarn
• Git
• Amplify CLI

Beispielbefehle zur Installation der Amplify CLI:

npm install -g @aws-amplify/cli
# or
yarn global add @aws-amplify/cli

Für die Erstkonfiguration:

amplify configure

Erstellen einer React-Anwendung

Um ein React-Projekt zu starten, können Sie Create React App oder Vite verwenden. Beispiel mit Create React App:

npx create-react-app my-amplify-app
cd my-amplify-app
git init
git add .
git commit -m "initial commit"

Installation der Amplify-Bibliotheken im Projekt:

npm install aws-amplify @aws-amplify/ui-react

Hinzufügen eines Backends mit Amplify

Initialisieren Sie im Projektordner zunächst Amplify:

amplify init

Wichtige Parameter in amplify init Beinhaltet den Umgebungsnamen (z.B. Entwickler), Editor, Framework (javascript, react), Quell- und Build-Pfade sowie Build-/Startbefehle.

1) Authentifizierung (Auth)

So fügen Sie die Authentifizierung hinzu:

amplify add auth

Funktionen: Standardkonfiguration (Benutzername), manuelle Konfiguration für Social-Media-Anbieter (Google, Facebook) oder Föderation mit Cognito Identity Pool.

2) API (GraphQL oder REST)

Für GraphQL:

amplify add api

Auswahl von GraphQL und eines Beispielschemas:

type Todo @model {
  id: ID!
  title: String!
  completed: Boolean!
}

Für REST (API Gateway + Lambda):

amplify add api
# choose REST
# then add function for endpoint

3) Lambda-Funktionen

Für rechenintensive Prozesse oder Webhooks:

amplify add function

Sprache: Node.js oder Python. Typ: Lambda-Funktion (CRUD, Handler).

4) Dateispeicher (Speicher)

Um S3 zum Hochladen von Dateien hinzuzufügen:

amplify add storage

Typ: Inhalt (Bilder, Dateien).

Nachdem Sie die erforderlichen Dienste hinzugefügt haben, übernehmen Sie die Änderungen:

amplify push

Dieser Befehl erstellt Cloud-Ressourcen wie Cognito, AppSync, Lambda und S3 und speichert die Konfigurationsdatei in src/aws-exports.js Es setzt.

Verbindung von Frontend und Backend

In der Datei src/index.js Oder App.js Amplify-Konfiguration hinzufügen:

import Amplify from "aws-amplify";
import awsExports from "./aws-exports";
Amplify.configure(awsExports);

Beispiel für die Verwendung von Auth:

import { Auth } from "aws-amplify";
// Sign up
await Auth.signUp({ username, password, attributes: { email } });
// Sign in
await Auth.signIn(username, password);

Beispiel für die Verwendung von GraphQL:

import { API, graphqlOperation } from "aws-amplify";
import { listTodos } from "./graphql/queries";
const result = await API.graphql(graphqlOperation(listTodos));

Sicherheitstipps und bewährte Verfahren

Wichtige Sicherheitstipps:

• Prinzip Minimale Privilegien Beachten Sie: Erteilen Sie IAM-Rollen nur die notwendigen Berechtigungen.
• Verwendung von AWS Secrets Manager Oder Systemmanager-Parameterspeicher Um Geheimnisse zu bewahren.
• Aktivieren Sie die Multi-Faktor-Authentifizierung für IAM-Benutzer mit sensiblen Zugriffsrechten.
• Aktivieren Sie HTTPS und HSTS und verwenden Sie WAF und Ratenbegrenzung, um sich vor Layer-7-Angriffen zu schützen.
• Verschlüsselung ruhender und übertragener Daten für Dienste.
• CORS-Beschränkungen und Implementierung der Content Security Policy in einer React-App.

Bereitstellung und CI/CD

Es gibt zwei Hauptmethoden für die Bereitstellung:

Methode 1: Amplify Console

Am einfachsten geht es so: Erstellen Sie eine neue App in der Amplify Console und verbinden Sie Ihr GitHub-/GitLab-/Bitbucket-Repository. Amplify erstellt dann automatisch eine Pipeline für Build, Test und Deployment.

Beispieldatei amplify.yml Für das CRA-Projekt:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Im Abschnitt „Build-Einstellungen“ können Sie Umgebungsvariablen und Geheimnisse festlegen.

Methode 2: Externe CI/CD + Amplify Hosting API

Sie können mit GitLab CI/CD oder GitHub Actions erstellen und die Build-Datei an S3 + CloudFront übertragen oder die Amplify Hosting API verwenden.

Domain- und CDN-Verbindung

Amplify Console ermöglicht die Domänenverbindung und die automatische SSL-Konfiguration über AWS Certificate Manager Das hat es.

Für DNS können Sie Folgendes verwenden: Route 53 Alternativ können Sie externe Dienste mit Anycast CDN und mehreren Edge-Standorten nutzen. Der Einsatz eines CDN (CloudFront oder externes CDN) ist unerlässlich, um die Latenz zu reduzieren und die Ladegeschwindigkeit zu erhöhen.

Stabilität, Latenz und Standortwahl

Um die API-Latenz zu reduzieren, wählen Sie die geeignete Region und verwenden Sie GPU-Server oder dedizierte Server mit Anbindung als nicht-serverloses Backend, wenn eine intensive Verarbeitung erforderlich ist.

Für Händler und Gamer eignen sich Standorte wie London, Frankfurt und New York in der Regel gut, um die Latenz zu reduzieren. In sensiblen Fällen empfiehlt sich außerdem der Einsatz eines Anti-DDoS-Servers.

Beispiel: Nutzung der GPU-Cloud für die serverseitige Verarbeitung

Wenn Ihre App die Inferenz von ML-Modellen erfordert:

• Für ressourcenschonende Modelle verwenden Sie Lambda, für rechenintensive Modelle einen Dienst auf einem GPU-Server.
• Erstellen Sie einen sicheren Endpunkt (HTTPS) und rufen Sie ihn von React aus mit fetch oder axios auf.
• Wenn Sie Echtzeit benötigen, verwenden Sie WebSocket.

Überwachung, Protokollierung und Fehlerbehebung

Empfohlene Werkzeuge:

• CloudWatch-Metriken und -Alarme für Lambda, API Gateway und AppSync.
• Aktivieren Sie AWS X-Ray für die Anforderungsverfolgung.
• Überprüfen Sie die S3- und CloudFront-Protokolle.
• Integration mit Drittanbieterdiensten wie Sentry für das Frontend-Debugging.

Kostenoptimierung

Empfehlungen zur Kostenreduzierung:

• Nutzen Sie serverlose Ressourcen (Lambda, AppSync), um Leerlaufkosten zu reduzieren.
• Für kontinuierliche Lasten sollten Cloud-Server oder VPS mit entsprechender Konfiguration verwendet werden.
• Aktivieren Sie die automatische Skalierung und nutzen Sie reservierte Instanzen oder Sparpläne, um die langfristigen Kosten zu senken.
• Nutzen Sie CDN und Caching, um die Anfragen an das Backend zu reduzieren.

Praktische Tipps für DevOps-Teams und Netzwerkadministratoren

Strategien:

• Infrastruktur als Code: Verwenden Sie CloudFormation, Terraform oder Amplifys Backend-Konfiguration für die Infrastrukturversionierung.
• Wenn Sie eine private Verbindung benötigen, richten Sie Lambda-Funktionen mit einer VPC ein und verwenden Sie ein Transit Gateway oder ein VPN.
• Feinabstimmung der ACL- und Sicherheitsgruppenkonfiguration.
• Falls Sie GitLab-Hosting oder die volle Kontrolle über Runner benötigen, ist es möglich, GitLab auf dedizierten Diensten zu hosten.

Checkliste vor Produktionsbeginn

• Getestete Authentifizierung und Autorisierung (Cognito, IAM-Richtlinien)
• HTTPS und SSL-Zertifikat aktiviert
• Aktive Protokollierung und Überwachung
• Ratenbegrenzung und WAF konfiguriert
• CORS und CSP sind auf dem Frontend konfiguriert.
• Backup- und Wiederherstellungsstrategie (S3-Versionierung, Snapshots)
• Lasttests und Leistungsoptimierung

Schlussfolgerung und Zusammenfassung

Verwendung von AWS Amplify Ermöglicht die schnelle und wiederholbare Entwicklung und Bereitstellung moderner Anwendungen. In Produktionsumgebungen ist besonderes Augenmerk auf Sicherheit, Überwachung, Standortwahl und Kostenmodell zu legen.

Für Projekte, die eine intensive Datenverarbeitung oder geringe Latenz erfordern, kann die Kombination von Amplify mit Cloud-Servern, GPU Cloud oder dedizierten VPS eine optimale Lösung sein.

Häufig gestellte Fragen