Deploy automático y escalable de aplicaciones frontend con AWS Amplify

Todos los días se crean nuevas tecnologías para facilitar nuestro trabajo como desarrolladores, ya sean frameworks de desarrollo, CI/CD o infraestructura.

Actualmente, se habla mucho sobre deploy de aplicaciones frontend en Vercel, un servicio ideal para ese propósito.

Sin embargo, veo muy pocas menciones a Amplify de AWS, un servicio autoescalable, superbarato (dependiendo del uso que le des al free-tier) y con el que no pagarás nada por hospedar tu aplicación.

Otra ventaja es que si tu aplicación tiene un backend (API) y además la alojas en AWS, entonces tendrás toda tu infraestructura en un solo lugar.

¿Cómo funciona Amplify y cuáles serán los pasos considerados en este artículo?

• Ten una aplicación para hacer el deploy. Aquí crearemos una nueva con Nuxt.js.
• Al entrar en el portal de AWS dentro de tu consola, desarrollaremos una aplicación y conectaremos a ella nuestro repositorio Git.

Después de eso, configuramos los pasos para el deploy de la aplicación:

• Cuáles serán los branches que harán el trigger de un deploy. Aquí podemos, por ejemplo, configurar ambientes de staging y production.
• Variables de ambiente.
• Script de deploy (build).
• Etcétera.

Hecho eso, Amplify proporcionará una URL para cada branch y aplicación, la cual puedes usar como un CNAME en tu dominio. En este artículo, haremos eso mediante AWS Route53.

Creando la aplicación

Para ejemplificar el proceso, vamos a crear una aplicación patrón con el framework Nuxt.js, aunque estos pasos pueden seguirse con todos los tipos de frameworks como React, Vue, Angular, etc.

Al final les dejo el enlace al repositorio de la aplicación en GitHub, pero para los que quieran seguir el paso a paso, aquí vamos:

• Primero, crea una nueva aplicación con el comando:

• Después de eso, entra a la carpeta y ejecuta npm install o yarn install para instalar las dependencias.
• Con esto, podrás iniciar la aplicación local mediante npm run dev o yarn dev. Se verá así cuando la abras en tu browser:

Trabajar con variables de ambiente

Para mostrar mais features que los que posee Amplify, vamos a incluir una simple variable de ambiente y mostrarla en nuestra aplicación. Creamos entonces una variable para determinar el ambiente que utilizamos, pudiendo ser local, staging o production.

Para esto, generamos un archivo .env en la raíz de la aplicación con el siguiente contenido:

Crearemos también criar el archivo .env.example para términos ya añadidos en nuestro repositorio GIT, ya que por default (y seguridad)  .env será ignorado por el archivo .gitignore.

Ahora vamos a modificar nuestra aplicación para leer esa variable y emplearla de alguna forma.

En el archivo nuxt.config.ts agregaremos instrucciones para que la aplicación lea las variables de ambiente de nuestro archivo .env, incluyendo las siguientes configs de runtime:

¡Listo! Ya podemos modificar el contenido en nuestra página app.vue para mostrar en cuál ambiente se ejecuta la aplicación:

Si se hizo todo bien, verás esto al actualizar tu browser:

Si no deseas hacer este paso a paso, ingresa en este link para los detalles de la aplicación. Con esto completado, podemos continuar con Amplify.

Configurando la aplicación para deploy en Amplify

Aquí asumiré que ya tienes una cuenta en Amazon y acceso al panel de Amplify, algo que podrás lograr por aquí también.

Para configurar tu nueva aplicación y conectarla con tu repositorio, sigue estos pasos, pero escoge el servicio Git que prefieras. En mi caso, usé GitHub:

Acto seguido, selecciona tu repositorio, indica el nombre del branch y haz clic en Next. En la próxima etapa, utilizaremos el nombre Revelo Amplify - Production, y configuraremos abajo el proceso de build de la aplicación.

Amplify intenta “adivinar” el proceso de build de tu aplicación y casi lo hace todo bien. Sin embargo, modifiquemos el proceso de build y el path del build. El archivo final lucirá así:

Antes de proseguir, haz clic en Advanced Settings para configurar las variables de ambiente de producción.

En key, agrega APP_ENV y production en value. Luego, selecciona Next, verifica que todo esté en orden y, si va bien, verás algo como esto:

Si todo está OK, haz clic en Save and deploy. Recuerda que, en caso de que algo esté errado, puedes editar todo posteriormente, así que ¡quédate tranquila/o 🙂!

Después de eso, Amplify comenzará el build de tu aplicación y, en pocos minutos, tendrás disponible un link de la app. En mi caso, la aplicación de production está em https://master.d13pfaq3tkx46y.amplifyapp.com/.

Como expliqué antes, puedes usar ese link como un CNAME para un dominio que poseas. Para ejemplificar esto, vamos a configurar mi sitio personal en Amplify a través de Domain Management:

Hecho eso, pedirá que configures los registros de CNAME en tu dominio para que luego tu app sea accesible. Ejemplo: https://revelo-amplify.brayanrastelli.com.br/.

Nuevos ambientes

En caso de que quieras un nuevo ambiente (como uno de staging u homologación), puedes conectar una nueva branch a tu aplicaciçon Amplify:

Si lo haces, tendrás una nueva URL de staging, igual que como se hizo con el link de production.

Variable de ambiente según la branch

Para finalizar, necesitamos generar una variable de ambiente específica para staging. Por ello, ingresaremos a Environment variables. Ahí ya tenemos la variable APP_ENV configurada para todas las branches. Vamos a configurar una nueva variable específica para la branch staging:

Ahora haremos un nuevo deploy en el sitio de staging para aplicar la variable de ambiente. Así sería el resultado al completar el proceso:

Resultado final al ingresar a los dos dominios

Conclusión

En este artículo vimos lo sencillo de configurar una aplicación en Amplify de forma automática, escalable, segura y económica para que ya no tengas que preocuparte por servidores, memoria o CPU, pero con la misma flexibilidad para generar la compilación, configurar el entorno para tener múltiples entornos, etc.

Cuéntame qué te parece, si ya lo usas o tienes curiosidad por aprender y empezar a usarlo.

¡Éxito!