En esta guía, detallaremos cómo crear un proyecto de React usando ViteJS y luego cómo alojarlo en un bucket de AWS S3. Cubriremos desde la configuración inicial hasta el despliegue del sitio.
Creación del Proyecto React con ViteJS
Para empezar, crea un nuevo proyecto React utilizando ViteJS:
npm create vite@latest react-aws-s3 -- --template react
cd react-aws-s3
npm install
npm run dev
Esto configurará un nuevo proyecto React y lo ejecutará localmente para desarrollo.
Creación de un Bucket en AWS S3
Para alojar tu proyecto, necesitarás crear un bucket en AWS S3:
- Crea un bucket de AWS S3:
- Nombre del bucket:
react-first-web - Deshabilita "Block public access" ("Bloquear todo el acceso público"), ya que necesitamos que el sitio sea accesible públicamente.
- Confirma la configuración que permite el acceso público.
- Deja el resto de parámetros por defecto y crea el bucket.
- Nombre del bucket:
Configuración de Propiedades del Bucket
Una vez creado el bucket, realiza las siguientes configuraciones:
- En 'Properties', ve a "Static website hosting" ("Alojamiento de sitios web estáticos").
- Activa "Alojamiento de sitios web estáticos".
- En "Index document" ("Documento de índice"), escribe
index.html. - Guarda los cambios.
Inicialmente, al visitar el endpoint proporcionado, recibirás un error 403 Forbidden debido a la falta de políticas de acceso.
Establecer Políticas de Acceso al Bucket
Para permitir el acceso público a los archivos, sigue estos pasos:
- En "Permisos", ve a "Políticas del Bucket" y elige editar.
- Selecciona "Agregar nueva instrucción", luego "s3:GetObject".
- Agrega un recurso con los siguientes detalles:
- Servicio: s3
- Tipo de recurso: object
- ARN:
arn:aws:s3:::react-first-web/*
- Añade la siguiente política:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "Statement1",
"Principal": "*",
"Effect": "Allow",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::react-first-web/*"
]
}
]
}
- Guarda los cambios.
Ahora, el enlace debería mostrar un error 404 Not Found, indicando que el archivo index.html aún no existe en el bucket.
Subir Archivos al Bucket de AWS S3
Para subir tu proyecto a S3, sigue estos pasos:
- Ejecuta
npm run buildpara construir tu proyecto. - Para subir los archivos, tienes dos opciones:
- Subir los archivos directamente desde la interfaz de AWS.
- Utilizar el CLI de AWS, lo cual es más recomendado.
Desplegar usando AWS CLI
Para usar AWS CLI:
- Crea un grupo y un usuario en AWS IAM con los permisos adecuados (por ejemplo,
AmazonS3FullAccessoAmazonS3ReadOnlyAccess). - Utiliza el siguiente comando para sincronizar tu carpeta de distribución con el bucket:
aws s3 sync dist/ s3://react-first-web
Para futuras actualizaciones, simplemente vuelve a ejecutar:
npm run build
aws s3 sync dist/ s3://react-first-web
Con estos pasos, habrás configurado y desplegado exitosamente tu proyecto React en AWS S3.