Publicando tu primer sitio de React en S3

React es una biblioteca de JavaScript utilizada para crear interfaces de usuario interactivas. Si eres nuevo en React, puede parecer abrumador al principio, pero su popularidad y amplia comunidad de desarrolladores hacen que sea fácil encontrar recursos en línea para ayudarte a comenzar. En este artículo, te explicaré cómo crear un sitio en React y cómo desplegarlo en Amazon S3.

Creando un sitio en React

Lo primero que necesitas hacer es crear un nuevo proyecto de React. Para ello, debes instalar Node.js y NPM en tu computadora, si aún no lo has hecho. Luego, puedes abrir una terminal y ejecutar el siguiente comando:

npx create-react-app my-app

Este comando creará un nuevo proyecto de React llamado “my-app” en tu carpeta actual. Una vez que el proceso de instalación haya finalizado, puedes cambiar al directorio del proyecto:

cd my-app

A continuación, puedes iniciar el servidor de desarrollo de React con el siguiente comando:

npm start

Este comando iniciará el servidor de desarrollo en http://localhost:3000, donde podrás ver la página predeterminada de bienvenida de React.

Puedes comenzar a construir tu sitio web en React editando el archivo src/App.js. Agrega tus componentes, rutas, estilos y cualquier otra cosa que necesites para tu sitio web.

Cuando sientas que tu sitio web está listo, puedes ejecutar el siguiente comando para crear una versión de producción de tu sitio web:

npm run build

Listo! Es hora de desplegarlo en S3.

Despliegue en Amazon S3

Amazon S3 es un servicio de almacenamiento de objetos que te permite almacenar y recuperar archivos en la nube. Para desplegar tu sitio web en S3, necesitarás una cuenta de AWS y tener acceso a la consola de administración de AWS.

Sigue estos pasos para desplegar tu sitio web en Amazon S3:

1. Crea un nuevo bucket de S3: Para hacerlo, ve a la consola de administración de AWS, selecciona S3 y haz clic en “Crear bucket”. Asegúrate de darle un nombre único a tu bucket y de seleccionar la región de AWS más cercana a la ubicación de las personas que verán tu página. Las demás opciones por defecto funcionarán bien.

2. Habilita el hosting de sitios web estáticos en tu bucket: Una vez que hayas creado el bucket, debes habilitar la opción para alojar un sitio web estático. Para hacer esto, abre la página de propiedades, baja hasta encontrar la opción de “Alojamiento de sitios web estáticos” y presiona el boton de editar. En la nueva vista, selecciona la opción “Habilitar el sitio web estático” y especifica los nombres de tus archivos index y error. Luego haz clic en “Guardar cambios”.

3. Carga tus archivos en tu bucket de S3. Ahora es el momento de subir los archivos de tu sitio web a tu bucket de S3. Puedes hacer esto de diferentes maneras, como utilizar la consola de administración de AWS, la interfaz de línea de comandos de AWS o utilizar un cliente de FTP. Si usas la consola de administración de AWS, puedes simplemente arrastrar y soltar los archivos en tu bucket de S3. Asegúrate de incluir los archivos HTML, CSS y JS de tu sitio web. En el caso de React, debes copiar todos los archivos de la carpeta “build” generada por el comando “npm run build”.

4. Configura la política de bucket de S3 para permitir el acceso público a tus archivos: Una vez que hayas subido los archivos de tu sitio web, debes configurar los permisos de acceso para que los usuarios puedan ver tu sitio web. Puedes configurar los permisos para todo el bucket o para archivos y carpetas específicos. Para hacer esto, abre la página de permisos de tu bucket de S3 y configura las políticas de acceso. Por lo general, querrás configurar el acceso público para que cualquier usuario pueda ver tu sitio web. Para hacerlo, haz clic en la pestaña “Permisos” de tu bucket y selecciona “Agregar política de bucket”. Ingresa la siguiente política:

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

• Modificar “your-bucket-name” por el nombre de tu bucket de S3.

Además, en la sección de “Block public access” de la página de permisos, debes deshabilitar todas las opciones a excepción de las relacionadas a ACLs. Esto permitirá que los usuarios puedan acceder a tus archivos públicos. Si deseas mantener el acceso público a tus archivos, pero deseas evitar que los usuarios puedan acceder a tus archivos privados, puedes configurar una política de acceso diferente.

5. Asigna un dominio a tu sitio web (Opcional/Avanzado): Si deseas asignar un dominio personalizado a tu sitio web, debes configurar el registro CNAME de tu dominio para que apunte a la URL de tu bucket de S3. Esto se hace en la consola de administración de AWS, en la sección de “DNS” de Route 53. Si prefieres utilizar un servicio de DNS diferente, deberás modificar los registros de DNS en ese servicio. Esta es una configuración avanzada que no cubriré en este artículo, pero puedes encontrar más información en la documentación de AWS.

6. Accede a tu sitio web: Una vez que hayas configurado los permisos de acceso, puedes acceder a tu sitio web utilizando la URL de tu bucket de S3. Si has asignado un dominio personalizado, puedes acceder a tu sitio web utilizando ese dominio.

Comentarios finales

¡Listo! Con estos pasos, ya has desplegado tu sitio web en React en Amazon S3 y puedes compartirlo con el mundo. Como dato curioso, mi blog (el que estás leyendo) está desplegado en S3, es un excelente ejemplo de cómo puedes utilizar S3 para alojar tu portafolio o blog personal a un muy bajo costo.