Servicios de AWS para Frontend

published on 18 March 2024

Si estás buscando cómo construir y alojar aplicaciones o sitios web usando servicios de AWS, te encuentras en el lugar correcto. Aquí, te ofrecemos una guía clara y concisa sobre tres servicios principales de AWS para frontend: AWS Amplify, Amazon S3, y Amazon CloudFront. Cada uno tiene sus ventajas y situaciones ideales de uso.

  • AWS Amplify es perfecto para aplicaciones web y móviles complejas, ofreciendo facilidades para el desarrollo, lanzamiento y escalabilidad.
  • Amazon S3 es ideal para alojar sitios web estáticos de manera económica y sencilla.
  • Amazon CloudFront se utiliza para distribuir contenido de manera rápida y segura a nivel global.

Te guiamos a través de los criterios de selección y te proporcionamos ejemplos prácticos para que puedas decidir cuál servicio se adapta mejor a tus necesidades.

Comparativa Rápida:

Servicio Facilidad de uso Escalabilidad Costo SPA y SSR Integración con AWS
AWS Amplify Alta Automática Variable según uso Ideal para SPA Excelente
Amazon S3 Media, inicialmente compleja Alta Económico inicialmente, varía con el tráfico Requiere configuración para SPA/SSR Buena
Amazon CloudFront Media, inicialmente compleja Muy alta Costo por transferencia de datos Compatible con SPA y SSR Excelente

Al final del día, la elección depende de la complejidad de tu aplicación, tus expectativas de tráfico y tu presupuesto. Este artículo te equipará con la información necesaria para tomar esa decisión.

Comparativa de Servicios AWS para Frontend

1. AWS Amplify

AWS Amplify

Fácil de usar

AWS Amplify es fácil de manejar porque tiene una interfaz que puedes usar con comandos, herramientas para desarrolladores y un sitio web para controlar todo. Es muy bueno para poner en marcha aplicaciones rápidamente sin necesidad de manejar servidores.

Puede crecer contigo

AWS Amplify se adapta al tráfico que tenga tu aplicación, así que no tienes que preocuparte si tu proyecto se hace grande.

Costo

Con AWS Amplify, solo pagas por lo que necesitas, lo que puede ser muy útil si tu proyecto es nuevo o pequeño.

Bueno para ciertos tipos de aplicaciones

Funciona bien con aplicaciones que solo necesitan una página (SPA) y no requieren que el servidor genere las páginas (SSR).

Se lleva bien con otros servicios de AWS

AWS Amplify se puede conectar fácilmente con otros servicios de AWS, como Amazon Cognito para manejar la entrada de usuarios o Amazon DynamoDB para guardar datos.

2. Amazon S3

Facilidad de uso

Configurar Amazon S3 y CloudFront puede llevar un poco más de tiempo al principio que AWS Amplify. Pero una vez que está todo listo, es fácil hacer que tu sitio crezca sin tener que complicarte mucho. Con S3, puedes guardar tus archivos de sitio web como HTML, CSS, JavaScript e imágenes de manera sencilla.

Escalabilidad

Una gran ventaja de Amazon S3 es que te permite guardar un montón de archivos sin gastar mucho dinero. Cuando lo usas con CloudFront, tu sitio puede cargar rápido para las personas que lo visitan, sin importar de dónde sean. Esto lo hace una opción muy buena para cuando tu sitio empiece a tener más visitas.

Costo

Tener tu sitio en S3 es barato, especialmente si no tienes muchas visitas. A medida que tu sitio crece y tienes más gente entrando, el costo puede subir, pero generalmente sigue siendo más económico que otras opciones de hosting.

Soporte para SPA y SSR

S3 funciona bien para sitios simples. Si tienes una aplicación de una sola página (SPA) o necesitas que el servidor haga parte del trabajo (SSR), vas a necesitar hacer algunos ajustes extra.

Integración con otros servicios AWS

Amazon S3 se lleva bien con otros servicios de AWS, lo que te ayuda a mejorar tu sitio:

  • Usa CloudFront para que tu sitio cargue más rápido
  • Route 53 para manejar direcciones y dominios
  • Certificate Manager para manejar certificados SSL
  • CloudWatch para ver cómo está funcionando tu sitio
  • AWS Lambda para añadir funciones extra a tu sitio

