Continuos Deployment su Azure App Service
Tags: azure, github, repos, bitbucket
Published: 2020-04-28 13:08:46

<!-- wp:heading {"level":1} -->
<h1>Introduzione</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Nel precedente articolo abbiamo introdotto brevemente il servizio Web App di Azure e i metodi più comuni per crearla (<a href="https://www.gaetanopaterno.it/2020/03/29/creare-unapp-web-su-azure/">link</a>).</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Il servizio Web App consente di creare, distribuire e ridimensionare rapidamente applicazioni Web, per dispositivi mobili e API di livello aziendale, in qualsiasi piattaforma e soddisfare rigorosi requisiti di prestazioni, scalabilità, sicurezza e conformità usando al contempo una piattaforma completamente gestita e manutenzionata.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Da questo articolo iniziamo ad approfondire le caratteristiche del servizio Web App partendo dal Centro distribuzione e dai metodi di continuos deployment del codice sorgente dell’applicazione web che stiamo sviluppando.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Per accedere al Centro distribuzione:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Nel <a href="https://portal.azure.com/">portale</a> di Azure cercare e selezionare <strong>Servizi app</strong> (App Services).</li><li>Selezionare il servizio app che di desidera distribuire.</li><li>Nella pagina dell’app selezionare <strong>Centro di distribuzione</strong> (Deployment Center) nel menu a sinistra.</li></ul>
<!-- /wp:list -->

