{"id":16,"date":"2020-06-11T03:05:14","date_gmt":"2020-06-11T03:05:14","guid":{"rendered":"https:\/\/lmponceb.com\/?p=16"},"modified":"2021-02-09T23:09:50","modified_gmt":"2021-02-09T23:09:50","slug":"despliegue-automatizado-de-angular-a-aws-s3","status":"publish","type":"post","link":"https:\/\/lmponceb.com\/index.php\/2020\/06\/11\/despliegue-automatizado-de-angular-a-aws-s3\/","title":{"rendered":"Despliegue Automatizado de Angular a AWS S3"},"content":{"rendered":"\n<p style=\"background-color:#ffcfdb\" class=\"has-text-color has-background has-vivid-red-color\">Realizar la carga de archivos de esta manera, causa que los archivos js no se carguen con el MIME type adecuado lo que causa errores en los navegadores<\/p>\n\n\n\n<p><strong>Escenario:<\/strong><\/p>\n\n\n\n<p>Tenemos una aplicaci\u00f3n angular 9 hosteada en <a href=\"https:\/\/aws.amazon.com\/es\/s3\/\" target=\"_blank\" rel=\"noreferrer noopener\">AWS S3<\/a>, como un sitio web est\u00e1tico. Este sitio se encuentra tras <a href=\"https:\/\/aws.amazon.com\/es\/cloudfront\/\" target=\"_blank\" rel=\"noreferrer noopener\">AWS Cloudfront<\/a>, replicada alrededor del mundo.<\/p>\n\n\n\n<p><strong>Objetivo: <\/strong><\/p>\n\n\n\n<p>Automatizar del despliegue de una aplicaci\u00f3n,  es decir, la publicaci\u00f3n de la aplicaci\u00f3n, la carga de esta a un bucket S3 y la creaci\u00f3n de una invalidaci\u00f3n en cloudfront para actualizar la aplicaci\u00f3n. <\/p>\n\n\n\n<p><strong>Angular CLI:<\/strong><\/p>\n\n\n\n<p>Para empezar nos dirigimos al directorio de la aplicaci\u00f3n angular, y compilamos el proyecto con el siguiente comando:<\/p>\n\n\n\n<p class=\"has-text-color has-background has-light-green-cyan-color has-very-dark-gray-background-color\">ng build &#8211;prod<\/p>\n\n\n\n<p>El resultado de este comando se almacena en la carpeta <em>.\/dist\/proyecto<\/em>  <\/p>\n\n\n\n<p><strong>AWS CLI S3: <\/strong><\/p>\n\n\n\n<p>Para cargar la informaci\u00f3n en AWS, deberemos ejecutar el siguiente comando:<\/p>\n\n\n\n<p class=\"has-text-color has-background has-light-green-cyan-color has-very-dark-gray-background-color\">aws s3 cp .\/dist\/proyecto\/ s3:\/\/mi-bucket\/ &#8211;recursive<\/p>\n\n\n\n<p>Esto colocar\u00e1 el contenido compilado en la ruta base del bucket S3<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"510\" src=\"https:\/\/lmponceb.com\/wp-content\/uploads\/2020\/06\/image-14-1024x510.png\" alt=\"\" class=\"wp-image-46\" srcset=\"https:\/\/lmponceb.com\/wp-content\/uploads\/2020\/06\/image-14-1024x510.png 1024w, https:\/\/lmponceb.com\/wp-content\/uploads\/2020\/06\/image-14-300x149.png 300w, https:\/\/lmponceb.com\/wp-content\/uploads\/2020\/06\/image-14-768x383.png 768w, https:\/\/lmponceb.com\/wp-content\/uploads\/2020\/06\/image-14-1536x765.png 1536w, https:\/\/lmponceb.com\/wp-content\/uploads\/2020\/06\/image-14-2048x1020.png 2048w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><\/figure>\n\n\n\n<p><strong>AWS CLI Cloudfront:<\/strong><\/p>\n\n\n\n<p>Una vez cargada la informaci\u00f3n en el S3, es necesario crear una invalidaci\u00f3n en cloudfront para que se actualice la informaci\u00f3n a lo largo de la infraestructura AWS.<\/p>\n\n\n\n<p>Para hacer esto realizaremos el siguiente comando:<\/p>\n\n\n\n<p class=\"has-text-color has-background has-light-green-cyan-color has-very-dark-gray-background-color\">aws cloudfront create-invalidation &#8211;distribution-id CODIGODISTRIB &#8211;paths &#8220;\/*&#8221;<\/p>\n\n\n\n<p>Una vez hecho esto se eliminar\u00e1 el cache en las ubicaciones edge de Cloudfront, actualizando casi inmediatamente la aplicaci\u00f3n al p\u00fablico.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"476\" src=\"https:\/\/lmponceb.com\/wp-content\/uploads\/2020\/06\/image-16-1024x476.png\" alt=\"\" class=\"wp-image-50\" srcset=\"https:\/\/lmponceb.com\/wp-content\/uploads\/2020\/06\/image-16-1024x476.png 1024w, https:\/\/lmponceb.com\/wp-content\/uploads\/2020\/06\/image-16-300x140.png 300w, https:\/\/lmponceb.com\/wp-content\/uploads\/2020\/06\/image-16-768x357.png 768w, https:\/\/lmponceb.com\/wp-content\/uploads\/2020\/06\/image-16-1536x715.png 1536w, https:\/\/lmponceb.com\/wp-content\/uploads\/2020\/06\/image-16-2048x953.png 2048w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><figcaption>Pantalla de Invalidaciones de Cloudfront<\/figcaption><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Realizar la carga de archivos de esta manera, causa que los archivos js no se carguen con el MIME type adecuado lo que causa errores en los navegadores Escenario: Tenemos una aplicaci\u00f3n angular 9 hosteada en AWS S3, como un sitio web est\u00e1tico. Este sitio se encuentra tras AWS Cloudfront, replicada alrededor del mundo. Objetivo: &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/lmponceb.com\/index.php\/2020\/06\/11\/despliegue-automatizado-de-angular-a-aws-s3\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Despliegue Automatizado de Angular a AWS S3&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,7],"tags":[5,4],"class_list":["post-16","post","type-post","status-publish","format-standard","hentry","category-angular","category-aws","tag-angular","tag-aws"],"_links":{"self":[{"href":"https:\/\/lmponceb.com\/index.php\/wp-json\/wp\/v2\/posts\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lmponceb.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lmponceb.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lmponceb.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lmponceb.com\/index.php\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":9,"href":"https:\/\/lmponceb.com\/index.php\/wp-json\/wp\/v2\/posts\/16\/revisions"}],"predecessor-version":[{"id":63,"href":"https:\/\/lmponceb.com\/index.php\/wp-json\/wp\/v2\/posts\/16\/revisions\/63"}],"wp:attachment":[{"href":"https:\/\/lmponceb.com\/index.php\/wp-json\/wp\/v2\/media?parent=16"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lmponceb.com\/index.php\/wp-json\/wp\/v2\/categories?post=16"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lmponceb.com\/index.php\/wp-json\/wp\/v2\/tags?post=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}