Desplegar una aplicación de frontend de forma automática es una de las tareas más comunes en DevOps, y entender cómo conectar servicios como AWS CodePipeline, CodeBuild, S3 y BitBucket te permite crear flujos de trabajo profesionales sin necesidad de conocer el código fuente a fondo. A continuación se explica paso a paso cómo se construye este pipeline reutilizando recursos ya existentes y configurando cada componente con Terraform.
¿Qué servicios se necesitan para un pipeline de frontend?
El flujo utiliza prácticamente los mismos componentes del pipeline anterior, con algunas diferencias clave [1:00]. Se requiere:
- CodePipeline: orquesta todo el proceso de descarga, compilación y despliegue.
- CodeBuild: ejecuta los comandos de compilación como
npm run build.
- BitBucket: reemplaza a CodeCommit como repositorio de código fuente.
- S3: almacena los archivos compilados de Angular y funciona como servidor web estático.
Una ventaja importante es la reutilización de permisos. Los roles de IAM creados en el pipeline anterior —tanto para CodePipeline como para CodeBuild— se reusan directamente. Solo se necesita obtener su ARN (Amazon Resource Name), que es el identificador único de cada recurso en AWS [3:02]. Para encontrarlo, se accede a la consola de AWS, se busca el rol por nombre y se copia el ARN para pegarlo en el archivo de variables de Terraform.
¿Cómo se configura el bucket S3 como servidor web?
El S3 no solo almacena archivos, sino que se configura para servir contenido web estático [4:43]. Esto es posible porque se trata exclusivamente de frontend; si hubiera backend, se necesitaría un servidor. La configuración incluye:
- Políticas del bucket para habilitar el modo de hosting de sitio web estático.
- Permisos públicos para que cualquier usuario pueda acceder a la página.
Toda esta configuración se define dentro de los archivos de Terraform y se aplica automáticamente al ejecutar el despliegue.
¿Qué contiene el buildspec para compilar Angular?
El archivo buildspec es donde se definen los comandos que CodeBuild ejecutará [5:30]. En este caso, incluye la instalación de Angular, herramientas necesarias y finalmente el comando npm run build. Un punto fundamental: no necesitas saber programar en el framework del proyecto. Lo que necesitas es preguntar al equipo de desarrollo cuáles son los comandos de compilación [5:45].
En la práctica, esto implica comunicación directa con los desarrolladores. Es normal que el despliegue no funcione a la primera; se requiere iterar y ajustar los comandos hasta que el ambiente de compilación refleje el entorno real del proyecto [6:15].
¿Cómo se conecta BitBucket con CodePipeline?
A diferencia de CodeCommit, que es un servicio nativo de AWS, BitBucket es un servicio externo. Esto significa que la conexión requiere un componente adicional llamado CodeStar Connection [7:40]. En el stage de descarga del pipeline, se especifica:
- El provider como
CodeStarSourceConnection.
- El nombre del repositorio en BitBucket.
- El ARN de la conexión previamente creada.
Hay un paso manual obligatorio: la conexión aparece como "pendiente" y debe activarse desde la consola de AWS haciendo clic en Update, luego en Install y finalmente en Connect [8:50]. Esta es una limitación de la propia plataforma que no puede automatizarse.
¿Cómo se ejecuta y verifica el despliegue?
Una vez que todos los archivos están listos, se realiza un git push origin master y el proceso se dispara automáticamente [10:10]. El pipeline de Terraform se ejecuta primero, creando los tres recursos nuevos (CodePipeline, CodeBuild y S3). Inmediatamente después, el nuevo pipeline de frontend comienza a correr.
El proceso completo sigue estas fases:
- Source: descarga el código desde BitBucket.
- Build: ejecuta los comandos del buildspec en CodeBuild.
- Deploy: sube los archivos compilados al bucket S3.
Al finalizar, los archivos de Angular aparecen en el S3 y la página queda disponible a través de la URL del endpoint de hosting estático [12:30]. La página se sirve directamente desde S3 sin necesidad de ningún servidor adicional.
El flujo completo es un ejemplo de procesos automáticos o CI/CD (Continuous Integration / Continuous Deployment): haces un push a tu repositorio, BitBucket lo detecta, CodePipeline se activa y todo se ejecuta sin intervención manual [10:45]. La flexibilidad de este enfoque permite personalizar las fases según las necesidades del equipo, por ejemplo, eliminando el paso de plan si no se requiere revisión previa.
¿Has implementado despliegues automáticos de frontend con otros servicios o frameworks? Comparte tu experiencia y las dificultades que encontraste en el camino.