<!-- wp:image {"align":"center","id":326,"width":368,"height":203,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="wp-block-image size-large is-style-zoooom"><img src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_01.jpg" alt="" class="wp-image-326" width="368" height="203"/></figure></div>
<!-- /wp:image -->

<!-- wp:heading {"level":1} -->
<h1>Componenti per la distribuzione</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>I tre componenti principali per la distribuzione del codice nel servizio Web App sono:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>L’origine di distribuzione:<br>Un’origine di distribuzione è il percorso dove risiede il codice dell’applicazione. Di solito l’origine di distribuzione è un repository ospitato dal software di controllo versione utilizzato dal team (ad esempio GitHub, BitBucket o Azure Repos). In scenari in cui il codice risiede su un computer locale o sul cloud, il servizio Web App supporta anche cartelle su OneDrive o Dropbox come origine di distribuzione.<br><img class="wp-image-327" style="width: 450px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_02.jpg" alt=""></li><li>Pipeline di compilazione:<br>Dopo aver scelto l’origine di distribuzione, il passaggio successivo sarà scegliere una Pipeline di compilazione che legga il codice sorgente e lo trasformi in codice eseguibile (ad esempio, Kudu, Azure Pipilines o GitHub Actions). Logicamente la scelta della pipeline dipende dallo stack del linguaggio e dai comandi specifici che possono eseguire (ad esempio la compilazione di codice, la modifica di HTML e JavaScript, l'esecuzione di test e la creazione di pacchetti di componenti).<br><img class="wp-image-341" style="width: 450px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_03.jpg" alt=""></li><li>Meccanismo di distrubizione:<br>Il meccanismo di distribuzione è l'azione utilizzata per inserire l'applicazione compilata nella directory /home/site/wwwroot della Web App. La directory /wwwroot è un percorso di archiviazione montato condiviso da tutte le istanze della Web App. Quando il meccanismo di distribuzione inserisce l'applicazione in questa directory, le istanze ricevono una notifica per sincronizzare i nuovi file. La Web App supporta meccanismi di continuos deployment o continuos delivery utilizzando pipeline, canali FTP o di WebDeploy.<br><figure class="wp-block-image size-large is-style-zoooom"><img class="wp-image-329" style="width: 800px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_04.jpg" alt=""></figure></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>A questo punto vediamo come è possibile distribuire l'applicazione nella Web App che ho creato con le seguenti caratteristiche:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Stack di runtime: .NET Core 2.1 (LTS).</li><li>Sistema operativo: Windows.</li><li>Area geografica: Central US.</li><li>SKU e dimensioni: Standard S1.</li></ul>
<!-- /wp:list -->

<!-- wp:image {"id":328,"sizeSlug":"large","className":"is-style-zoooom"} -->
<figure class="wp-block-image size-large is-style-zoooom"><img src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_05.jpg" alt="" class="wp-image-328"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":1} -->
<h1>Continuos Deployment (CI/CD)</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>L'App Service di Azure consente la distribuzione continua dai repository GitHub, BitBucket, Azure Repos o Local Git eseguendo gli aggiornamenti più recenti. Per utilizzare uno di questi repository basta autorizzare la Web App a connettersi al repository (è sufficiente autorizzare il servizio di controlle del codice sorgente una sola volta).</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><a href="https://azure.microsoft.com/it-it/services/devops/repos/">Azure Repos</a> e <a href="https://azure.microsoft.com/en-us/services/devops/pipelines/">Azure Pipelines</a></h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li>Selezionare <strong>Azure Repos</strong> come repository del codice sorgente e cliccare su <strong>continua</strong>.<br><img class="wp-image-330" style="width: 300px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_06.jpg" alt=""></li><li>Selezionare <strong>Azure Pipelines</strong> come provider di compilazione e cliccare su <strong>continua</strong>.<br><img class="wp-image-331" style="width: 300px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_07.jpg" alt=""></li><li>Configurare la distribuzione selezionando l’organizzazione, il progetto, il repository, il ramo e il framework di sviluppo dell’applicazione Web e cliccare su <strong>continua</strong>.<br><figure class="wp-block-image size-large is-style-zoooom"><img class="wp-image-332" style="width: 1172px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_08.jpg" alt=""></figure></li><li>Dopo aver verificato i parametri di configurazione della distribuzione, nella pagina di riepilogo cliccare su <strong>Fine</strong>.<br><figure class="wp-block-image size-large is-style-zoooom"><img class="wp-image-333" style="width: 1588px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_09.jpg" alt=""></figure></li><li>Cliccato su <strong>Fine</strong> partirà la <em>Configurazione della distribuzione</em>.<br><img class="wp-image-334" style="width: 450px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_10.jpg" alt=""></li><li>Alla fine della <em>Configurazione della distribuzione</em> vedremo la pagina del Centro distribuzione aggiornarsi e arricchirsi con tutti gli strumenti e le informazioni necessari per la gestione della distribuzione appena configurata.<br><figure class="wp-block-image size-large is-style-zoooom"><img class="wp-image-335" style="width: 1920px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_11.jpg" alt=""></figure></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Abbiamo così configurato una distribuzione in cui abbiamo utilizzato Azure Repos come repository e Azure Pipelines come Pipeline, ma il processo di <em>Configurazione della distribuzione</em> ha fatto molto di più di quello che sembra.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Su <strong>Azure DevOps</strong>, se apriamo il progetto che abbiamo selezionato durante la fase di configurazione della distruzione e nel menu a sinistra selezioniamo il servizio <strong>Pipelines</strong>, possiamo vedere che il configuratore a creato una pipeline per la compilazione del codice sorgente.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":336,"sizeSlug":"large","className":"is-style-zoooom"} -->
<figure class="wp-block-image size-large is-style-zoooom"><img src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_12.jpg" alt="" class="wp-image-336"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":337,"sizeSlug":"large","className":"is-style-zoooom"} -->
<figure class="wp-block-image size-large is-style-zoooom"><img src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_13.jpg" alt="" class="wp-image-337"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Ma non solo, nel menù di sinistra cliccando su <strong>Releases</strong> possiamo vedere che il configuratore ha anche creato una release per distribuire il codice compilato nella Web App.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":338,"sizeSlug":"large","className":"is-style-zoooom"} -->
<figure class="wp-block-image size-large is-style-zoooom"><img src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_14.jpg" alt="" class="wp-image-338"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":339,"sizeSlug":"large","className":"is-style-zoooom"} -->
<figure class="wp-block-image size-large is-style-zoooom"><img src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_15.jpg" alt="" class="wp-image-339"/></figure>
<!-- /wp:image -->

