photo sharing website

Site Web de partage de photos

Site Web de partage de photos pré-rendu statique pour partager publiquement vos photos sans avoir besoin d'exécuter ou de maintien des serveurs.

Concept

• Un site Web statique - application Web accessible au public,
• Une application Web d'administration - application Web protégé par mot de passe (application Web React.js) utilisée pour générer le site Web statique à la demande.

La vidéo YouTube ci-dessous montre comment tout fonctionne:

Architecture

1. Distribution de cloudfront avec / chemin dans le seau S3 comme origine
2. Distribution de cloudfront avec le chemin /website dans le seau S3 comme origine (le code source statique du site Web statique)
3. Seau S3 qui contient toutes les ressources statiques (HTML, CSS, JavaScript et images)
4. Seau S3 avec les photos initiales téléchargées
5. AWS Lambda a utilisé pour générer le code source HTML du site Web statique
6. AWS Lambda a l'habitude de générer des miniatures et de détecter les étiquettes pertinentes pour les photos téléchargées à l'aide d'Amazon Rekognition
7. Amazon Cognito pour fournir une authentification à l'utilisateur de l'administrateur

Déploiement

Condition préalable

• Créer un compte AWS
• Installer l'amplify CLI
• Installer NPM

Instructions

1. Clone le référentiel

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

2. Opérations préliminaires

• E-mail de l'utilisateur de l'administrateur

  • Remplacez [email protected] par votre propre adresse e-mail dans amplify/backend/boostrap/adminuser/parameters.json

• Redimensionnement de l'image

  • L'application redimensionne les images à l'aide de la bibliothèque sharp emballée sous forme de couche Lambda,
  • Créez une couche tranchante. Suivez ce didacticiel pour créer une couche nette dans la région souhaitée, puis mettez à jour le calque ARN dans amplify/backend/function/S3TriggeraXXXX/S3TriggeraXXXX-cloudformation-template.json .

3. Installe les dépendances

 npm install

4. Déployez la pile sur votre compte AWS

• Initialisez votre application Cloud Amplify Powered

   amplify init
  

• Dispositions Les ressources cloud avec les développements locaux s'exécutent

   amplify push
  

• Publier des actifs statiques à Amazon S3

   amplify publish
  

Apprécier !

️ Vous devrez peut-être attendre quelques heures après le premier déploiement afin que le nom DNS du seau S3 soit propagé! (Si vous ne pouvez pas vous connecter après le dépourvu en utilisant le mot de passe temporaire reçu par e-mail, cela doit être ça, attendez avant de réessayer, il n'y a rien de mal avec le code)

Points clés

• AWS Lambda génère les fichiers statiques à l'aide de modèles HTML et de données stockées dans DynamoDB,
• Application react.js construite à l'aide d'AWS Amplify,
• un seul utilisateur d'administration est créé au premier déploiement,
• Le site Web statique (avec des fichiers de modèle HTML) est généré à la demande par un Lambda AWS,
• 4 fichiers HTML sont utilisés pour générer le site Web statique,

  /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

• Chaque modèle HTML contient des variables à remplacer par Lambda comme le morceau de code ci-dessous

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

Avantages du site Web statique pré-rendu

• Le HTML statique pré-rendu de sites statiques se charge beaucoup plus rapidement que les pages d'un site dynamique. Les sites Web rapides sont vraiment importants pour une bonne expérience utilisateur, ainsi que pour augmenter votre site dans le classement des moteurs de recherche,
• Les générateurs de sites statiques réduisent la complexité du site. Cela, à son tour, améliore la vitesse et la fiabilité et lisse l'expérience du développeur,
• Vous n'avez pas à vous soucier des pointes de trafic de la base de données,
• Vous pouvez héberger votre site avec un réseau de livraison de contenu qui évolue avec le trafic de votre site,
• réduire les coûts,
• meilleur référencement,
• Bonne mise en cache.

J'ai utilisé ce référentiel pour créer mon propre site Web manbehindlens.com.

Outils

• AWS Amplifiez la bibliothèque JavaScript pour connecter notre frontal aux ressources cloud

• Amazon Cognito pour gérer l'autorisation de l'inscription administrative

• Amazon Simple Storage Service (S3) pour stocker et servir autant de photos que je souhaite télécharger, pour héberger les actifs de l'APP React.js pour notre application et héberger le site Web généré statique

• Amazon CloudFront pour stocker et servir autant de photos que nos utilisateurs tiennent à télécharger et à héberger les actifs statiques pour notre application

• Amazon DynamoDB pour fournir des temps de réponse en millisecondes aux requêtes API pour les données d'album et de photo

• AWS Appsync pour héberger une API GraphQL pour notre frontal

• AWS Lambda pour créer des miniatures photo de manière asynchrone dans le cloud et générer le site Web statique à la demande

• Amazon Rekognition pour détecter 5 étiquettes pour chaque photo téléchargée

Frais

Moins d'une tasse de café par mois

Crédits

• Modèle HTML Multiverse
• Modèle HTML d'objectif
• Créez une application Web de partage de photos avec AWS Amplify Workshop
• Créer une couche tranchante pour AWS Lambda
• Couche AWS pour Sharp