Despliegue de React en AWS S3

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:

1. 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.

Configuración de Propiedades del Bucket

Una vez creado el bucket, realiza las siguientes configuraciones:

1. En 'Properties', ve a "Static website hosting" ("Alojamiento de sitios web estáticos").
2. Activa "Alojamiento de sitios web estáticos".
3. En "Index document" ("Documento de índice"), escribe index.html.
4. 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:

1. En "Permisos", ve a "Políticas del Bucket" y elige editar.
2. Selecciona "Agregar nueva instrucción", luego "s3:GetObject".
3. Agrega un recurso con los siguientes detalles:
   • Servicio: s3
   • Tipo de recurso: object
   • ARN: arn:aws:s3:::react-first-web/*
4. 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/*"
            ]
        }
    ]
}

5. 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:

1. Ejecuta npm run build para construir tu proyecto.
2. 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:

1. Crea un grupo y un usuario en AWS IAM con los permisos adecuados (por ejemplo, AmazonS3FullAccess o AmazonS3ReadOnlyAccess).
2. 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.