<!-- wp:image {"id":340,"sizeSlug":"large","className":"is-style-zoooom"} -->
<figure class="wp-block-image size-large is-style-zoooom"><img src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_16.jpg" alt="" class="wp-image-340"/></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2><a href="https://github.com/">GitHub</a> e <a href="https://github.com/features/actions">GitHub Actions</a></h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li>Selezionare <strong>Azure Repos</strong> come repository del codice sorgente e cliccare su <strong>continua</strong>.<br><img class="wp-image-342" style="width: 300px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_17.jpg" alt=""></li><li>Avendo già parlato precedentemente di Azure Pipelines, in questo caso selezioniamo <strong>GitHub Actions</strong> come provider di compilazione e cliccare su <strong>continua</strong>.<br><img class="wp-image-343" style="width: 300px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_18.jpg" alt=""></li><li>Configurare la distribuzione selezionando l’organizzazione, il repository, il ramo, lo stack di runtime e la versione con cui è sviluppata l’applicazione Web e cliccare su <strong>continua</strong>.<br><figure class="wp-block-image size-large is-style-zoooom"><img class="wp-image-344" style="width: 1211px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_19.jpg" alt=""></figure></li><li>Dopo aver verificato i parametri di configurazione della distribuzione e prima di cliccare su <strong>Fine</strong> nella pagina di riepilogo, vi voglio far notare che il configuratore ha preparato uno script per la creazione della action su GitHub.<br><figure class="wp-block-image size-large is-style-zoooom"><img class="wp-image-345" style="width: 1920px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_20.jpg" alt=""></figure><br><figure class="wp-block-image size-large is-style-zoooom"><img class="wp-image-346" style="width: 1533px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_21.jpg" alt=""></figure></li><li>Cliccato su <strong>Fine</strong> partirà la <em>Configurazione della distribuzione</em>.<br><img class="wp-image-347" style="width: 397px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_22.jpg" alt=""></li><li>Alla fine della <em>Configurazione della distribuzione</em> vedremo la pagina del Centro distribuzione aggiornarsi e arricchirsi con tutti gli strumenti e le informazioni necessari per la gestione della distribuzione appena configurata.<br><figure class="wp-block-image size-large is-style-zoooom"><img class="wp-image-348" style="width: 1920px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_23.jpg" alt=""></figure></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Abbiamo così configurato una distribuzione in cui abbiamo utilizzato GitHub come repository e GitHub Actions come Pipeline e anche in questo il processo di Configurazione della distribuzione ha fatto molto di più di quello che sembra, ma non del tutto.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Apriamo il portale di <a href="https://github.com/">GitHub</a> e selezioniamo il repository che contiene il codice sorgente dell’applicazione.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":349,"sizeSlug":"large","className":"is-style-zoooom"} -->
<figure class="wp-block-image size-large is-style-zoooom"><img src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_24.jpg" alt="" class="wp-image-349"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Possiamo subito notare che il configuratore a creato una cartella <strong>.github/workflows</strong> con all’interno il file <strong>master_serviceappwebtraining.yml</strong> che contiene la configurazione del flusso di lavoro dell’azione GitHub.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Nel menu in alto clicchiamo su <strong>Actions</strong>, sulla sinistra, nell’elenco dei Workflow, selezioniamo l’azione creata dal configuratore “<strong>Build and deploy ASP.Net Core app to Azure Web App – serviceappwebtraining”</strong> e vedremo che il job è fallito.<br><br><figure class="wp-block-image size-large is-style-zoooom"><img class="wp-image-350" style="width: 1920px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_25.jpg" alt=""></figure><br><br>Per capire il motivo per cui il job è fallito clicchiamo su job “<strong>Aggiunge o aggiorna la configurazione del flusso di lavoro…</strong>”&nbsp; e poi su “<strong>build-and-deploy</strong>” nel menu a sinistra.<br><br><figure class="wp-block-image size-large is-style-zoooom"><img class="wp-image-351" style="width: 1920px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_26.jpg" alt=""></figure></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Navigando nel log possiamo vedere che a fallire è stata la build perché nel file yml di flusso non è specificato il nome del progetto nei comandi <strong>dotnet build</strong> e <strong>dotnet publish</strong>. Non ci resta far altro che correggere il file yml nella cartella workflows, aggiungendo il nome del progetto “serviceappwebtraining”.<br><br><figure class="wp-block-image size-large is-style-zoooom"><img class="wp-image-352" style="width: 1920px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_27.jpg" alt=""></figure><br>Dopo aver committato la modifica partirà automaticamente un nuovo job che andrà a buon fine e il codice eseguibile verrà distribuito nella Web App.<br><br><figure class="wp-block-image size-large is-style-zoooom"><img class="wp-image-353" style="width: 1920px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_28.jpg" alt=""></figure></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><a href="https://bitbucket.org/">BitBucket</a></h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li>Selezionare <strong>BitBucket</strong> come repository del codice sorgente e cliccare su continua.<br><img class="wp-image-354" style="width: 300px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_29.jpg" alt=""></li><li>In questo caso non ci verrà chiesto il provider di compilazione perché Kudu è l’unica opzione al momento e verremo indirizzati direttamente allo step di configurazione della distribuzione. Configurare la distribuzione selezionando il team, il repository e il ramo e cliccare su <strong>continua</strong>.<br><figure class="wp-block-image size-large is-style-zoooom"><img class="wp-image-355" style="width: 1920px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_30.jpg" alt=""></figure></li><li>Dopo aver verificato i parametri di configurazione della distribuzione, nella pagina di riepilogo cliccare su <strong>Fine</strong>.<br><figure class="wp-block-image size-large is-style-zoooom"><img class="wp-image-356" style="width: 1920px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_31.jpg" alt=""></figure></li><li>Cliccato su <strong>Fine</strong> partirà la <em>Configurazione della distribuzione</em>.<br><img class="wp-image-357" style="width: 400px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_32.jpg" alt=""></li><li>Alla fine della <em>Configurazione della distribuzione</em> vedremo la pagina del Centro distribuzione aggiornarsi e arricchirsi con tutti gli strumenti e le informazioni necessari per la gestione della distribuzione appena configurata.<br><figure class="wp-block-image size-large is-style-zoooom"><img class="wp-image-358" style="width: 1920px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_33.jpg" alt=""></figure></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Se attendiamo qualche secondo potremmo vedere che Kudu andrà a recuperare il codice sorgente dal repository BitBucket, compilerà il codice sorgente e distribuirà il codice eseguibile nell’App Web. Cliccando nel menu in altro sul pulsante <strong>Sfoglia</strong> ci verrà aperto il browser con l’url dell’App Web.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Local Git e Azure Pipelines</h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li>Selezionare <strong>Local Git</strong> come repository del codice sorgente e cliccare su <strong>continua</strong>.<br><img class="wp-image-359" style="width: 300px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_34.jpg" alt=""></li><li>Avendo già parlato precedentemente di Azure Pipelines, in questo caso selezioniamo <strong>GitHub Actions</strong> come provider di compilazione e cliccare su <strong>continua</strong>.<br><img class="wp-image-331" style="width: 300px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_07.jpg" alt=""></li><li>Allo step di configurazione possiamo scegliere se utilizzare una nuova organizzazione di Azure DevOps oppure una esistente:<ul><li>Se scegliamo <strong>Nuovo</strong>, ci verrà richiesto il nome dell’organizzazione, il percorso di localizzazione e il framework di sviluppo dell’applicazione web.<br><figure class="wp-block-image size-large is-style-zoooom"><img class="wp-image-360" style="width: 1920px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_35.jpg" alt=""></figure></li></ul><ul><li>Se scegliamo <strong>Esistente</strong>, ci verrà richiesto l’organizzazione, il progetto e il framework di sviluppo dell’applicazione web.<br><figure class="wp-block-image size-large is-style-zoooom"><img class="wp-image-361" style="width: 1920px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_36.jpg" alt=""></figure></li></ul></li><li>Dopo aver cliccato su <strong>Continua</strong> e aver verificato i parametri di configurazione della distribuzione, nella pagina di riepilogo cliccare su <strong>Fine</strong>.<br><figure class="wp-block-image size-large is-style-zoooom"><img class="wp-image-362" style="width: 1920px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_37.jpg" alt=""></figure></li><li>Cliccato su <strong>Fine</strong> partirà la <em>Configurazione della distribuzione</em>.<br><img class="wp-image-363" style="width: 400px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_38.jpg" alt=""></li><li>Alla fine della <em>Configurazione della distribuzione</em> vedremo la pagina del Centro distribuzione aggiornarsi e arricchirsi con tutti gli strumenti e le informazioni necessari per la gestione della distribuzione appena configurata.<br><figure class="wp-block-image size-large is-style-zoooom"><img class="wp-image-325" style="width: 1920px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/04/distribuzione_automatizzata_39.jpg" alt=""></figure></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Abbiamo così configurato una distribuzione in cui, come nel primo punto, abbiamo utilizzato Azure Repos come repository e Azure Pipelines come Pipeline. Come nel primo punto se abbiamo utilizzato un progetto già esistente, il configuratore si sarà incaricato di creare le Pipeline di Build del codice sorgente e di Release del codice eseguibile; ma se abbiamo scelto di creare una nuova organizzazione il configuratore ha anche creato una nuova organizzazione e un nuovo progetto. In questo caso ho scelto la creazione di una nuova organizzazione, quindi il deploy è fallito perché il branch è vuoto. Al primo commit la distribuzione andrà a buon fine.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":1} -->
<h1>Conclusioni</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In questo 2° articolo su Azure App Service abbiamo visto i 4 casi di continuos deployment di un’applicazione web utilizzando delle Pipeline di CI/CD. Nel prossimo articolo vedremo i casi di manual deployment tramite FTP o WebDeploy.</p>
<!-- /wp:paragraph -->