Cómo desplegar una web con Amplify Hosting

---

Actualizado en abril de 2023. He actualizado este artículo para añadir más información sobre AWS Amplify.

1. Introducción

Este es un caso de uso práctico donde explicaré paso a paso cómo desplegué mi blog usando Amplify Hosting. Usaré la consola de AWS para hacerlo.

El código fuente de mi blog (web) está disponible aquí

2. AWS Amplify

AWS Amplify es un conjunto de herramientas y características diseñadas específicamente que permite a los desarrolladores frontend web y móviles construir rápida y fácilmente aplicaciones full-stack en AWS.

Amplify proporciona dos servicios: Amplify Hosting y Amplify Studio.

• Amplify Hosting proporciona un flujo de trabajo basado en git para alojar aplicaciones web serverless full-stack con despliegue continuo.
• Amplify Studio es un entorno de desarrollo visual que simplifica la creación de aplicaciones web y móviles escalables y full-stack. Usa Studio para construir tu interfaz de usuario frontend con un conjunto de componentes UI listos para usar, crear un backend de aplicación y luego conectar ambos.

AWS Amplify es la forma más rápida y fácil de desarrollar y desplegar aplicaciones móviles y web confiables y escalables en AWS.

3. Cómo desplegar una web con Amplify

Necesitamos tener nuestro código listo para ser desplegado en un repositorio compatible.

• Repositorios compatibles: GitHub, Bitbucket, GitLab y AWS CodeCommit.
• Otra opción es desplegar manualmente con arrastrar y soltar, Amazon S3 o cualquier URL.

En la consola de AWS, ingresa al servicio AWS Amplify y elige Amplify Hosting

a) Si no tienes una aplicación Amplify, aparece esta pantalla y debes hacer clic en Get Started

y luego elige Amplify Hosting

b) Si ya tienes un recurso Amplify, haz clic en New app y Host web app

Configurar Amplify Hosting:

El primer paso para configurar Amplify Hosting es conectar tu repositorio. En mi caso, elegí GitHub

Añadir rama del repositorio: elige tu repositorio y tu rama

Configurar ajustes de compilación: Los ajustes avanzados son opcionales y te permiten hacer referencia a tu imagen de compilación, añadir variables de entorno y sobrescribir paquetes instalados por defecto.

Revisa la configuración y haz clic en Save and deploy

Ahora Amplify debe ser aprovisionado, compilado, desplegado y verificado

En este momento se enviará una notificación por correo electrónico a tu email (al menos en el caso de GitHub)

Cuando termine, podrás acceder a la nueva URL generada por Amplify

4. Configuración adicional

En las siguientes líneas, revisaremos cómo aplicar configuración adicional para añadir más valor a nuestro sitio web.

4.1. Cómo asociar mi web con mi nombre de dominio

También podemos configurar nuestro nombre de dominio para nuestro sitio web desplegado con Amplify Hosting fácilmente.

Para registrar el nombre de dominio usé Amazon Route53.

Usar Route53 no es la opción más económica (por ejemplo, pagué $12 para registrar el nuevo dominio con Route53 en lugar de $1 el primer año con GoDaddy), pero vale la pena (para mí)

En el menú lateral, haz clic en Domain management, y luego haz clic en Add domain.

Elige tu dominio y haz clic en Save. Como registré mi dominio con Route53, aparece en el campo de texto cuando hago clic en él.

Ahora puedes elegir la rama, los subdominios y verificar la redirección automática de HTTP a HTTPS, y hacer clic en Save.

Puede tomar varios minutos en completarse. Primero, necesitas crear el certificado SSL, luego configurar el SSL y finalmente activarlo.

Si accedemos a la página principal podemos ver que la URL ha cambiado.

Ahora podemos acceder con nuestro nombre de dominio:

¡Eso es todo, rápido y fácil!

4.2. Cómo desplegar diferentes versiones de la aplicación

Configurar AWS Amplify Hosting para desplegar varias versiones del sitio web es muy fácil, solo necesitas diferentes ramas en el repositorio y configurarlas en el servicio de la siguiente manera:

4.3. Cómo previsualizar cambios antes de aplicarlos a producción

Usando la función preview puedes previsualizar cambios antes de fusionar un pull request.

Para hacer eso debes:

1. Crear una nueva rama
2. Habilitar previews y asociar con tu rama
3. Abrir un pull request –> Se desplegará una nueva versión de la aplicación

4.4. Cómo proteger cualquier entorno

Si quieres proteger cualquier entorno para que no sea accesible por todos, puedes usar la función de Access Control. Con esta opción, puedes crear un usuario/contraseña simple para restringir el acceso a tu web:

Solo hay 2 opciones para la opción Access settings:

• Publicly available
• Restricted - password required

Cuando intentes acceder ahora a la web tendrás que iniciar sesión para ver el contenido:

Ejemplos de casos de uso: entornos de prueba, demos privadas, etc.

5. Conclusión

En este artículo hemos visto cómo AWS Amplify Hosting puede utilizarse para desplegar una aplicación web de forma rápida y con muy poca carga operativa. Ofrece una manera sencilla de conectar el frontend con servicios de AWS, encargándose además de aspectos comunes como los builds, despliegues, HTTPS y el hosting.

Amplify Hosting resulta especialmente útil para proyectos centrados en frontend, donde la velocidad y la simplicidad son más importantes que tener un control exhaustivo de la infraestructura. En muchos casos, elimina la necesidad de gestionar manualmente servicios como S3, CloudFront o pipelines de CI/CD.

Desde un punto de vista práctico, esta solución funciona muy bien para webs estáticas, aplicaciones single-page y proyectos en fases iniciales, donde el foco está en desarrollar y no en mantener infraestructura. A medida que los requisitos crecen, siempre existe la opción de evolucionar hacia configuraciones más personalizadas.

Amplify Hosting no es la herramienta adecuada para todos los escenarios, pero cuando encaja, puede simplificar mucho la forma en la que despliegas y operas aplicaciones web en AWS.