{"id":915,"date":"2024-03-29T16:27:58","date_gmt":"2024-03-29T22:27:58","guid":{"rendered":"https:\/\/gumonet.com\/?p=915"},"modified":"2024-03-29T16:27:59","modified_gmt":"2024-03-29T22:27:59","slug":"desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront","status":"publish","type":"post","link":"https:\/\/gumonet.com\/desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront\/","title":{"rendered":"Desplegar un sitio web con AWS CDK en S3 y CloudFront"},"content":{"rendered":"\n<p>En este post vamos a mostrar de manera pr\u00e1ctica c\u00f3mo desplegar un sitio web con AWS CDK en S3 y CloudFront, en este caso utilizaremos un proyecto en HTML que colocaremos en l\u00ednea utilizando la siguiente infraestructura:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"429\" height=\"160\" src=\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/infra-diagram.jpeg\" alt=\"\" class=\"wp-image-916\" srcset=\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/infra-diagram.jpeg 429w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/infra-diagram-300x112.jpeg 300w\" sizes=\"(max-width: 429px) 100vw, 429px\" \/><\/figure><\/div>\n\n\n<p>Antes de comenzar es importante que ya tengas configuradas tus credenciales y de preferencia el AWS CLI de Amazon en tu entorno de trabajo. Puedes hacerlo siguiendo <a href=\"https:\/\/gumonet.com\/configurar-credenciales-cli-de-aws\/\">este tutorial.<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Configurando el proyecto<\/h2>\n\n\n\n<p>Nuestro proyecto constar\u00e1 de un archivo <strong>HTML<\/strong>, una hoja de estilos <strong>CSS<\/strong>, y un script que se visualizar\u00e1n como una p\u00e1gina web est\u00e1tica. Para desplegar nuestro proyecto utilizaremos <strong>AWS S3<\/strong> para almacenar el sitio web y <strong>CloudFront<\/strong> para distribuir el contenido y generar una URL.<\/p>\n\n\n\n<p>Para tener todo organizado tendremos una estructura principal de dos carpetas.<\/p>\n\n\n\n<ul>\n<li><strong>Public<\/strong>: Contendr\u00e1 los archivos de nuestro sitio web<\/li>\n\n\n\n<li><strong>Infra<\/strong>: Contendr\u00e1 todo el c\u00f3digo y la l\u00f3gica de nuestra infraestructura<\/li>\n<\/ul>\n\n\n\n<p><em><a href=\"https:\/\/github.com\/gumonet\/cdk-website-s3-cloudfront\" target=\"_blank\" rel=\"noreferrer noopener\">Te dejo el c\u00f3digo del sitio de ejemplo que estaremos utilizando aqu\u00ed.<\/a><\/em><\/p>\n\n\n\n<figure data-wp-context=\"{&quot;uploadedSrc&quot;:&quot;https:\\\/\\\/gumonet.com\\\/wp-content\\\/uploads\\\/2024\\\/03\\\/deploy-cdk_00.png&quot;,&quot;figureClassNames&quot;:&quot;wp-block-image size-large&quot;,&quot;figureStyles&quot;:null,&quot;imgClassNames&quot;:&quot;wp-image-917&quot;,&quot;imgStyles&quot;:null,&quot;targetWidth&quot;:1846,&quot;targetHeight&quot;:1442,&quot;scaleAttr&quot;:false,&quot;ariaLabel&quot;:&quot;Ampliar imagen: Desplegar un sitio web con AWS CDK en S3 y CloudFront - Detalle del proyecto&quot;,&quot;alt&quot;:&quot;Desplegar un sitio web con AWS CDK en S3 y CloudFront - Detalle del proyecto&quot;}\" data-wp-interactive=\"core\/image\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"800\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_00-1024x800.png\" alt=\"Desplegar un sitio web con AWS CDK en S3 y CloudFront - Detalle del proyecto\" class=\"wp-image-917\" srcset=\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_00-1024x800.png 1024w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_00-300x234.png 300w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_00-768x600.png 768w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_00-1536x1200.png 1536w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_00.png 1846w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Ampliar imagen: Desplegar un sitio web con AWS CDK en S3 y CloudFront - Detalle del proyecto\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"context.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"context.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Agregando la Infraestructura con AWS CDK<\/h2>\n\n\n\n<p>1. Ingresamos a nuestra carpeta <code><strong>infra<\/strong><\/code> y ejecutamos el comando para iniciar un nuevo proyecto <strong>cdk<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">cd infra\n<code>cdk init app --language=typescript<\/code><\/code><\/pre>\n\n\n\n<p>Este comando inicializa un nuevo proyecto de Amazon CDK utilizando <strong>typescript<\/strong>, una vez finalizado nuestro proyecto se ver\u00e1 de la siguiente manera.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"682\" src=\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/Untitled-1024x682.png\" alt=\"Desplegar un sitio web con AWS CDK en S3 y CloudFront - CDK Proyecto\" class=\"wp-image-919\" srcset=\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/Untitled-1024x682.png 1024w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/Untitled-300x200.png 300w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/Untitled-768x512.png 768w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/Untitled.png 1234w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>2. Ingresamos al archivo <code>infra-stack.ts<\/code> que se encuentra dentro de la carpeta lib, para agregar el c\u00f3digo de nuestra infra:<\/p>\n\n\n\n<pre title=\".\/lib\/infra-stack.ts\" class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">import * as cdk from 'aws-cdk-lib';\nimport { Construct } from 'constructs';\nimport { Bucket, BlockPublicAccess, BucketEncryption } from 'aws-cdk-lib\/aws-s3';\nimport { OriginAccessIdentity } from 'aws-cdk-lib\/aws-cloudfront';\nimport { Distribution } from 'aws-cdk-lib\/aws-cloudfront';\nimport { ViewerProtocolPolicy, AllowedMethods } from 'aws-cdk-lib\/aws-cloudfront';\nimport * as s3deploy from \"aws-cdk-lib\/aws-s3-deployment\";\n\n\/\/ import * as sqs from 'aws-cdk-lib\/aws-sqs';\n\nexport class InfraEstaticStack extends cdk.Stack {\n  constructor(scope: Construct, id: string, props?: cdk.StackProps) {\n    super(scope, id, props);\n\n    \/\/Definimos la configuraci\u00f3n del bucket S3\n    const s3Bucket = new Bucket(this, 'storage',{\n      websiteIndexDocument: 'index.html',\n      websiteErrorDocument: 'index.html',\n      blockPublicAccess: BlockPublicAccess.BLOCK_ACLS,\n      encryption: BucketEncryption.S3_MANAGED,\n      enforceSSL: false,\n      publicReadAccess: true,\n      autoDeleteObjects: true,\n      removalPolicy: cdk.RemovalPolicy.DESTROY\n    });\n  \n    \/\/Creamos una identidad de origen y se lo asignamos al bucket s3\n    const oia = new OriginAccessIdentity(this, 'OIA', {\n      comment: \"OIA for Images infra\"\n    });\n    s3Bucket.grantRead(oia);\n    \n    \n    \/* Definimos la configuraci\u00f3 de nuestro bucket s3 *\/\n    const cloudfrontDistrubution = new Distribution( this, 'spo-public-cf_', {\n      defaultBehavior: {\n        origin: new cdk.aws_cloudfront_origins.S3Origin(s3Bucket), \/\/apuntamos nuestro cloud front a nuestro bucket\n        viewerProtocolPolicy: ViewerProtocolPolicy.ALLOW_ALL,\n        allowedMethods: AllowedMethods.ALLOW_GET_HEAD_OPTIONS,\n      },\n      priceClass: cdk.aws_cloudfront.PriceClass.PRICE_CLASS_100,\n      \n    })\n  \n    \/\/Iniciamos un despliegue de los archivos que est\u00e1n en la carpeta public a la raiz de nuestro bucket\n    new s3deploy.BucketDeployment( this, 'DeployFiles', { \n      sources: [ s3deploy.Source.asset('..\/public\/')],\n      destinationBucket: s3Bucket,\n    })\n  \n    \/\/Imprimimos la url de nuestra distribuci\u00f3n de cloud front\n    new cdk.CfnOutput(this, \"ulr\", {\n      value: `${cloudfrontDistrubution.distributionDomainName}`\n    })\n  }\n}\n<\/code><\/pre>\n\n\n\n<p>3. Ya definida nuestra infraestructura, procederemos a agregar una instancia de nuestra infra dentro del archivo <strong>bin\/infra.ts<\/strong>, quedar\u00eda de la siguiente manera.<\/p>\n\n\n\n<pre title=\".\/bin\/infra.ts\" class=\"wp-block-code\"><code lang=\"typescript\" class=\"language-typescript\">#!\/usr\/bin\/env node\nimport 'source-map-support\/register';\nimport * as cdk from 'aws-cdk-lib';\nimport { InfraEstaticStack } from '..\/lib\/infra-stack';\n\nconst app = new cdk.App();\nnew InfraEstaticStack(app, 'InfraEstaticStack', {\n  env: {\n    region: 'us-east-1', \/\/Region en donde se va a desplegar tu proyecto\n    account: '' \/\/Tu n\u00famero de cuenta de AWS\n  }\n});<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Desplegando la infraestructura<\/h2>\n\n\n\n<p>1. Definida nuestra infra, procederemos a realizar un build de nuestro c\u00f3digo.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">npm run build<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"394\" height=\"224\" src=\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_4.png\" alt=\"Desplegar un sitio web con AWS CDK en S3 y CloudFront - Build\" class=\"wp-image-920\" srcset=\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_4.png 394w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_4-300x171.png 300w\" sizes=\"(max-width: 394px) 100vw, 394px\" \/><\/figure><\/div>\n\n\n<p>2. Ahora ejecutamos el siguiente c\u00f3digo para preparar el despliegue y comprobar errores.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">cdk synth<\/code><\/pre>\n\n\n\n<p>Este comando generar\u00e1 nuestro template de cloud formation y si todo funciona bien, ya podremos lanzar el despliegue.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"767\" height=\"1024\" src=\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_5-767x1024.png\" alt=\"Desplegar un sitio web con AWS CDK en S3 y CloudFront - Synt\" class=\"wp-image-921\" srcset=\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_5-767x1024.png 767w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_5-225x300.png 225w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_5-768x1026.png 768w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_5-1150x1536.png 1150w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_5.png 1312w\" sizes=\"(max-width: 767px) 100vw, 767px\" \/><\/figure>\n\n\n\n<p>3. Ahora procedemos a lanzar el despliegue.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">cdk deploy<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"399\" src=\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_0-1024x399.png\" alt=\"Desplegar un sitio web con AWS CDK en S3 y CloudFront - Deploy CDK\" class=\"wp-image-925\" srcset=\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_0-1024x399.png 1024w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_0-300x117.png 300w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_0-768x300.png 768w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_0-1536x599.png 1536w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_0.png 1974w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>La primera vez que lancemos el despliegue nos pedir\u00e1 confirmar la creaci\u00f3n de algunos permisos. Presionamos la tecla <strong><em>Y <\/em><\/strong>seguido de <strong><em>Enter<\/em><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"424\" src=\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_fix-1024x424.png\" alt=\"Desplegar un sitio web con AWS CDK en S3 y CloudFront - Preview cdk deploy\" class=\"wp-image-922\" srcset=\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_fix-1024x424.png 1024w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_fix-300x124.png 300w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_fix-768x318.png 768w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_fix-1536x637.png 1536w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_fix-2048x849.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Ahora comenzar\u00e1 el despliegue, en la terminal podr\u00e1s visualizar el avance de la creaci\u00f3n de cada uno de los componentes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"187\" src=\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_2-1024x187.png\" alt=\"Desplegar un sitio web con AWS CDK en S3 y CloudFront - Aprove deployment\" class=\"wp-image-924\" srcset=\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_2-1024x187.png 1024w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_2-300x55.png 300w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_2-768x140.png 768w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_2-1536x281.png 1536w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_2.png 1870w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Una vez que finalic\u00e9 el despliegue, podr\u00e1s ver la <strong>url<\/strong> del proyecto y ya podr\u00e1s visualizar el resultado en tu navegador.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"325\" src=\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_3-1024x325.png\" alt=\"Desplegar un sitio web con AWS CDK en S3 y CloudFront - Finish deployment\" class=\"wp-image-926\" srcset=\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_3-1024x325.png 1024w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_3-300x95.png 300w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_3-768x244.png 768w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_3-1536x487.png 1536w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_3.png 1722w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"670\" src=\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/2024-03-29_16-01-1024x670.png\" alt=\"Desplegar un sitio web con AWS CDK en S3 y CloudFront - Show result\" class=\"wp-image-933\" srcset=\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/2024-03-29_16-01-1024x670.png 1024w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/2024-03-29_16-01-300x196.png 300w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/2024-03-29_16-01-768x503.png 768w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/2024-03-29_16-01-1536x1006.png 1536w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/2024-03-29_16-01-2048x1341.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Eliminando la infra creada<\/h2>\n\n\n\n<p>Una vez finalizada tu pr\u00e1ctica vamos a eliminar todos los recursos creados, para evitar cargos no deseados en nuestra factura de <strong>AWS<\/strong>, la ventaja que tenemos al trabajar con <strong>CDK<\/strong> es que con solo ejecutar un comando podremos eliminar todo lo que desplegamos, sin tener que ingresar a la consola.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"bash\" class=\"language-bash\">cdk destroy<\/code><\/pre>\n\n\n\n<p>Presionamos la tecla <strong>(y)<\/strong> seguida de <strong>Enter<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"211\" src=\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_8-1024x211.png\" alt=\"Cdk destroy\" class=\"wp-image-929\" srcset=\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_8-1024x211.png 1024w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_8-300x62.png 300w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_8-768x158.png 768w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_8.png 1280w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>CDK<\/strong> comenzar\u00e1 el proceso de eliminaci\u00f3n<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"172\" src=\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_7-1-1024x172.png\" alt=\"Aprove destroy\" class=\"wp-image-930\" srcset=\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_7-1-1024x172.png 1024w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_7-1-300x50.png 300w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_7-1-768x129.png 768w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_7-1-1536x259.png 1536w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_7-1.png 1806w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>En cuanto finalic\u00e9 veremos una salida en terminal similar a la siguiente.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"211\" src=\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_8-1-1024x211.png\" alt=\"Destroy success\" class=\"wp-image-931\" srcset=\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_8-1-1024x211.png 1024w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_8-1-300x62.png 300w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_8-1-768x158.png 768w, https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/deploy-cdk_8-1.png 1280w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Con esto hemos limpiado nuestra cuenta de AWS, y ahora ya podemos desplegar sitios web est\u00e1ticos directamente en s3 sin tener que utilizar un servidor.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este post vamos a mostrar de manera pr\u00e1ctica c\u00f3mo desplegar un sitio web con AWS CDK en S3 y CloudFront, en este caso utilizaremos un proyecto en HTML que colocaremos en l\u00ednea utilizando la siguiente infraestructura: Antes de comenzar es importante que ya tengas configuradas tus credenciales y de preferencia el AWS CLI de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":932,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[52,51],"tags":[49,53,54],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Desplegar un sitio web con AWS CDK en S3 y CloudFront - Gumonet<\/title>\n<meta name=\"description\" content=\"Aprende a desplegar un sitio web con AWS CDK en S3 y CloudFront, en este caso utilizaremos un proyecto en HTML que colocaremos en l\u00ednea\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/gumonet.com\/desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront\/\" \/>\n<meta property=\"og:locale\" content=\"es_MX\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Desplegar un sitio web con AWS CDK en S3 y CloudFront - Gumonet\" \/>\n<meta property=\"og:description\" content=\"Aprende a desplegar un sitio web con AWS CDK en S3 y CloudFront, en este caso utilizaremos un proyecto en HTML que colocaremos en l\u00ednea\" \/>\n<meta property=\"og:url\" content=\"https:\/\/gumonet.com\/desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront\/\" \/>\n<meta property=\"og:site_name\" content=\"Gumonet\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-29T22:27:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-29T22:27:59+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/Untitled-design.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"gumonet\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@gumonet\" \/>\n<meta name=\"twitter:site\" content=\"@gumonet\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"gumonet\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/gumonet.com\/desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/gumonet.com\/desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront\/\"},\"author\":{\"name\":\"gumonet\",\"@id\":\"https:\/\/gumonet.com\/#\/schema\/person\/c6d490ae659f4ad7e5fc0526c2458f94\"},\"headline\":\"Desplegar un sitio web con AWS CDK en S3 y CloudFront\",\"datePublished\":\"2024-03-29T22:27:58+00:00\",\"dateModified\":\"2024-03-29T22:27:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/gumonet.com\/desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront\/\"},\"wordCount\":488,\"publisher\":{\"@id\":\"https:\/\/gumonet.com\/#\/schema\/person\/c6d490ae659f4ad7e5fc0526c2458f94\"},\"image\":{\"@id\":\"https:\/\/gumonet.com\/desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/Untitled-design.jpg\",\"keywords\":[\"aws\",\"cdk\",\"iac\"],\"articleSection\":[\"AWS\",\"DevOps\"],\"inLanguage\":\"es-MX\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/gumonet.com\/desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront\/\",\"url\":\"https:\/\/gumonet.com\/desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront\/\",\"name\":\"Desplegar un sitio web con AWS CDK en S3 y CloudFront - Gumonet\",\"isPartOf\":{\"@id\":\"https:\/\/gumonet.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/gumonet.com\/desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/gumonet.com\/desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/Untitled-design.jpg\",\"datePublished\":\"2024-03-29T22:27:58+00:00\",\"dateModified\":\"2024-03-29T22:27:59+00:00\",\"description\":\"Aprende a desplegar un sitio web con AWS CDK en S3 y CloudFront, en este caso utilizaremos un proyecto en HTML que colocaremos en l\u00ednea\",\"breadcrumb\":{\"@id\":\"https:\/\/gumonet.com\/desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront\/#breadcrumb\"},\"inLanguage\":\"es-MX\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/gumonet.com\/desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es-MX\",\"@id\":\"https:\/\/gumonet.com\/desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront\/#primaryimage\",\"url\":\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/Untitled-design.jpg\",\"contentUrl\":\"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/Untitled-design.jpg\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/gumonet.com\/desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\/\/gumonet.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Desplegar un sitio web con AWS CDK en S3 y CloudFront\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/gumonet.com\/#website\",\"url\":\"https:\/\/gumonet.com\/\",\"name\":\"Gumonet\",\"description\":\"DevOps and Web developer\",\"publisher\":{\"@id\":\"https:\/\/gumonet.com\/#\/schema\/person\/c6d490ae659f4ad7e5fc0526c2458f94\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/gumonet.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"es-MX\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/gumonet.com\/#\/schema\/person\/c6d490ae659f4ad7e5fc0526c2458f94\",\"name\":\"gumonet\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es-MX\",\"@id\":\"https:\/\/gumonet.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gumonet.com\/wp-content\/uploads\/2021\/01\/cropped-icon.png\",\"contentUrl\":\"https:\/\/gumonet.com\/wp-content\/uploads\/2021\/01\/cropped-icon.png\",\"width\":512,\"height\":512,\"caption\":\"gumonet\"},\"logo\":{\"@id\":\"https:\/\/gumonet.com\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/gumonet.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Desplegar un sitio web con AWS CDK en S3 y CloudFront - Gumonet","description":"Aprende a desplegar un sitio web con AWS CDK en S3 y CloudFront, en este caso utilizaremos un proyecto en HTML que colocaremos en l\u00ednea","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/gumonet.com\/desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront\/","og_locale":"es_MX","og_type":"article","og_title":"Desplegar un sitio web con AWS CDK en S3 y CloudFront - Gumonet","og_description":"Aprende a desplegar un sitio web con AWS CDK en S3 y CloudFront, en este caso utilizaremos un proyecto en HTML que colocaremos en l\u00ednea","og_url":"https:\/\/gumonet.com\/desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront\/","og_site_name":"Gumonet","article_published_time":"2024-03-29T22:27:58+00:00","article_modified_time":"2024-03-29T22:27:59+00:00","og_image":[{"width":1200,"height":630,"url":"http:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/Untitled-design.jpg","type":"image\/jpeg"}],"author":"gumonet","twitter_card":"summary_large_image","twitter_creator":"@gumonet","twitter_site":"@gumonet","twitter_misc":{"Escrito por":"gumonet","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/gumonet.com\/desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront\/#article","isPartOf":{"@id":"https:\/\/gumonet.com\/desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront\/"},"author":{"name":"gumonet","@id":"https:\/\/gumonet.com\/#\/schema\/person\/c6d490ae659f4ad7e5fc0526c2458f94"},"headline":"Desplegar un sitio web con AWS CDK en S3 y CloudFront","datePublished":"2024-03-29T22:27:58+00:00","dateModified":"2024-03-29T22:27:59+00:00","mainEntityOfPage":{"@id":"https:\/\/gumonet.com\/desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront\/"},"wordCount":488,"publisher":{"@id":"https:\/\/gumonet.com\/#\/schema\/person\/c6d490ae659f4ad7e5fc0526c2458f94"},"image":{"@id":"https:\/\/gumonet.com\/desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront\/#primaryimage"},"thumbnailUrl":"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/Untitled-design.jpg","keywords":["aws","cdk","iac"],"articleSection":["AWS","DevOps"],"inLanguage":"es-MX"},{"@type":"WebPage","@id":"https:\/\/gumonet.com\/desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront\/","url":"https:\/\/gumonet.com\/desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront\/","name":"Desplegar un sitio web con AWS CDK en S3 y CloudFront - Gumonet","isPartOf":{"@id":"https:\/\/gumonet.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/gumonet.com\/desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront\/#primaryimage"},"image":{"@id":"https:\/\/gumonet.com\/desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront\/#primaryimage"},"thumbnailUrl":"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/Untitled-design.jpg","datePublished":"2024-03-29T22:27:58+00:00","dateModified":"2024-03-29T22:27:59+00:00","description":"Aprende a desplegar un sitio web con AWS CDK en S3 y CloudFront, en este caso utilizaremos un proyecto en HTML que colocaremos en l\u00ednea","breadcrumb":{"@id":"https:\/\/gumonet.com\/desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront\/#breadcrumb"},"inLanguage":"es-MX","potentialAction":[{"@type":"ReadAction","target":["https:\/\/gumonet.com\/desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront\/"]}]},{"@type":"ImageObject","inLanguage":"es-MX","@id":"https:\/\/gumonet.com\/desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront\/#primaryimage","url":"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/Untitled-design.jpg","contentUrl":"https:\/\/gumonet.com\/wp-content\/uploads\/2024\/03\/Untitled-design.jpg","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/gumonet.com\/desplegar-un-sitio-web-con-aws-cdk-en-s3-y-cloudfront\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/gumonet.com\/"},{"@type":"ListItem","position":2,"name":"Desplegar un sitio web con AWS CDK en S3 y CloudFront"}]},{"@type":"WebSite","@id":"https:\/\/gumonet.com\/#website","url":"https:\/\/gumonet.com\/","name":"Gumonet","description":"DevOps and Web developer","publisher":{"@id":"https:\/\/gumonet.com\/#\/schema\/person\/c6d490ae659f4ad7e5fc0526c2458f94"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/gumonet.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"es-MX"},{"@type":["Person","Organization"],"@id":"https:\/\/gumonet.com\/#\/schema\/person\/c6d490ae659f4ad7e5fc0526c2458f94","name":"gumonet","image":{"@type":"ImageObject","inLanguage":"es-MX","@id":"https:\/\/gumonet.com\/#\/schema\/person\/image\/","url":"https:\/\/gumonet.com\/wp-content\/uploads\/2021\/01\/cropped-icon.png","contentUrl":"https:\/\/gumonet.com\/wp-content\/uploads\/2021\/01\/cropped-icon.png","width":512,"height":512,"caption":"gumonet"},"logo":{"@id":"https:\/\/gumonet.com\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/gumonet.com"]}]}},"_links":{"self":[{"href":"https:\/\/gumonet.com\/wp-json\/wp\/v2\/posts\/915"}],"collection":[{"href":"https:\/\/gumonet.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gumonet.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gumonet.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gumonet.com\/wp-json\/wp\/v2\/comments?post=915"}],"version-history":[{"count":2,"href":"https:\/\/gumonet.com\/wp-json\/wp\/v2\/posts\/915\/revisions"}],"predecessor-version":[{"id":934,"href":"https:\/\/gumonet.com\/wp-json\/wp\/v2\/posts\/915\/revisions\/934"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gumonet.com\/wp-json\/wp\/v2\/media\/932"}],"wp:attachment":[{"href":"https:\/\/gumonet.com\/wp-json\/wp\/v2\/media?parent=915"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gumonet.com\/wp-json\/wp\/v2\/categories?post=915"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gumonet.com\/wp-json\/wp\/v2\/tags?post=915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}