Esta es una simple aplicación de React.js creada a partir de vite [https://vitejs.dev/guide/]. Que pretende listar un arreglo de tweets (idealement consumiendo el API rest publicado previamente vía API Gateway).
La aplicación está desplegada en 3 instancias de EC2, aprovisionadas a través de CloudFormation
La plantilla utilizada para crear el stack es como sigue:
AWSTemplateFormatVersion: '2010-09-09'
Parameters:
KeyName:
Type: String
Description: Name of an existing EC2 KeyPair for SSH access
ConstraintDescription: must be the name of an existing EC2 KeyPair
Default: MyKeyPair
GitHubRepository:
Type: String
Description: GitHub repository URL for the React.js application
Default: https://github.com/Konstrictorman/twitterFrontend
Resources:
EC2Instance1:
Type: AWS::EC2::Instance
Properties:
ImageId: ami-05c13eab67c5d8861
InstanceType: t2.micro
KeyName: !Ref KeyName
SecurityGroups:
- !Ref MySecurityGroup
Tags:
- Key: Name
Value: EC2Instance1
EC2Instance2:
Type: AWS::EC2::Instance
Properties:
ImageId: ami-05c13eab67c5d8861
InstanceType: t2.micro
KeyName: !Ref KeyName
SecurityGroups:
- !Ref MySecurityGroup
Tags:
- Key: Name
Value: EC2Instance2
EC2Instance3:
Type: AWS::EC2::Instance
Properties:
ImageId: ami-05c13eab67c5d8861
InstanceType: t2.micro
KeyName: !Ref KeyName
SecurityGroups:
- !Ref MySecurityGroup
Tags:
- Key: Name
Value: EC2Instance3
MySecurityGroup:
Type: AWS::EC2::SecurityGroup
Properties:
GroupDescription: Allow SSH and React App
SecurityGroupIngress:
- CidrIp: 0.0.0.0/0
FromPort: 22
ToPort: 22
- CidrIp: 0.0.0.0/0
FromPort: 3000
ToPort: 3000
Outputs:
WebsiteURL:
Value: !Sub 'http://${EC2Instance1.PublicDnsName}:3000'
Description: URL for accessing the React.js application
Vale la pena resaltar los siguientes aspectos de la plantilla yaml:
- La ruta al repositorio donde está la aplicación react a desplegar está definida como el parámetro (GitHubRepository)
- Cada instancia EC2 corre una imagen de Amazon Linux, identificada por id: ami-05c13eab67c5d8861 []
- Cada instancia EC2 se instala con git, npm y nodejs
- Se crea un grupo de seguridad con permiso de acceso a través del puerto 22 (Necesario para la comunicación vía SSH) y otro permiso para el puerto 3000, por donde responderá la aplicación de React
Al final de la creación del stack, al que se ha llamado "react-app-stack"
Con las 3 instancias de EC2 creadas y un security group
Detalles de una instancia
Las propias instancias de EC2 nos dicen como conectarnos a través de SSH como lo sugiere la siguiente imagen
Como resultado de correr el comando se obtiene:
Habiendo clonado el repositorio deben correrse los siguientes comandos en la terminal para terminar de instalar las dependencias de la aplicación
cd twitterFrontend/
npm install
Posteriormente se debe generar un build productivo con el comando:
npm run build
Como resultado de esta operación se genera una carpeta llamada "dist"
Finalmente se debe instalar un servidor web y ejecutarlo para que disponibilice el contenido de la recién creada carpeta "dist"
sudo npm install -g serve
serve -n -s dist
Obteniendo:
Para finalmente acceder a la aplicación https://54.235.2.216:3000/
