1. Introducción
Hoy en día, los equipos de desarrollo buscan automatizar el despliegue de aplicaciones para reducir errores manuales y acelerar las entregas. En este laboratorio construiremos un pipeline de CI/CD que desplegará automáticamente un sitio web estático cada vez que se realicen cambios en el repositorio.
Utilizaremos los siguientes servicios de AWS:
- Amazon S3: Para alojar nuestro sitio web estático.
- AWS CodeBuild: Para construir y empaquetar nuestro sitio web.
- AWS CodePipeline: Para orquestar el proceso de CI/CD.
- Amazon CloudFront: Para distribuir nuestro sitio web a nivel global.
Al final del laboratorio, cualquier cambio en el repositorio se desplegará automáticamente en el sitio web.
2. Arquitectura de la Solución
La arquitectura del sistema es sencilla pero poderosa. Cada vez que se actualiza el repositorio, se ejecuta automáticamente un pipeline que construye y despliega la aplicación.
Flujo del despliegue:
3. Crear el bucket para el sitio web
Primero debemos crear el bucket que almacenará los archivos del sitio.
Pasos:
- Ir a la consola de Amazon S3.
- Hacer clic en "Create bucket".
- Ingresar un nombre único para el bucket (ejemplo:
mi-sitio-web-estatico). - Seleccionar la región deseada.
- Configurar las opciones de bucket según tus necesidades.
- Hacer clic en "Create bucket".
- Desactivar el bloqueo de acceso público para permitir que el sitio sea accesible públicamente.
- Configurar el bucket para alojar un sitio web estático:
- Ir a la pestaña "Properties" del bucket.
- Hacer clic en "Static website hosting".
- Seleccionar "Use this bucket to host a website".
- Ingresar
index.htmlcomo documento de índice. - Guardar los cambios.
- Configurar las políticas de bucket para permitir el acceso público a los archivos del sitio web:
- Ir a la pestaña "Permissions" del bucket.
- Hacer clic en "Bucket Policy".
- Agregar la siguiente política, reemplazando
mi-sitio-web-estaticocon el nombre de tu bucket:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::your-bucket-name/*"
}
]
}
4. Crear la distribución CDN
Para mejorar el rendimiento y la distribución global utilizaremos Amazon CloudFront.
Configuración básica:
- Origen: El bucket de S3 que acabamos de crear.
- Viewer protocol policy: Redirect HTTP to HTTPS
- Default root object: index.html (obligatorio para evitar errores 403/404)
Una vez creada la distribución, obtendremos un dominio como:
https://xxxxx.cloudfront.netque será la URL de nuestro sitio web.
5. Fork del repositorio de ejemplo
Para este laboratorio, utilizaremos un repositorio de ejemplo que contiene el código de nuestro sitio web estático.
Pasos:
- Ve a https://github.com/juanhcode/astro-static-site-aws-cicd
- Haz clic en el botón "Fork" en la esquina superior derecha.
- Selecciona tu cuenta de GitHub como destino del fork.
- Clona tu fork en tu máquina local:
git clone https://github.com/tu-usuario/astro-static-site-aws-cicd.git
6. Crear el pipeline
Ahora crearemos el pipeline usando AWS CodePipeline para automatizar el flujo completo de despliegue.
Paso a paso:
- Ir a la consola de CodePipeline.
- Seleccionar Create pipeline.
- Elegir Custom pipeline.
- Ingresar el nombre del pipeline (ejemplo: web-static-astro-pipeline).
- Dejar la configuración por defecto (rol y artifact store).
Etapa 1: Source
- Proveedor: GitHub (a través de GitHub App)
- Repositorio: Repositorio: tu fork del repositorio astro-static-site-aws-cicd
- Rama: main
- Activar detección de cambios (CI automático)
Etapa 2: Build
- Proveedor: AWS CodeBuild
- Crear un proyecto llamado: website-static-astro
- Usar un archivo buildspec.yml en la raíz del repositorio
Etapa 3: Deploy
- Proveedor: Amazon S3
- Bucket: site-astro-static
- Input artifact: BuildArtifact
- Activar opción: Extract file before deploy
Esto permite que los archivos del sitio web se publiquen directamente en el bucket.
7. Invalidar cache de CloudFront
Después del despliegue, es necesario limpiar el cache de Amazon CloudFront para que los cambios sean visibles inmediatamente.
Esto puede hacerse agregando un comando en el build:
Mejor práctica: usar variables de entorno
En lugar de hardcodear el ID de la distribución, se recomienda usar variables de entorno en CodeBuild.
Paso 1: Definir variable en CodeBuild
- Ir a la consola de CodeBuild.
- Editar el proyecto con el nombre que le diste.
- En la sección "Environment variables", agregar una variable llamada
CLOUDFRONT_IDcon el valor del ID de tu distribución de CloudFront. - Asegúrate de seleccionar el runtime adecuado para tu proyecto. Revisa la documentación oficial de runtimes disponibles para elegir la versión que mejor se adapte a tu entorno.
Paso 2: Agregar comando de invalidación en buildspec.yml
Si estás utilizando el repositorio de ejemplo, el buildspec.yml ya tiene la variable definida, pero si no, asegúrate de agregarla en tu buildspec.yml despues de la sección de build:
post_build:
commands:
- echo "Invalidando cache de CloudFront..."
- aws cloudfront create-invalidation --distribution-id $CLOUDFRONT_ID --paths "/*"
Paso 3: Configurar permisos
Asegúrate de que el rol de servicio de CodeBuild tenga permisos para ejecutar la acción cloudfront:CreateInvalidation. Esto se puede hacer agregando la siguiente política al rol:
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": "cloudfront:CreateInvalidation",
"Resource": "arn:aws:cloudfront::account-id:distribution/distribution-id"
}
]
}
8. Probar el pipeline
Para probar el pipeline, realiza un cambio en el repositorio (por ejemplo, modifica cualquier archivo dentro de src) y haz un commit. Esto debería activar automáticamente el pipeline, que construirá y desplegará el sitio web actualizado. Puedes monitorear el progreso del pipeline en la consola de CodePipeline para asegurarte de que todo se ejecute correctamente. Si el pipeline falla, revisa los logs de CodeBuild para identificar y solucionar cualquier error.
9. Verificar el despliegue
Una vez que el pipeline se ejecute correctamente, puedes verificar que tu sitio web esté desplegado accediendo a la URL proporcionada por CloudFront:
https://xxxxx.cloudfront.net
10. Resultados finales
Después de configurar el pipeline:
- Se realiza un commit en el repositorio
- CodePipeline inicia automáticamente
- CodeBuild construye el proyecto
- Los archivos se despliegan en S3
- CloudFront entrega la nueva versión del sitio
El sitio queda disponible en:
https://xxxxx.cloudfront.net
11. Conclusión
En este laboratorio construimos un pipeline de CI/CD completamente funcional utilizando servicios administrados de AWS. Este enfoque permite automatizar los despliegues, mejorar la consistencia entre entornos y reducir errores humanos.
La combinación de Amazon S3, Amazon CloudFront, AWS CodePipeline y AWS CodeBuild proporciona una solución simple pero poderosa para desplegar sitios web estáticos de forma automática.


Top comments (0)