photo sharing website

Sitio web de compartir fotos

Sitio web estático pre-renderizado para compartir públicamente sus imágenes sin necesidad de ejecutar o mantener servidores.

Concepto

• Un sitio web estático: aplicación web de acceso público,
• Una aplicación web administradora: aplicación web protegida con contraseña (aplicación web react.js) utilizada para generar el sitio web estático bajo demanda.

El siguiente video de YouTube muestra cómo funciona todo:

Arquitectura

1. Distribución de Cloudfront con / ruta en el cubo S3 como origen
2. CloudFront Distribution with /website Rath en el cubo S3 como origen (el código fuente estática estática) Código fuente estático)
3. S3 Bucket que contiene todos los recursos estáticos (HTML, CSS, JavaScript e Imágenes)
4. Cubo S3 con las imágenes subidas iniciales
5. AWS Lambda utilizado para generar el código fuente HTML del sitio web estático
6. AWS Lambda solía generar miniaturas y detectar etiquetas relevantes para fotos cargadas usando Amazon Rekognition
7. Amazon Cognito para proporcionar una autenticación para el usuario administrativo

Despliegue

Requisitos previos

• Crear una cuenta de AWS
• Instale la cli de Amplify
• Instalar npm

Instrucciones

1. Clonar el repositorio

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

2. Operaciones preliminares

• Correo electrónico de usuario administrativo

  • Reemplace [email protected] con su propia dirección de correo electrónico en amplify/backend/boostrap/adminuser/parameters.json

• Cambiar el tamaño de la imagen

  • La aplicación cambia de tamaño de imágenes utilizando la biblioteca sharp empaquetada como capa Lambda,
  • Crea una capa afilada. Siga este tutorial para crear una capa nítida en su región deseada y luego actualice la capa ARN en amplify/backend/function/S3TriggeraXXXX/S3TriggeraXXXX-cloudformation-template.json .

3. Instala las dependencias

 npm install

4. Implemente la pila en su cuenta de AWS

• Inicialice su aplicación de nube alimentada con amplificación

   amplify init
  

• Provisiones recursos en la nube con los desarrollos locales ejecutados

   amplify push
  

• Publicar activos estáticos en Amazon S3

   amplify publish
  

Disfrutar !

️ ¡Es posible que deba esperar un par de horas después del primer despliegue para que se propague el nombre DNS del cubo S3! (Si no puede iniciar sesión después del despliegue utilizando la contraseña temporal recibida por correo electrónico, esto debe ser, solo espere antes de intentarlo nuevamente, no hay nada de malo en el código)

Puntos clave

• AWS Lambda genera los archivos estáticos utilizando plantillas HTML y datos almacenados en DynamoDB,
• Aplicación react.js construida usando AWS Amplify,
• Hay un solo usuario de administrador creado en la primera implementación,
• El sitio web estático (con archivos de plantilla HTML) es generado a pedido por un AWS Lambda,
• Se utilizan 4 archivos HTML para generar el sitio web estático,

  /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

• Cada plantilla HTML contiene variables que serán reemplazadas por Lambda como la pieza de código a continuación

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

Ventajas del sitio web estático pre-renderizado

• HTML estático pre-renderizado de sitios estáticos se carga mucho más rápido que las páginas en un sitio dinámico. Los sitios web rápidos son realmente importantes para una buena experiencia de usuario, y también para aumentar su sitio en la clasificación de motores de búsqueda,
• Los generadores de sitios estáticos reducen la complejidad del sitio. Eso, a su vez, mejora la velocidad y la confiabilidad, y suaviza la experiencia del desarrollador,
• No tiene que preocuparse por los picos de tráfico de la base de datos,
• Puede alojar su sitio con una red de entrega de contenido que escala con el tráfico de su sitio,
• menores costos,
• mejor SEO,
• Buen almacenamiento en caché.

Utilicé este repositorio para crear mi propio sitio web Manbehindlens.com.

Herramientas

• AWS Amplify JavaScript Library para conectar nuestro front -end a recursos en la nube

• Amazon Cognito para manejar la autorización de registro de administración

• Amazon Simple Storage Service (S3) para almacenar y servir tantas fotos como deseo cargar, para alojar los activos de la aplicación React.js para nuestra aplicación y alojar el sitio web generado estático

• Amazon CloudFront para almacenar y servir tantas fotos como nuestros usuarios les importa cargar, y alojar los activos estáticos para nuestra aplicación

• Amazon DynamoDB proporcionará tiempos de respuesta de milisegundos a las consultas de API para los datos de álbumes y fotos

• AWS AppSync alojará una API GraphQL para nuestra parte delantera

• AWS Lambda para crear miniaturas fotográficas de manera asincrónica en la nube y generar el sitio web estático bajo demanda

• Amazon Rekognition para detectar 5 etiquetas para cada foto cargada

Costo

Menos de una taza de café por mes

Créditos

• Plantilla HTML multiverso
• Plantilla HTML
• Cree una aplicación web para compartir fotos con AWS Amplify Workshop
• Crea una capa aguda para AWS Lambda
• Capa de AWS para agudos