En pocas palabras, usar S3 junto con CloudFront es una manera eficiente y no muy cara de tener tu sitio web listo y capaz de recibir a muchos visitantes.

3. Amazon CloudFront

Facilidad de uso

Para empezar con CloudFront hay que seguir unos pasos, pero una vez que esté listo, es fácil de manejar. Funciona por sí solo para hacer que tu sitio web cargue más rápido, solo tienes que conectarlo bien con tus archivos en S3.

Escalabilidad

CloudFront hace que tu sitio pueda recibir a más gente sin problemas, guardando tu contenido en lugares más cercanos a tus visitantes. Esto hace que las páginas carguen rápido, incluso si de repente mucha gente entra a tu sitio.

Costo

CloudFront te permite usar hasta 50 GB de datos y hacer 2000 solicitudes cada mes sin cobrarte. Si necesitas más que eso, el precio depende de cuántos datos transfieras y cuántas solicitudes reciba tu sitio. Si tu sitio tiene mucho tráfico, CloudFront puede resultar más barato.

Soporte para aplicaciones SPA y SSR

CloudFront funciona bien tanto para sitios que cargan todo de una vez (SPA) como para aquellos que necesitan que el servidor prepare las páginas (SSR). Con la ayuda de S3 y Lambda@Edge, puedes ajustar cómo se muestra tu contenido para estas tecnologías modernas.

Integración con otros servicios AWS

CloudFront se conecta bien con otros servicios de AWS:

  • S3: Donde guardas los archivos que CloudFront distribuye
  • Route 53: Dirige a los usuarios al punto de CloudFront más cercano
  • Lambda@Edge: Permite personalizar cómo se entrega el contenido
  • Certificate Manager: Ofrece certificados SSL/TLS sin costo
  • CloudWatch: Brinda información detallada sobre cómo está funcionando tu sitio

En pocas palabras, CloudFront es una buena opción para hacer que tu sitio sea más rápido y pueda atender a más visitantes sin problemas.

Ventajas y Desventajas

Vamos a ver qué tan buenos son AWS Amplify, Amazon S3 y Amazon CloudFront, y también qué no es tan genial de cada uno:

Servicio Lo bueno Lo no tan bueno
AWS Amplify - Fácil de empezar y usar
- Crece contigo sin problemas
- Se une bien con otros servicios de AWS
- Perfecto para apps que solo necesitan una página
- Puede salir más caro si lo usas mucho
- Necesitas hacer algunos cambios si tu app necesita generar páginas desde el servidor
Amazon S3 - Barato para sitios pequeños
- Puede tener mucha info sin gastar mucho
- Funciona bien con otros servicios de AWS
- Al principio puede ser un poco complicado de armar
- Si tienes mucha gente entrando, puede salir más caro
- Necesitas hacer cosas extra si tu sitio es de una sola página o necesita generar páginas desde el servidor
Amazon CloudFront - Hace que tu sitio o app sea más rápido y puede manejar más visitas
- Viene con protección contra ataques malos de internet
- Funciona tanto para sitios de una sola página como para los que necesitan generar páginas desde el servidor
- Necesitas configurarlo al principio
- Lo que pagas depende de cuánta gente visita tu sitio

Como podemos ver, cada uno tiene sus cosas buenas y no tan buenas.

AWS Amplify es fácil para empezar y crecer, especialmente si estás haciendo una app que solo necesita una página. Pero, si mucha gente usa tu app, puede que tengas que pagar más.

Amazon S3 es bueno porque no cuesta mucho al principio y puedes tener mucha información. Pero, armarlo puede ser un poco difícil y si tu sitio es muy visitado, puede salir más caro.

Amazon CloudFront hace que tu sitio o app funcione más rápido y pueda recibir a más gente sin problemas. Funciona bien tanto para sitios de una sola página como para los que necesitan generar páginas desde el servidor. Pero, lo que pagas depende de cuánta gente visita tu sitio.

