DEV Community

Afu Tse (Chainiz)
Afu Tse (Chainiz)

Posted on

Tu primer sitio web estático con AWS CDK y Python

#aws #cdk #python #iac

¿Quieres aprender a desplegar un sitio web estático en AWS sin perderte entre servicios y pantallas?

En este tutorial paso a paso construirás tu primera infraestructura con AWS CDK (Cloud Development Kit) usando Python. Al final tendrás una página lista, distribuida con Amazon S3 y Amazon CloudFront.

Diagrama

1. ¿Qué vas a construir?

  • Un bucket de Amazon S3 para almacenar archivos estáticos (HTML, CSS, JS, imágenes).
  • Un distribution de Amazon CloudFront que entrega tu contenido rápidamente en todo el mundo.
  • Una pila (stack) de AWS CDK que puedes versionar y desplegar con un solo comando.

🧠 Idea clave: AWS CDK te permite describir infraestructura con código. Así obtienes la seguridad de un despliegue reproducible y fácil de mantener.

2. Requisitos previos

  1. Cuenta de AWS activa.
  2. AWS CLI configurada con credenciales (aws configure).
  3. Node.js 16+ para instalar CDK.
  4. Python 3.9+ y pip.
  5. AWS CDK instalado globalmente: 
   npm install -g aws-cdk
Enter fullscreen mode Exit fullscreen mode

Comprueba que todo funciona:

aws --version
python --version
cdk --version
Enter fullscreen mode Exit fullscreen mode

3. Crea el proyecto base

El repositorio que acompaña este tutorial ya tiene la estructura mínima. Si quieres comenzar desde cero, estos son los pasos:

  1. Inicializa un entorno de trabajo: 
   mkdir cdk-static-site
   cd cdk-static-site
   cdk init app --language python
Enter fullscreen mode Exit fullscreen mode
  1. Instala dependencias de CDK para S3 y CloudFront: 
   python -m pip install "aws-cdk-lib>=2.0.0" constructs
Enter fullscreen mode Exit fullscreen mode
  1. Crea una carpeta public/ con tu sitio estático (por ejemplo, un index.html simple). Puede descargar este ejemplo

4. Entendamos la pila app.py

Este archivo define los recursos de AWS. Un ejemplo básico luce así:

from aws_cdk import (
    Stack,
    aws_s3 as s3,
    aws_s3_deployment as s3deploy,
    aws_cloudfront as cloudfront,
    aws_cloudfront_origins as origins,
)
from constructs import Construct


class StaticSiteStack(Stack):
    def __init__(self, scope: Construct, construct_id: str, **kwargs) -> None:
        super().__init__(scope, construct_id, **kwargs)

        bucket = s3.Bucket(
            self,
            "SiteBucket",
            website_index_document="index.html",
            block_public_access=s3.BlockPublicAccess.BLOCK_ALL,
            enforce_ssl=True,
            auto_delete_objects=True,
            removal_policy=s3.RemovalPolicy.DESTROY,
        )

        distribution = cloudfront.Distribution(
            self,
            "SiteDistribution",
            default_behavior=cloudfront.BehaviorOptions(
                origin=origins.S3Origin(bucket),
                viewer_protocol_policy=cloudfront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
            ),
            default_root_object="index.html",
        )

        s3deploy.BucketDeployment(
            self,
            "DeployWithInvalidation",
            sources=[s3deploy.Source.asset("./public")],
            destination_bucket=bucket,
            distribution=distribution,
            distribution_paths=["/*"],
        )
Enter fullscreen mode Exit fullscreen mode

¿Qué hace cada bloque?

  • Bucket: almacena los archivos del sitio. Bloqueamos acceso directo público y dejamos que CloudFront sea la puerta de entrada.
  • Distribution: CDN que entrega el contenido con HTTPS automático.
  • BucketDeployment: sube los archivos de ./public y limpia la caché de CloudFront tras cada despliegue.

5. Configura el entorno de CDK

Antes de desplegar, usa cdk bootstrap para preparar tu cuenta de AWS. Solo necesitas hacerlo una vez por región:

cdk bootstrap aws://<tu-account-id>/<region>
Enter fullscreen mode Exit fullscreen mode

Sustituye <tu-account-id> y <region> (ejemplo: aws://123456789012/us-east-1).

6. Despliega tu sitio

  1. Sintetiza la plantilla de CloudFormation: 
   cdk synth
Enter fullscreen mode Exit fullscreen mode

Verás un archivo YAML grande: es la definición de infraestructura que CDK generó.

  1. Despliega: 
   cdk deploy
Enter fullscreen mode Exit fullscreen mode

Confirma el despliegue cuando se solicite. CDK subirá tu sitio y creará los recursos.

  1. Al finalizar, copia la URL que aparece en la salida (el dominio de CloudFront). ¡Ese es tu sitio en producción!

7. Actualiza tu contenido

Cada vez que modifiques archivos dentro de public/, solo debes volver a ejecutar:

cdk deploy
Enter fullscreen mode Exit fullscreen mode

CDK calculará qué cambió, subirá nuevos archivos y limpiará la caché de CloudFront.

8. Limpia recursos (opcional)

Si ya no necesitas el sitio, destruye la pila para evitar costos:

cdk destroy
Enter fullscreen mode Exit fullscreen mode

Esto eliminará el bucket, la distribución y cualquier recurso creado por la pila.

9. Próximos pasos

  • Personaliza un dominio propio con Amazon Route 53 y certificados SSL (AWS Certificate Manager).
  • Agrega automatización con GitHub Actions o AWS CodeBuild para desplegar en cada push.
  • Integra herramientas de observabilidad como CloudWatch Logs para registrar accesos.

🎉 ¡Listo! Acabas de desplegar un sitio estático moderno usando infraestructura como código. Explora más constructos de CDK y adapta este esqueleto a tus próximos proyectos.

Top comments (0)