DEV Community

Cover image for Tutorial: Despliega una web estática en AWS con CDK
Afu Tse (Chainiz)
Afu Tse (Chainiz)

Posted on

Tutorial: Despliega una web estática en AWS con CDK

#aws #cdk #typescript #tutorial

¿Quieres aprender a publicar una web estática profesional con HTTPS y dominio propio en AWS?

En este tutorial te guiaré paso a paso para desplegar una web informativa usando:

  1. Amazon S3
  2. CloudFront
  3. Route 53
  4. AWS Certificate Manager

Todo automatizado con AWS CDK v2 y TypeScript.

🧰 Paso 1. Preparar el entorno

Antes de comenzar, asegúrate de tener las herramientas necesarias:

  • Node.js 18+ y npm

Verifica tus versiones:

node --version
npm --version
Enter fullscreen mode Exit fullscreen mode
  • AWS CLI

Configura tus credenciales con permisos sobre S3, CloudFront, Route 53 y ACM:

aws configure
Enter fullscreen mode Exit fullscreen mode
  • AWS CDK v2

Puedes instalarlo globalmente:

npm install -g aws-cdk
Enter fullscreen mode Exit fullscreen mode
  • Dominio en Route 53

Asegúrate de tener una zona hospedada pública, ya que ahí se crearán los registros DNS del sitio.

📦 Paso 2. Obtener el código del proyecto

Clona el repositorio del proyecto:

git clone https://github.com/r3xakead0/aws-sdk-static-web.git
cd aws-sdk-static-web
Enter fullscreen mode Exit fullscreen mode

Instala las dependencias del proyecto CDK:

npm install
Enter fullscreen mode Exit fullscreen mode

🏗️ Paso 3. Conocer la arquitectura

Dentro del proyecto encontrarás varias carpetas y archivos clave:

  • website/ contiene la web estática: HTML, CSS, y JavaScript.

  • lib/static-web-stack.ts define el stack de CDK que aprovisiona:

    • Bucket de S3 privado con versionado para los archivos estáticos.
    • Origin Access Identity y distribución de CloudFront con TLS.
    • Certificado TLS público en ACM validado mediante DNS en us-east-1.
    • Registros Alias en Route 53 que apuntan al dominio/subdominio.
    • Despliegue automático de los archivos del sitio mediante aws-s3-deployment.

  • bin/aws-sdk-static-web.ts, cdk.json y tsconfig.json son archivos de arranque y configuración para la app CDK.

Este es el diagrama de la arquitectura

En resumen, el stack creará:

🪣 Un bucket S3 privado con versionado para los archivos del sitio.
🌍 Una distribución de CloudFront que servirá el contenido con HTTPS.
🔒 Un certificado TLS público gestionado por ACM (validado vía DNS).
🧭 Registros Alias en Route 53 que apuntan al dominio/subdominio.
🚀 Despliegue automático de los archivos web con aws-s3-deployment.

🧱 Paso 4. Compilar y validar el proyecto

Antes de desplegar, compila el código TypeScript para confirmar que todo está correcto:

npm run build
Enter fullscreen mode Exit fullscreen mode

Este comando ejecuta tsc y genera los archivos JavaScript en la carpeta dist/.

🪣 Paso 5. Preparar la cuenta con CDK Bootstrap

El comando bootstrap prepara tu cuenta AWS con los recursos que CDK necesita (roles, buckets internos, etc.).
Solo debes ejecutarlo una vez por región:

npm cdk bootstrap aws://<ACCOUNT_ID>/<REGION>
Enter fullscreen mode Exit fullscreen mode

Ejemplo:

npm cdk bootstrap aws://123456789012/us-east-1
Enter fullscreen mode Exit fullscreen mode

⚙️ Paso 6. Definir parámetros del sitio

Para el despliegue necesitarás tres valores:

  • HostedZoneDomainName: dominio raíz de la zona en Route 53 (ej. example.org).
  • HostedZoneId: identificador de la zona hospedada.
  • SiteSubdomain: subdominio para el sitio (www, demo, @ para usar el dominio raíz).

Guárdalos, ya que los usarás en los siguientes pasos.

🚀 Paso 7. Desplegar la infraestructura y el contenido

Ejecuta el despliegue completo con tus parámetros:

npm cdk deploy \
  --parameters HostedZoneDomainName=example.org \
  --parameters HostedZoneId=Z01CXSXSXXSXSYAA \
  --parameters SiteSubdomain=demo
Enter fullscreen mode Exit fullscreen mode

Durante este proceso, CDK:

  • Crea o actualiza el bucket S3 con versionado.
  • Configura un Origin Access Identity (OAI) para CloudFront.
  • Solicita un certificado TLS en ACM (en us-east-1).
  • Configura una distribución CloudFront con HTTPS (TLS 1.2).
  • Publica los archivos de website/ en S3 e invalida la caché de CloudFront.
  • Crea registros Alias en Route 53 apuntando a tu dominio/subdominio.

✅ Paso 8. Verificar el resultado

Una vez que el despliegue termine:

  1. En CloudFront, verifica que la distribución esté en estado Deployed.
  2. En Route 53, revisa que los registros Alias se hayan creado correctamente. (La propagación DNS puede tardar unos minutos.)
  3. Abre tu navegador y accede a: https://<subdominio>.<dominio> Verás tu web estática sirviéndose con HTTPS y el certificado de ACM.

🔁 Paso 9. Actualizar o redeployar

Si realizas cambios (en el sitio o en el stack):

Ejecuta nuevamente:

npm run build
Enter fullscreen mode Exit fullscreen mode

Luego vuelve a desplegar:

npm cdk deploy \
  --parameters HostedZoneDomainName=example.org \
  --parameters HostedZoneId=Z01CXSXSXXSXSYAA \
  --parameters SiteSubdomain=demo
Enter fullscreen mode Exit fullscreen mode

CDK volverá a subir la nueva versión del sitio y invalidará la caché de CloudFront automáticamente.

🧹 Paso 10. Limpiar los recursos

Cuando ya no necesites la web, destruye los recursos con:

npm cdk destroy \
  --parameters HostedZoneDomainName=example.org \
  --parameters HostedZoneId=Z01CXSXSXXSXSYAA \
  --parameters SiteSubdomain=demo
Enter fullscreen mode Exit fullscreen mode

⚠️ El bucket S3 se conserva (RemovalPolicy.RETAIN) para evitar pérdida de datos.
Si deseas limpiar completamente, elimínalo manualmente desde la consola de S3.

🎯 Conclusión

Con estos pasos, has creado una web estática global con HTTPS y dominio personalizado, completamente automatizada con AWS CDK.
Este enfoque es reproducible, escalable y profesional: ideal para portfolios, landing pages o documentación interna.

Top comments (0)