rincon10/arep-lab04

Tarea de Microservicios

Tarea

Para la Tarea usted debe:

1. En grupos de máximo 3.
2. Diseñe un API y cree un monolito Web en Spark que permita a los usuarios hacer posts de 140 caracteres e ir registrandolos en un stream único de posts (a la Twitter). Piense en tres entidades Usuario, hilo(stream), posts.
3. Separe el monolito en tres microservicios independientes.
4. Cree un aplicación JS para usar el servicio. Depliegue la aplicación en S3. Asegúrese que esté disponible sobre internet.
5. Pruebe la aplicación Web
6. Agregue seguridad usando JWT con el servicio cognito de AWS.
7. Despliegue el seervicio en AWS con EC2 y realice pruebas.
8. Entregue el código desarrollado en Github, un reporte de las pruebas, y un video con el experimento funcionando y bien configurado.

Explicación Front

Para ver como ejecutar el Twiter-Front-End

Clone de Twitter

Este repositorio toma como código base la implementación del repositorio Twitter-Clone realizado por el desarrollador Mert Çankaya.

Prerrequisitos

• Git - Sistema de control de versiones
• React - Framework
• Visual Studio Code - IDE

Configuracion en Cognito

• Video tutorial
• Entrar a cognito en AWS
  • Configurar todo
    • En la parte de clientes de aplicación -> quitamos el check de 'Generar clave secreta de cliente'
• Configurar un DNS

Instalacion de libreria en REACT

• npm i amazon-cognito-identity-js

Instrucciones de ejecución local

0. Desde cmd clonar el repositorio

git clone https://github.com/Rincon10/AREP-LAB04.git

1. Ubicarse en la carpeta Twiter-Front-End

cd Twiter-Front-End

2. instalamos todas las dependencias necesarias

npm install

3. Ejecucion del proyecto

npm start

Pantallas disponibles

Login

LogginPage-wrong-password

SignIn

Home

AddingATweet

TweetAdded

Explicacion Despliegue Front en S3

tutorial

Nos dirigiremos a AWS y crearemos un bucket S3

Ahora nos dirigiremos a la politica que maneja S3 y la modificaremos con la siguiente plantilla

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::[NOMBRE_BUCKET]/*"
            ]
        }
    ]
}

Ahora habilitaremos el alojamiento de sitios web estáticos, en la seccion de propiedades

Ahora procederemos a crear el build de nuestro Front End con el siguiente comando

npm run-script build

Una vez tengamos el build generado por nuestra aplicacion de react, nos dirigiremos a objetos en nuestro panel de administracion de S3

Cargaremos todos los archivos generados anteriormente como se aprecia en la siguiente imagen

Estos son las entidades fundamentales que se almacenan en Amazon S3. Puede utilizar el inventario de Amazon S3

Si todo salio correctamente, buscaremos el url de nuestro bucket en propiedades de nuestro S3

Veremos nuestra pagina desplegada en AWS

AWS URL front

http://twitterclone-arep.s3-website-us-east-1.amazonaws.com

Autor

Mert Çankaya

Modificaciones con fines educativos

• Iván Camilo.
• Leonardo Galeano. `