{"id":772,"date":"2019-06-28T10:21:22","date_gmt":"2019-06-28T08:21:22","guid":{"rendered":"https:\/\/blog.besharp.it\/?p=772"},"modified":"2021-03-17T12:49:54","modified_gmt":"2021-03-17T11:49:54","slug":"continuous-delivery-di-un-sito-web-statico-con-aws-codebuild","status":"publish","type":"post","link":"https:\/\/blog.besharp.it\/it\/continuous-delivery-di-un-sito-web-statico-con-aws-codebuild\/","title":{"rendered":"Continuous delivery di un sito web statico con AWS CodeBuild"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Questo articolo \u00e8 il primo di una breve serie volta a illustrare vari possibili utilizzi dei servizi di Continuous Integration (CI) e Continuous Delivery (CD) offerti da AWS.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Una delle applicazioni pi\u00f9 comuni di uno stack di Continuous Delivery \u00e8 senza dubbio l\u2019automatizzazione del deploy di un sito web statico o del front-end JavaScript di una web app. Per l\u2019hosting dei contenuti statici, AWS offre una soluzione estremamente scalabile e potente: i file HTML e JavaScript del sito web possono essere caricati direttamente su S3, l\u2019object storage service di AWS, e distribuiti usando un URL fornita dalla stessa Amazon. \u00c8 ovviamente anche possibile usare un un domain name personale, andando semplicemente ad indicare degli Alias con Route 53, il servizio DNS di AWS.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Distribuire i contenuti statici di un sito web tramite S3 offre molti vantaggi rispetto al tradizionale hosting su un web server, in particolare:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Alta affidabilit\u00e0: i file salvati su S3 vengono ridondati su pi\u00f9 dischi distribuiti nella Region nella quale si \u00e8 scelto di creare il bucket. Questo garantisce una latenza di accesso ai file molto bassa, oltre ad un\u2019altissima durabilit\u00e0 e accessibilit\u00e0 dei contenuti memorizzati (rispettivamente 99.999999999% e 99.99%, su base annua)<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Scalabilit\u00e0: i contenuti possono essere distribuiti su scala globale in modo totalmente automatico tramite CloudFront, la Content Delivery Network di AWS, garantendo un tempo di latenza molto basso per l\u2019accesso ai file, indipendentemente dalla provenienza geografica dei visitatori del sito.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Tuttavia, caricare manualmente gli oggetti su un Bucket S3 pu\u00f2 risultare inefficiente e poco pratico per sviluppi relativamente grandi, come ad esempio per il front-end di una web app complessa, dove pi\u00f9 programmatori collaborano allo stesso progetto.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">La soluzione universalmente adottata per ovviare a questo tipo di inconveniente \u00e8 l\u2019utilizzo di una pipeline di Continuous Integration\/Delivery, che viene attivata in modo automatico nel momento in cui uno degli sviluppatori esegue un commit del codice da un version control system (e.g. Git, Subversion etc\u2026). Nel caso di contenuti statici, la pipeline \u00e8 particolarmente semplice, dato che non \u00e8 necessario compilare codice o gestire il deploy su un server: l\u2019unica operazione consiste semplicemente nel copiare i file dal repository al bucket S3. De fosse necessario, \u00e8 anche possibile eseguire dei test automatici sul codice per accertarsi del corretto funzionamento delle pagine web prima di aggiornare la versione presente su S3, per esempio utilizzando la libreria Selenium.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Di seguito verr\u00e0 analizzata la pipeline per il deploy di un sito statico partendo da un repository Git su Bitbucket. Questa pipeline si basa su due degli strumenti messi a disposizione da AWS: CodeBuild e Lambda Functions.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Lo schema concettuale della pipeline \u00e8 il seguente:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Il developer esegue il push di un commit su Bitbucket;<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Bitbucket viene configurato in modo da eseguire una chiamata POST ad un endpoint, per notificare che un push del codice \u00e8 stato eseguito con successo;<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Una funzione Lambda viene eseguita (tramite AWS ApiGateway) in risposta alla ricezione della chiamata POST effettuata di BitBucket, ed avvia l\u2019esecuzione di un progetto creato su AWS CodeBuild;<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">CodeBuild esegue un pull del codice da Bitbucket, esegue i test (se necessario) e la build del codice ed infine salva il codice del front-end su S3.<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-773 aligncenter\" src=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2019\/06\/codebuild-1024x576.png\" alt=\"\" width=\"1024\" height=\"576\" srcset=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2019\/06\/codebuild-1024x576.png 1024w, https:\/\/blog.besharp.it\/wp-content\/uploads\/2019\/06\/codebuild-400x225.png 400w, https:\/\/blog.besharp.it\/wp-content\/uploads\/2019\/06\/codebuild-768x432.png 768w, https:\/\/blog.besharp.it\/wp-content\/uploads\/2019\/06\/codebuild-1536x864.png 1536w, https:\/\/blog.besharp.it\/wp-content\/uploads\/2019\/06\/codebuild.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Abbiamo scelto di lanciare il processo di build usando una Lambda invece di usare il servizio di CodePipeline offerto da AWS: CodePipeline non ha infatti dei trigger pre-configurati per Bitbucket e dunque sarebbe stato necessario, sempre tramite una Lambda, scaricare i file da Bitbucket su un bucket S3 versionato che avremmo dovuto usare nello stadio di Source della pipeline. Tutto questo avrebbe allungato i tempi di esecuzione della Pipeline, in particolare in presenza di molti file piccoli, come spesso \u00e8 il caso per i progetti di front-end.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">I servizi di hosting di repository Git offerti da AWS (CodeCommit) e da GitHub hanno invece dei trigger pre-configurati per CodePipeline e, quindi, se si decide di avvalersi di uno di questi servizi per il processo di deploy dei file su S3, questo viene triggerato in modo automatico senza il bisogno di utilizzare una Lambda.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Se la nostra soluzione vi ha incuriositi e vorreste implementarla nel vostro flusso di lavoro, lasciate un commento o <a href=\"https:\/\/www.besharp.it\/contact-us\/\" target=\"_blank\" rel=\"noopener noreferrer\">contattateci<\/a>! Saremo felici di rispondere alle vostre domande, di raccogliere i vostri feedback e di aiutarvi a trarre il massimo vantaggio da questa applicazione.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Questo articolo \u00e8 il primo di una breve serie volta a illustrare vari possibili utilizzi dei servizi di Continuous Integration [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":775,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[241],"tags":[291,364,360],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.9.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Continuous delivery di un sito web statico con AWS CodeBuild - Proud2beCloud Blog<\/title>\n<meta name=\"description\" content=\"Creiamo una pipeline basata su AWS CodeBuild e Lambda Functions per il deploy di un sito statico partendo da un repository Git su Bitbucket.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blog.besharp.it\/it\/continuous-delivery-di-un-sito-web-statico-con-aws-codebuild\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Continuous delivery di un sito web statico con AWS CodeBuild\" \/>\n<meta property=\"og:description\" content=\"Creiamo una pipeline basata su AWS CodeBuild e Lambda Functions per il deploy di un sito statico partendo da un repository Git su Bitbucket.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blog.besharp.it\/it\/continuous-delivery-di-un-sito-web-statico-con-aws-codebuild\/\" \/>\n<meta property=\"og:site_name\" content=\"Proud2beCloud Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-28T08:21:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-03-17T11:49:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2019\/06\/copertine-blog-codebuild_Tavola-disegno-1-copia_Tavola-disegno-1-copia.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1667\" \/>\n\t<meta property=\"og:image:height\" content=\"1250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Alessio Gandini\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Continuous delivery di un sito web statico con AWS CodeBuild\" \/>\n<meta name=\"twitter:description\" content=\"Creiamo una pipeline basata su AWS CodeBuild e Lambda Functions per il deploy di un sito statico partendo da un repository Git su Bitbucket.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2019\/06\/copertine-blog-codebuild_Tavola-disegno-1-copia_Tavola-disegno-1-copia.png\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alessio Gandini\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.besharp.it\/it\/continuous-delivery-di-un-sito-web-statico-con-aws-codebuild\/\",\"url\":\"https:\/\/blog.besharp.it\/it\/continuous-delivery-di-un-sito-web-statico-con-aws-codebuild\/\",\"name\":\"Continuous delivery di un sito web statico con AWS CodeBuild - Proud2beCloud Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blog.besharp.it\/it\/#website\"},\"datePublished\":\"2019-06-28T08:21:22+00:00\",\"dateModified\":\"2021-03-17T11:49:54+00:00\",\"author\":{\"@id\":\"https:\/\/blog.besharp.it\/it\/#\/schema\/person\/e7262d28e51528c2e420327f9b18cd43\"},\"description\":\"Creiamo una pipeline basata su AWS CodeBuild e Lambda Functions per il deploy di un sito statico partendo da un repository Git su Bitbucket.\",\"breadcrumb\":{\"@id\":\"https:\/\/blog.besharp.it\/it\/continuous-delivery-di-un-sito-web-statico-con-aws-codebuild\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.besharp.it\/it\/continuous-delivery-di-un-sito-web-statico-con-aws-codebuild\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.besharp.it\/it\/continuous-delivery-di-un-sito-web-statico-con-aws-codebuild\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.besharp.it\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Continuous delivery di un sito web statico con AWS CodeBuild\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.besharp.it\/it\/#website\",\"url\":\"https:\/\/blog.besharp.it\/it\/\",\"name\":\"Proud2beCloud Blog\",\"description\":\"il blog di beSharp\",\"alternateName\":\"Proud2beCloud Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.besharp.it\/it\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.besharp.it\/it\/#\/schema\/person\/e7262d28e51528c2e420327f9b18cd43\",\"name\":\"Alessio Gandini\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/blog.besharp.it\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/eeb98518768d999bff24f8358b464fe2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/eeb98518768d999bff24f8358b464fe2?s=96&d=mm&r=g\",\"caption\":\"Alessio Gandini\"},\"description\":\"Cloud-native Development Line Manager @ beSharp, DevOps Engineer e AWS expert. Computer geek da quando avevo 6 anni, appassionato di informatica ed elettronica a tutto tondo. Ultimamente sto esplorando l'esperienza utente vocale e il mondo dell'IoT. Appassionato di cinema e grande consumatore di serie TV, videogiocatore della domenica.\",\"url\":\"https:\/\/blog.besharp.it\/it\/author\/alessio-gandini\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Continuous delivery di un sito web statico con AWS CodeBuild - Proud2beCloud Blog","description":"Creiamo una pipeline basata su AWS CodeBuild e Lambda Functions per il deploy di un sito statico partendo da un repository Git su Bitbucket.","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:\/\/blog.besharp.it\/it\/continuous-delivery-di-un-sito-web-statico-con-aws-codebuild\/","og_locale":"it_IT","og_type":"article","og_title":"Continuous delivery di un sito web statico con AWS CodeBuild","og_description":"Creiamo una pipeline basata su AWS CodeBuild e Lambda Functions per il deploy di un sito statico partendo da un repository Git su Bitbucket.","og_url":"https:\/\/blog.besharp.it\/it\/continuous-delivery-di-un-sito-web-statico-con-aws-codebuild\/","og_site_name":"Proud2beCloud Blog","article_published_time":"2019-06-28T08:21:22+00:00","article_modified_time":"2021-03-17T11:49:54+00:00","og_image":[{"width":1667,"height":1250,"url":"https:\/\/blog.besharp.it\/wp-content\/uploads\/2019\/06\/copertine-blog-codebuild_Tavola-disegno-1-copia_Tavola-disegno-1-copia.png","type":"image\/png"}],"author":"Alessio Gandini","twitter_card":"summary_large_image","twitter_title":"Continuous delivery di un sito web statico con AWS CodeBuild","twitter_description":"Creiamo una pipeline basata su AWS CodeBuild e Lambda Functions per il deploy di un sito statico partendo da un repository Git su Bitbucket.","twitter_image":"https:\/\/blog.besharp.it\/wp-content\/uploads\/2019\/06\/copertine-blog-codebuild_Tavola-disegno-1-copia_Tavola-disegno-1-copia.png","twitter_misc":{"Scritto da":"Alessio Gandini","Tempo di lettura stimato":"4 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.besharp.it\/it\/continuous-delivery-di-un-sito-web-statico-con-aws-codebuild\/","url":"https:\/\/blog.besharp.it\/it\/continuous-delivery-di-un-sito-web-statico-con-aws-codebuild\/","name":"Continuous delivery di un sito web statico con AWS CodeBuild - Proud2beCloud Blog","isPartOf":{"@id":"https:\/\/blog.besharp.it\/it\/#website"},"datePublished":"2019-06-28T08:21:22+00:00","dateModified":"2021-03-17T11:49:54+00:00","author":{"@id":"https:\/\/blog.besharp.it\/it\/#\/schema\/person\/e7262d28e51528c2e420327f9b18cd43"},"description":"Creiamo una pipeline basata su AWS CodeBuild e Lambda Functions per il deploy di un sito statico partendo da un repository Git su Bitbucket.","breadcrumb":{"@id":"https:\/\/blog.besharp.it\/it\/continuous-delivery-di-un-sito-web-statico-con-aws-codebuild\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.besharp.it\/it\/continuous-delivery-di-un-sito-web-statico-con-aws-codebuild\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blog.besharp.it\/it\/continuous-delivery-di-un-sito-web-statico-con-aws-codebuild\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.besharp.it\/it\/"},{"@type":"ListItem","position":2,"name":"Continuous delivery di un sito web statico con AWS CodeBuild"}]},{"@type":"WebSite","@id":"https:\/\/blog.besharp.it\/it\/#website","url":"https:\/\/blog.besharp.it\/it\/","name":"Proud2beCloud Blog","description":"il blog di beSharp","alternateName":"Proud2beCloud Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.besharp.it\/it\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/blog.besharp.it\/it\/#\/schema\/person\/e7262d28e51528c2e420327f9b18cd43","name":"Alessio Gandini","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/blog.besharp.it\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/eeb98518768d999bff24f8358b464fe2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eeb98518768d999bff24f8358b464fe2?s=96&d=mm&r=g","caption":"Alessio Gandini"},"description":"Cloud-native Development Line Manager @ beSharp, DevOps Engineer e AWS expert. Computer geek da quando avevo 6 anni, appassionato di informatica ed elettronica a tutto tondo. Ultimamente sto esplorando l'esperienza utente vocale e il mondo dell'IoT. Appassionato di cinema e grande consumatore di serie TV, videogiocatore della domenica.","url":"https:\/\/blog.besharp.it\/it\/author\/alessio-gandini\/"}]}},"_links":{"self":[{"href":"https:\/\/blog.besharp.it\/it\/wp-json\/wp\/v2\/posts\/772"}],"collection":[{"href":"https:\/\/blog.besharp.it\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.besharp.it\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.besharp.it\/it\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.besharp.it\/it\/wp-json\/wp\/v2\/comments?post=772"}],"version-history":[{"count":0,"href":"https:\/\/blog.besharp.it\/it\/wp-json\/wp\/v2\/posts\/772\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.besharp.it\/it\/wp-json\/wp\/v2\/media\/775"}],"wp:attachment":[{"href":"https:\/\/blog.besharp.it\/it\/wp-json\/wp\/v2\/media?parent=772"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.besharp.it\/it\/wp-json\/wp\/v2\/categories?post=772"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.besharp.it\/it\/wp-json\/wp\/v2\/tags?post=772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}