{"id":1300,"date":"2020-04-03T11:53:30","date_gmt":"2020-04-03T09:53:30","guid":{"rendered":"https:\/\/blog.besharp.it\/?p=1300"},"modified":"2021-03-17T15:13:20","modified_gmt":"2021-03-17T14:13:20","slug":"come-realizzare-una-pipeline-di-continuous-delivery-per-unapplicazione-front-end-angular","status":"publish","type":"post","link":"https:\/\/blog.besharp.it\/it\/come-realizzare-una-pipeline-di-continuous-delivery-per-unapplicazione-front-end-angular\/","title":{"rendered":"Come realizzare una pipeline di continuous delivery per un\u2019applicazione front-end Angular."},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Abbiamo gi\u00e0 scritto pi\u00f9 volte di <strong>continuous delivery<\/strong>, solitamente concentrandoci sulla parte di backend di un&#8217;applicazione. Naturalmente, le applicazioni web richiedono anche un <strong>front-end<\/strong>, quindi rendere il processo di implementazione della parte front-end <strong>agile<\/strong> e veloce \u00e8 cruciale per il successo di un progetto.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">In questo articolo, esporremo il \u200b\u200bprogetto completo per un&#8217;infrastruttura AWS in grado di supportare l\u2019<strong>hosting di un\u2019applicazione Angular<\/strong> completa di CDN, una funzione personalizzata per invalidare la cache e una pipeline di CD completamente automatizzata.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Questo progetto mira a soddisfare le best practises e fornir\u00e0 una soluzione solida, altamente scalabile e <strong>completamente gestita<\/strong> per l&#8217;hosting di applicazioni front-end su AWS.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Questa \u00e8 anche la soluzione pi\u00f9 ottimizzata in termini di costi che abbiamo trovato finora e consente di servire i contenuti statici in un modo altamente affidabile, performante ed economico.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">La nostra architettura \u00e8 suddivisa logicamente in 2 parti, l&#8217;<strong>hosting rivolto al cliente<\/strong> e l&#8217;<strong>infrastruttura di continuous delivery rivolta agli sviluppatori<\/strong>.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">I servizi<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Per l&#8217;hosting utilizzeremo i seguenti servizi AWS:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Un <strong>bucket S3<\/strong> per archiviare tutti i file front-end\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Una <strong>distribuzione CloudFront<\/strong> per servire il contenuto del bucket agli utenti finali\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>Route53<\/strong> per configurare e utilizzare un dominio personalizzato per l&#8217;applicazione\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\">Per l&#8217;infrastruttura rivolta agli sviluppatori saranno impiegati:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>CodeDeploy<\/strong> come repository Git privato<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>CodePipeline<\/strong> come orchestrator per la pipeline di CD<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><strong>CodeBuild<\/strong> per eseguire la build della soluzione Angular.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Una <strong>funzione Lambda<\/strong> personalizzata per creare un invalidazione sulla distribuzione CloudFront ad ogni deploy\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><\/li>\n<\/ul>\n<h2><span style=\"font-weight: 400;\">L&#8217;architettura<\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1296\" src=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/04\/architecture.png\" alt=\"architecture\" width=\"1600\" height=\"900\" srcset=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/04\/architecture.png 1600w, https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/04\/architecture-400x225.png 400w, https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/04\/architecture-1024x576.png 1024w, https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/04\/architecture-768x432.png 768w, https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/04\/architecture-1536x864.png 1536w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">Il diagramma mostra l&#8217;<strong>infrastruttura completa<\/strong>, mettendo in evidenza i trigger e le azioni che svolger\u00e0 la pipeline.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">L&#8217;hosting della soluzione \u00e8 basato su CloudFront, che consente di servire l&#8217;applicazione Angular in modo efficiente e affidabile. L&#8217;uso di CloudFront \u00e8 inoltre necessario per poter utilizzare <strong>HTTPS<\/strong> ed un dominio custom.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Le risorse compilate dell&#8217;applicazione front-end verranno archiviate in un bucket S3, utilizzato come origine per la distribuzione CloudFront. Consigliamo vivamente di mantenere privato il bucket S3, in questo modo nessun utente esterno sar\u00e0 in grado di accedere direttamente ai file, limitando i costi e le possibilit\u00e0 di exploit.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Abbiamo incluso Route53 nell&#8217;architettura perch\u00e9 \u00e8 il modo pi\u00f9 semplice per gestire i record DNS per il dominio, comunque, \u00e8 possibile utilizzare qualsiasi servizio DNS, purch\u00e9 sia \u200b\u200bpossibile aggiungere un record CNAME per l&#8217;applicazione front-end.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">La parte davvero interessante dell&#8217;architettura \u00e8 quella rivolta agli sviluppatori. I<strong>l cuore della soluzione \u00e8 CodePipeline<\/strong>, che usiamo come orchestratore per reagire alle modifiche apportate nel repository e passare i dati tra tutti i servizi utilizzati durante l&#8217;esecuzione della pipeline.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Abbiamo anche usato CodeCommit come repository per il codice dell&#8217;applicazione. Al momento della scrittura, CodePipeline supporta CodeCommit e GitHub. Per supportare altre configurazioni di repository Git sarebbe necessaria un&#8217;ulteriore personalizzazione della pipeline.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Per creare la soluzione Angular, sfruttiamo CodeBuild per eseguire automaticamente il provisioning di un container per il processo di compilazione.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Per accelerare l\u2019aggiornamento della distribuzione, ed evitare di attendere la scadenza di ciascun oggetto nella rete CDN, abbiamo incluso un <strong>passaggio Invoke<\/strong> alla fine della pipeline per eseguire una funzione Lambda che crea una richiesta di invalidazione per la distribuzione CloudFront.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">I passaggi della pipeline<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">La nostra pipeline sar\u00e0 composta da 4 passaggi, analizziamo il meccanismo della pipeline.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Source<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Questo passaggio \u00e8 completamente gestito da AWS CodePipeline. Questo step \u00e8 configurato per avviare automaticamente la pipeline quando viene rilevato un push in un ramo specifico, scaricare il codice sorgente, creare un archivio e inviarlo come artefatto per il passaggio successivo.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Build<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Lo step di compilazione richiede come input l&#8217;artefatto del codice sorgente del passaggio precedente.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">CodeBuild eseguir\u00e0 quindi il provisioning di un container per la build, scaricher\u00e0 il codice sorgente ed eseguir\u00e0 i comandi contenuti nel file buildspec.yml.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Il file yml deve essere archiviato nella radice del repository.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ecco un esempio di file <strong>buildspec.yml<\/strong> per un&#8217;applicazione Angular standard:<\/span><\/p>\n<pre>version: '0.2'\r\nphases:\r\n  install:\r\n    runtime-versions:\r\n      nodejs: 12\r\n  pre_build:\r\n    commands:\r\n      - echo \"Prebuild, installing npm dependencies\"\r\n      - npm install\r\n  build:\r\n    commands:\r\n      - echo \"Starting the build step\"\r\n      - npm run build\r\n      - echo \"Finished\"\r\nartifacts:\r\n  name: \"BuildOutput\"\r\n  files:\r\n    - '**\/*'\r\n  base-directory: 'dist'\r\n<\/pre>\n<p><span style=\"font-weight: 400;\">L&#8217;output del processo di build \u00e8 un archivio dei file e delle cartelle contenuti nella cartella dist.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Deploy<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Anche lo step di deploy \u00e8 completamente gestito, CodePipeline scompatter\u00e0 e copier\u00e0 su S3 tutti i file e le cartelle dell&#8217;archivio ottenuto in output dal processo di build.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Questa azione, al momento in cui scriviamo questo articolo, non \u00e8 in grado di eliminare i file da S3. Data la tipica struttura di un\u2019app Angular, questa limitazione non rappresenta solitamente un problema.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Tuttavia, \u00e8 importante tenere presente che se si desidera eliminare un file dal sito Web \u00e8 necessario aggiungere un passaggio per svuotare il bucket prima di procedere al nuovo deploy, oppure occorre aggiungere un apposito passaggio che elimina i file desiderati successivamente.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">CloudFront Invalidation<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">L&#8217;ultimo passaggio della pipeline richiama una funzione Lambda per creare un invalidazione per la distribuzione CloudFront. Creare l\u2019invalidazione consente agli utenti di ottenere la versione aggiornata dell\u2019applicazione pochi minuti dopo la distribuzione, invece di attendere la scadenza degli oggetti in ciascun nodo CDN che pu\u00f2 verificarsi in momenti diversi.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">La funzione lambda pu\u00f2 utilizzare l&#8217;SDK AWS per creare l&#8217;invalidazione. Questa funzione deve inoltre informare CodePipeline ogni volta che riscontra errori o termina con successo utilizzando un&#8217;API specifica di CodePipeline. Ecco un esempio lambda per invalidare completamente una distribuzione CloudFront e quindi notificare a CodePipeline il risultato:<\/span><\/p>\n<pre>import boto3\r\nimport os\r\n \r\nfrom botocore.exceptions import ClientError\r\n \r\ncloudfront_client = boto3.client('cloudfront')\r\ncodepipeline_client = boto3.client('codepipeline')\r\n \r\n \r\ndef lambda_handler(event, context):\r\n   try:\r\n       cdn_id = os.environ[\"CDN\"]\r\n       cloudfront_client.create_invalidation(\r\n           DistributionId=cdn_id,\r\n           InvalidationBatch={\r\n               'Paths': {\r\n                   'Quantity': 1,\r\n                   'Items': [\r\n                       '\/*'\r\n                   ],\r\n               },\r\n               'CallerReference': event['CodePipeline.job']['id']\r\n           }\r\n       )\r\n \r\n       codepipeline_client.put_job_success_result(jobId=event['CodePipeline.job']['id'])\r\n   except ClientError as e:\r\n       print(\"Boto3 exception\", e)\r\n       codepipeline_client.put_job_failure_result(\r\n           jobId=event['CodePipeline.job']['id'],\r\n           failureDetails={\r\n               'type': 'JobFailed',\r\n               'message': e.response\r\n           })\r\n   except Exception as e:\r\n       print(\"Error\", e)\r\n       codepipeline_client.put_job_failure_result(\r\n           jobId=event['CodePipeline.job']['id'],\r\n           failureDetails={\r\n               'type': 'JobFailed',\r\n               'message': e.args\r\n           })\r\n<\/pre>\n<h2><span style=\"font-weight: 400;\">Come costruire la soluzione<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Di seguito \u00e8 riportato un elenco di operazioni da seguire per creare la soluzione. Si noti che questo non \u00e8 un tutorial di tipo copia-incolla, ma fornisce il giusto ordine per ogni operazione da eseguire e una breve descrizione per ciascuno dei passi.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Prima di iniziare, assicurarsi di disporre del codice sorgente in un repository CodeCommit e di avere pieno accesso all&#8217;account per creare e configurare ciascun servizio della soluzione.<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Innanzitutto, \u00e8 necessario creare un bucket S3 privato per il front-end.<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Segui la procedura guidata, assicurati di selezionare le opzioni per rendere privato il bucket.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Non \u00e8 necessario scegliere il nome del bucket come il nome di dominio completo (FQDN) dell\u2019applicazione perch\u00e9 serviremo il contenuto utilizzando CloudFront<\/span><\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Crea una distribuzione CloudFront.<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Seleziona il bucket creato nel primo passaggio come origine.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Seleziona l&#8217;opzione per consentire a CloudFront di gestire la bucket policy, in questo modo la procedura guidata creer\u00e0 una policy perfettamente sicura e valida per il bucket, che consente alla distribuzione di servirne i contenuti mantenendo il bucket privato allo stesso tempo.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Reindirizzare tutti gli errori alla pagina index, questo \u00e8 fondamentale per il funzionamento del router di Angular.<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>NOTA: <\/b><span style=\"font-weight: 400;\">se non state creando l&#8217;infrastruttura nella regione us-east-1, attendete fino a 2 ore dopo il deploy prima di testarla. Ci\u00f2 \u00e8 dovuto al modo in cui funziona la propagazione dei DNS tra S3 e CloudFront al momento in cui stiamo scrivendo. Un bucket S3 appena creato, in qualsiasi altra region AWS, produce un redirect http temporaneo che impedisce la corretta integrazione dei due servizi. Una volta atteso il TTL la soluzione funzioner\u00e0 correttamente senza alcuna modifica.<\/span><\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Creare la funzione Lambda per invalidare la CDN.<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Puoi copiare e incollare il codice dell&#8217;esempio sopra.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Se si utilizza il codice di esempio, aggiungere una variabile di ambiente denominata &#8220;CDN&#8221; e valorizzarla con l&#8217;id della distribuzione CloudFront.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Assicurati di creare un nuovo ruolo IAM per la funzione, con tutte le autorizzazioni del ruolo BasicLambdaExecution, oltre a:<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">cloudfront: CreateInvalidatio<\/span><span style=\"font-weight: 400;\">n sulla distribuzione CloudFront<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">codepipeline: PutJobSuccessResult <\/span><span style=\"font-weight: 400;\">su *<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">codepipeline: PutJobFailureResult <\/span><span style=\"font-weight: 400;\">su *<\/span><\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Prendi nota del nome della funzione Lambda e dell&#8217;ARN per dopo.<\/span><\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Crea una nuova CodePipeline<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Seguire la procedura guidata e aggiungere lo step di source, selezionare il repository CodeCommit e il ramo git desiderato.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Aggiungi uno step di build, crea un nuovo progetto CodeBuild seguendo la procedura guidata<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Seleziona un&#8217;immagine standard di Ubuntu<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Creare o selezionare un ruolo di servizio CodeBuild standard<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Lasciare tutte le impostazioni predefinite e proseguire<\/span><\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Aggiungi uno step di deploy<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Seleziona deploy S3<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Segui la procedura guidata per configurarlo in modo da inviare l&#8217;output di generazione sul bucket del front-end<\/span><\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Infine, aggiungi l&#8217;ultimo passaggio, scegli Invoke -&gt; AWS Lambda<\/span>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Seleziona la funzione Lambda creata nel passaggio precedente<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Lascia tutti i parametri al loro valore predefinito<\/span><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Completa la creazione della pipeline e testala. La pipeline dovrebbe avviarsi non appena si completa la creazione.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\"><strong>Complimenti!<\/strong> Hai completato l&#8217;implementazione della soluzione! Ora dovresti avere un hosting Angular completamente funzionale, completo di una pipeline di CD.<\/span><\/p>\n<p>Siete interessanti all&#8217;argomento?<\/p>\n<p>Leggete anche<\/p>\n<ul>\n<li><a href=\"https:\/\/blog.besharp.it\/pipelines-di-cd-ci-cross-account-con-aws-codepipeline\/\" target=\"_blank\" rel=\"noopener noreferrer\">Pipelines di CD\/CI cross-account con AWS CodePipeline<\/a><\/li>\n<li><a href=\"https:\/\/blog.besharp.it\/come-creare-ci-cd-pipeline-flessibili-su-aws-con-fargate-e-sqs\/\" target=\"_blank\" rel=\"noopener noreferrer\">Come creare CI\/CD Pipeline flessibili su AWS con Fargate e SQS<\/a><\/li>\n<li><a href=\"https:\/\/blog.besharp.it\/creare-e-mantenere-uninfrastruttura-aws-serverless-con-troposphere-e-codepipeline\/\" target=\"_blank\" rel=\"noopener noreferrer\">Creare e mantenere un\u2019infrastruttura AWS Serverless con Troposphere e CodePipeline<\/a><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Commentate l&#8217;articolo o <a href=\"https:\/\/www.besharp.it\/contact-us\/\" target=\"_blank\" rel=\"noopener noreferrer\">scriveteci<\/a> per approfondire l&#8217;argomento!\u00a0<\/span><\/p>\n<p>Arrivederci al prossimo articolo!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Abbiamo gi\u00e0 scritto pi\u00f9 volte di continuous delivery, solitamente concentrandoci sulla parte di backend di un&#8217;applicazione. Naturalmente, le applicazioni web [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":1298,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[241],"tags":[289,356,275,291,293,285,263,364,297,295,299],"class_list":{"0":"post-1300","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-devops","8":"tag-amazon-route-53","9":"tag-aws-cloudformation","11":"tag-aws-codebuild","12":"tag-aws-codedeploy","13":"tag-aws-codepipeline","14":"tag-aws-lambda","15":"tag-ci-cd","16":"tag-continuous-deployment","17":"tag-continuous-integration","18":"tag-how-to"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Come realizzare una pipeline di continuous delivery per un\u2019applicazione front-end Angular. - Proud2beCloud Blog<\/title>\n<meta name=\"description\" content=\"hosting di un\u2019applicazione Angular completa di CDN, di una funzione personalizzata per invalidare la cache e una pipeline di CD completamente automatizzata.\" \/>\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\/come-realizzare-una-pipeline-di-continuous-delivery-per-unapplicazione-front-end-angular\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Realizzare una pipeline di continuous delivery per un\u2019applicazione front-end Angular.\" \/>\n<meta property=\"og:description\" content=\"hosting di un\u2019applicazione Angular completa di CDN, di una funzione personalizzata per invalidare la cache e una pipeline di CD completamente automatizzata.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blog.besharp.it\/it\/come-realizzare-una-pipeline-di-continuous-delivery-per-unapplicazione-front-end-angular\/\" \/>\n<meta property=\"og:site_name\" content=\"Proud2beCloud Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-03T09:53:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-03-17T14:13:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/04\/copertine-blog-angular-29.png\" \/>\n\t<meta property=\"og:image:width\" content=\"834\" \/>\n\t<meta property=\"og:image:height\" content=\"625\" \/>\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=\"Realizzare una pipeline di continuous delivery per un\u2019applicazione front-end Angular.\" \/>\n<meta name=\"twitter:description\" content=\"hosting di un\u2019applicazione Angular completa di CDN, di una funzione personalizzata per invalidare la cache e una pipeline di CD completamente automatizzata.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/04\/copertine-blog-angular-29.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=\"8 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog.besharp.it\/it\/come-realizzare-una-pipeline-di-continuous-delivery-per-unapplicazione-front-end-angular\/\",\"url\":\"https:\/\/blog.besharp.it\/it\/come-realizzare-una-pipeline-di-continuous-delivery-per-unapplicazione-front-end-angular\/\",\"name\":\"Come realizzare una pipeline di continuous delivery per un\u2019applicazione front-end Angular. - Proud2beCloud Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blog.besharp.it\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/blog.besharp.it\/it\/come-realizzare-una-pipeline-di-continuous-delivery-per-unapplicazione-front-end-angular\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/blog.besharp.it\/it\/come-realizzare-una-pipeline-di-continuous-delivery-per-unapplicazione-front-end-angular\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/04\/copertine-blog-angular-29.png\",\"datePublished\":\"2020-04-03T09:53:30+00:00\",\"dateModified\":\"2021-03-17T14:13:20+00:00\",\"author\":{\"@id\":\"https:\/\/blog.besharp.it\/it\/#\/schema\/person\/e7262d28e51528c2e420327f9b18cd43\"},\"description\":\"hosting di un\u2019applicazione Angular completa di CDN, di una funzione personalizzata per invalidare la cache e una pipeline di CD completamente automatizzata.\",\"breadcrumb\":{\"@id\":\"https:\/\/blog.besharp.it\/it\/come-realizzare-una-pipeline-di-continuous-delivery-per-unapplicazione-front-end-angular\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.besharp.it\/it\/come-realizzare-una-pipeline-di-continuous-delivery-per-unapplicazione-front-end-angular\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/blog.besharp.it\/it\/come-realizzare-una-pipeline-di-continuous-delivery-per-unapplicazione-front-end-angular\/#primaryimage\",\"url\":\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/04\/copertine-blog-angular-29.png\",\"contentUrl\":\"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/04\/copertine-blog-angular-29.png\",\"width\":834,\"height\":625,\"caption\":\"ully automated CD pipeline for an Angular\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.besharp.it\/it\/come-realizzare-una-pipeline-di-continuous-delivery-per-unapplicazione-front-end-angular\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog.besharp.it\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Come realizzare una pipeline di continuous delivery per un\u2019applicazione front-end Angular.\"}]},{\"@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\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"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":"Come realizzare una pipeline di continuous delivery per un\u2019applicazione front-end Angular. - Proud2beCloud Blog","description":"hosting di un\u2019applicazione Angular completa di CDN, di una funzione personalizzata per invalidare la cache e una pipeline di CD completamente automatizzata.","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\/come-realizzare-una-pipeline-di-continuous-delivery-per-unapplicazione-front-end-angular\/","og_locale":"it_IT","og_type":"article","og_title":"Realizzare una pipeline di continuous delivery per un\u2019applicazione front-end Angular.","og_description":"hosting di un\u2019applicazione Angular completa di CDN, di una funzione personalizzata per invalidare la cache e una pipeline di CD completamente automatizzata.","og_url":"https:\/\/blog.besharp.it\/it\/come-realizzare-una-pipeline-di-continuous-delivery-per-unapplicazione-front-end-angular\/","og_site_name":"Proud2beCloud Blog","article_published_time":"2020-04-03T09:53:30+00:00","article_modified_time":"2021-03-17T14:13:20+00:00","og_image":[{"width":834,"height":625,"url":"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/04\/copertine-blog-angular-29.png","type":"image\/png"}],"author":"Alessio Gandini","twitter_card":"summary_large_image","twitter_title":"Realizzare una pipeline di continuous delivery per un\u2019applicazione front-end Angular.","twitter_description":"hosting di un\u2019applicazione Angular completa di CDN, di una funzione personalizzata per invalidare la cache e una pipeline di CD completamente automatizzata.","twitter_image":"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/04\/copertine-blog-angular-29.png","twitter_misc":{"Scritto da":"Alessio Gandini","Tempo di lettura stimato":"8 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.besharp.it\/it\/come-realizzare-una-pipeline-di-continuous-delivery-per-unapplicazione-front-end-angular\/","url":"https:\/\/blog.besharp.it\/it\/come-realizzare-una-pipeline-di-continuous-delivery-per-unapplicazione-front-end-angular\/","name":"Come realizzare una pipeline di continuous delivery per un\u2019applicazione front-end Angular. - Proud2beCloud Blog","isPartOf":{"@id":"https:\/\/blog.besharp.it\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blog.besharp.it\/it\/come-realizzare-una-pipeline-di-continuous-delivery-per-unapplicazione-front-end-angular\/#primaryimage"},"image":{"@id":"https:\/\/blog.besharp.it\/it\/come-realizzare-una-pipeline-di-continuous-delivery-per-unapplicazione-front-end-angular\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/04\/copertine-blog-angular-29.png","datePublished":"2020-04-03T09:53:30+00:00","dateModified":"2021-03-17T14:13:20+00:00","author":{"@id":"https:\/\/blog.besharp.it\/it\/#\/schema\/person\/e7262d28e51528c2e420327f9b18cd43"},"description":"hosting di un\u2019applicazione Angular completa di CDN, di una funzione personalizzata per invalidare la cache e una pipeline di CD completamente automatizzata.","breadcrumb":{"@id":"https:\/\/blog.besharp.it\/it\/come-realizzare-una-pipeline-di-continuous-delivery-per-unapplicazione-front-end-angular\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.besharp.it\/it\/come-realizzare-una-pipeline-di-continuous-delivery-per-unapplicazione-front-end-angular\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/blog.besharp.it\/it\/come-realizzare-una-pipeline-di-continuous-delivery-per-unapplicazione-front-end-angular\/#primaryimage","url":"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/04\/copertine-blog-angular-29.png","contentUrl":"https:\/\/blog.besharp.it\/wp-content\/uploads\/2020\/04\/copertine-blog-angular-29.png","width":834,"height":625,"caption":"ully automated CD pipeline for an Angular"},{"@type":"BreadcrumbList","@id":"https:\/\/blog.besharp.it\/it\/come-realizzare-una-pipeline-di-continuous-delivery-per-unapplicazione-front-end-angular\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog.besharp.it\/it\/"},{"@type":"ListItem","position":2,"name":"Come realizzare una pipeline di continuous delivery per un\u2019applicazione front-end Angular."}]},{"@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":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"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\/1300","targetHints":{"allow":["GET"]}}],"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=1300"}],"version-history":[{"count":0,"href":"https:\/\/blog.besharp.it\/it\/wp-json\/wp\/v2\/posts\/1300\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.besharp.it\/it\/wp-json\/wp\/v2\/media\/1298"}],"wp:attachment":[{"href":"https:\/\/blog.besharp.it\/it\/wp-json\/wp\/v2\/media?parent=1300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.besharp.it\/it\/wp-json\/wp\/v2\/categories?post=1300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.besharp.it\/it\/wp-json\/wp\/v2\/tags?post=1300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}