En resumen, la mejor opción depende de cosas como qué tipo de app estás haciendo, cuánta gente esperas que la visite y cuánto dinero puedes gastar. AWS Amplify es una buena opción para empezar con apps de una sola página, mientras que S3 y CloudFront pueden ser mejores para sitios más grandes o con necesidades específicas.

sbb-itb-03dc61e

Casos de Uso y Ejemplos

Aquí te contamos cómo algunas empresas y desarrolladores han usado estos servicios de AWS para mejorar sus sitios web y aplicaciones, con ejemplos sencillos de entender.

Sitio Web Estático

Imagina una empresa que tiene un sitio web simple, donde muestra lo que vende o los servicios que ofrece. Este sitio estaba en un servidor que a veces fallaba cuando muchos visitantes entraban al mismo tiempo.

La solución fue mover el sitio a Amazon S3 y usar Amazon CloudFront para que el sitio funcionara mejor. Esto es lo que hicieron:

  • Subieron los archivos del sitio (como HTML, CSS, y fotos) a un espacio en S3
  • Configuraron CloudFront para que mostrara el contenido desde S3
  • Cambiaron la configuración de su dominio para que apuntara a CloudFront

Con estos cambios, el sitio ahora aguanta más visitas sin problemas y carga más rápido para los usuarios gracias a CloudFront.

Aplicación Web Progresiva

Un desarrollador tenía una aplicación web moderna que quería mejorar. Quería añadir cosas como que los usuarios puedan entrar con contraseña, recibir avisos y tener una base de datos que se actualice en tiempo real.

Decidió usar AWS Amplify, que le facilitó añadir estas características:

import { Auth } from 'aws-amplify';

// Para añadir entrada de usuarios
Auth.configure();

import { PushNotificationIOS } from '@react-native-community/push-notification-ios';

// Para configurar avisos
PushNotificationIOS.requestPermissions().then // ...

import { DataStore } from '@aws-amplify/datastore';
import { Post } from './models';

// Para tener una base de datos en tiempo real
DataStore.save(new Post({/* ... */}));

Con AWS Amplify, pudo hacer una aplicación completa y lista para crecer, sin tener que complicarse con detalles técnicos.

Portal de Noticias

Un sitio de noticias buscaba que sus artículos cargaran más rápido. Antes, usaban un servidor especial para preparar las páginas antes de mostrarlas a los usuarios.

Decidieron cambiar a usar S3 y CloudFront, con algunos ajustes como:

  • Un espacio en S3 para guardar los archivos del sitio
  • CloudFront para hacer que el contenido llegara más rápido a los usuarios
  • Lambda@Edge para preparar las páginas en lugares más cercanos a los usuarios

Ahora, las páginas se preparan más cerca de donde están los usuarios y se guardan en CloudFront, lo que hace que carguen más rápido, incluso cuando hay muchos visitantes.

Conclusiones

Para terminar, AWS tiene varias opciones buenas para hacer sitios web y aplicaciones. Cada una tiene sus ventajas y cosas no tan buenas:

  • AWS Amplify es una buena elección si estás haciendo una aplicación para web o móviles, especialmente si es de esas que solo necesitan una página para funcionar. Es fácil de usar, puede crecer según lo necesites y se lleva bien con otros servicios de AWS.
  • Amazon S3 y CloudFront son perfectos para poner en línea sitios web que no cambian mucho, de una manera que no cuesta mucho y puede manejar muchos visitantes. Al principio, puede que necesites dedicarle tiempo a configurarlo, pero después es fácil de mantener.
  • API Gateway y Lambda te dan la opción de añadir funciones de backend a tus aplicaciones cuando lo necesites.

Cuando estés decidiendo qué servicio usar, piensa en qué tipo de aplicación estás haciendo, cuánta gente esperas que la visite, cuánto puedes gastar y qué tan fácil quieres que sea manejarlo. AWS Amplify podría ser la mejor opción para muchos proyectos de frontend hoy en día, porque te da todo lo que necesitas en un solo lugar y es compatible con tecnologías modernas.

De cualquier manera, con todos los servicios que ofrece AWS, puedes hacer aplicaciones para web y móviles que funcionan muy bien, que pueden crecer con tu proyecto y que son seguras, usando las herramientas que mejor se adapten a lo que necesitas.

Related posts

Read more