photo sharing website

Foto-Sharing-Website

Statische vorgefertigte Foto-Sharing-Website, um Ihre Bilder öffentlich zu teilen, ohne Server auszuführen oder zu warten.

Konzept

• Eine statische Website - öffentlich zugängliche Web -App,
• Eine Administrator -Webanwendung - Passwort geschützte Webanwendung (React.JS -Webanwendung), mit der die statische Website auf Demand generiert wird.

Das folgende YouTube -Video zeigt, wie alles funktioniert:

Architektur

1. CloudFront -Verteilung mit / Pfad im S3 -Eimer als Ursprung
2. Cloudfront -Verteilung mit /website -Pfad im S3 -Bucket als Ursprung (der statische Website statische Quellcode)
3. S3 Bucket, der alle statischen Ressourcen enthält (HTML, CSS, JavaScript und Bilder)
4. S3 -Eimer mit den ersten hochgeladenen Bildern
5. AWS Lambda generiert den HTML -Quellcode der statischen Website
6. AWS Lambda wurde verwendet, um Miniaturansichten zu generieren und relevante Etiketten für hochgeladene Fotos mit Amazon Rekognition zu erkennen
7. Amazon Cognito zur Bereitstellung einer Authentifizierung für den Administratorbenutzer

Einsatz

Voraussetzungen

• Erstellen Sie ein AWS -Konto
• Installieren Sie die Amplify CLI
• Installieren Sie NPM

Anweisungen

1. Klonen Sie das Repository klonen

 git clone https://github.com/cornelcroi/photo-sharing-website.git

2. Vorläufige Operationen

• Administrator -Benutzer -E -Mail

  • Ersetzen Sie [email protected] durch Ihre eigene E -Mail -Adresse in amplify/backend/boostrap/adminuser/parameters.json

• Bildänderung

  • Die Anwendung ändert sich mit den Bildern mit der sharp Bibliothek als Lambda -Ebene, die verpackt ist.
  • Erstellen Sie eine scharfe Schicht. Befolgen Sie dieses Tutorial, um eine scharfe Ebene in Ihrem gewünschten Bereich zu erstellen, und aktualisieren Sie das Layer ARN in amplify/backend/function/S3TriggeraXXXX/S3TriggeraXXXX-cloudformation-template.json .

3. Installiert die Abhängigkeiten

 npm install

4. Stellen Sie den Stapel auf Ihrem AWS -Konto ein

• Initialisieren Sie Ihre Amplify -Cloud -Anwendung

   amplify init
  

• Bestimmungen Cloud -Ressourcen mit den lokalen Entwicklungen laufen

   amplify push
  

• Veröffentlichen Sie statische Vermögenswerte an Amazon S3

   amplify publish
  

Genießen !

Euen Möglicherweise müssen Sie ein paar Stunden nach dem ersten Einsatz warten, damit der DNS -Name des S3 -Eimers propagiert wird! (Wenn Sie sich nach der Erschöpfung mit dem per E -Mail empfangenen temporären Passwort nicht anmelden können, müssen Sie nur noch einmal versuchen, es ist nichts Falsches mit dem Code.)

Schlüsselpunkte

• AWS Lambda generiert die statischen Dateien mithilfe von HTML -Vorlagen und Daten, die in DynamoDB gespeichert sind.
• React.JS -Anwendung, die mit AWS -Verstärkung erstellt wurde,
• Bei der ersten Bereitstellung wird ein einzelner Administratorbenutzer erstellt.
• Die statische Website (mit HTML -Vorlagendateien) wird von einem AWS Lambda auf Anfrage generiert.
• 4 HTML -Dateien werden verwendet, um die statische Website zu generieren.

  /albums-gallery-template.html                                       <-- template for an album gallery page
  /albums-template.html                                               <-- template for list of albums page
  /album-item-template.html                                           <-- template for one album used in list of albums page
  /photo-item-template.html                                           <-- template for one photo used on album gallery page

• Jede HTML -Vorlage enthält Variablen, die durch Lambda ersetzt werden sollen

  < div >
    < h2 > {ALBUM_NAME} </ h2 >
    < div > {ALBUM_PHOTOS} photos · {ALBUM_DATE} </ div >
  </ div > 

Vorteile einer vorgespannten statischen Website

• Vorgefertigter statischer HTML von statischen Stellen lädt viel schneller als die Seiten auf einer dynamischen Stelle. Schnelle Websites sind wirklich wichtig für eine gute Benutzererfahrung und auch für die Steigerung Ihrer Website in Suchmaschinenrankings.
• Statische Site -Generatoren reduzieren die Komplexität der Standort. Dies verbessert wiederum Geschwindigkeit und Zuverlässigkeit und glättet die Entwicklererfahrung.
• Sie müssen sich keine Sorgen um Datenbankverkehrsspikes machen.
• Sie können Ihre Website mit einem Inhaltsdeliefer -Netzwerk hosten, das mit dem Verkehr Ihrer Website skaliert wird.
• niedrigere Kosten,
• bessere SEO,
• Gutes Zwischenspeichern.

Ich habe dieses Repository verwendet, um meine eigene Website ManBehindlens.com zu erstellen.

Werkzeuge

• AWS Amplifizieren Sie die JavaScript -Bibliothek, um unser Front -End mit Cloud -Ressourcen zu verbinden

• Amazon Cognito zur Behandlung von Admin -Anmeldeberechtigung

• Amazon Simple Storage Service (S3), um so viele Fotos zu speichern und zu servieren, wie ich hochladen möchte, um die React.js -App -Assets für unsere App zu hosten und die statische Website zu hosten

• Amazon Cloudfront, um so viele Fotos zu speichern und zu servieren, wie unsere Benutzer hochladen möchten, und die statischen Assets für unsere App zu hosten

• Amazon DynamoDB zur Bereitstellung von API -Abfragen für Album- und Fotodaten für Millisekunden -Reaktionszeiten zur Verfügung stellen

• AWS AppSync, um eine GraphQL -API für unser Front -End zu hosten

• AWS Lambda zum Erstellen von Photo Thumbnails asynchron in der Cloud und zum Generieren der statischen Website auf Bedarf

• Amazon Rekognition zum Erkennen von 5 Labels für jedes hochgeladene Foto

Kosten

Weniger als eine Tasse Kaffee pro Monat

Credits

• Multiverse -HTML -Vorlage
• Lens HTML -Vorlage
• Erstellen Sie eine Foto-Sharing-Web-App mit AWS Amplify Workshop
• Erstellen Sie eine scharfe Schicht für AWS Lambda
• AWS -Schicht für scharfe