Creare una Web App su Azure App Service
Tags: azure, appservice, vscode, cloud
Published: 2020-04-28 13:03:50

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

<!-- wp:paragraph -->
<p>La creazione di un sito web richiede un insieme di considerazioni riguardanti la "posizione" su cui andremo a pubblicarlo. Si parla di infrastruttura server, hardware appropriato, sistema operativo e un elenco di tecnologie per lo hosting. Possiamo operare in due modi: distribuirlo su un server "locale" oppure sfruttare i servizi di Microsoft Azure.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Le possibilità</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Nel primo caso, vi è da investire sulla parte hardware al fine di avere un server sempre efficiente, e quindi attivo, raggiungibile e dalle buone performance al variare del traffico. Senza tutti questi accorgimenti un sito web non potrà mai essere pienamente fruibile dagli utenti finali. Nel secondo caso, utilizzando una Web App su Azure App Service, avremo una gestione decisamente più semplice.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Azure App Service 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>In questo primo articolo vedremo come creare una Web App su App Service utilizzando il portale di Azure, Visual Studio 2019, Visual Studio Code o Azure Cloud Shell.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Creare una Web App nel portale di Azure</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Azure App Service è un servizio per l'hosting di applicazioni Web, API REST e back-end mobili, basato su HTTP. È possibile usare il linguaggio di sviluppo preferito tra .NET, .NET Core, Java, Ruby, Node.js, PHP o Python e le applicazioni vengono eseguite e ridimensionate con facilità in ambienti basati sia su Windows che su Linux.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Per creare una Web App accedere al <a href="https://portal.azure.com/">portale di Azure</a>:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":271,"width":602,"height":306,"sizeSlug":"full","className":"is-style-zoooom"} -->
<div class="wp-block-image is-style-zoooom"><figure class="aligncenter size-full is-resized"><img src="http://www.gaetanopaterno.it/wp-content/uploads/2020/03/CreateAzureAppWebFig01.jpg" alt="" class="wp-image-271" width="602" height="306"/></figure></div>
<!-- /wp:image -->

<!-- wp:list -->
<ul><li>Nel menu del
portale di Azure o nella <strong>home page</strong> selezionare <strong>Crea una risorsa</strong>.</li><li>Nel portale
viene visualizzata la pagina <strong>Marketplace</strong>. Da qui è possibile cercare la
risorsa da creare oppure selezionare una delle risorse più comuni create da
altri utenti nel portale di Azure.</li></ul>
<!-- /wp:list -->

<!-- wp:list -->
<ul><li>Selezionare <strong>Web</strong> &gt; <strong>Web App</strong> (App Web) per accedere al wizard di creazione. <br><figure class="wp-block-image size-large is-style-zoooom"><img class="wp-image-272" style="width: 602px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/03/CreateAzureAppWebFig02.jpg" alt=""></figure></li></ul>
<!-- /wp:list -->

<!-- wp:list -->
<ul><li>Compilare la procedura guidata.<br><figure class="wp-block-image size-large is-style-zoooom"><img class="wp-image-273" style="width: 602px;" src="https://www.gaetanopaterno.it/wp-content/uploads/2020/03/CreateAzureAppWebFig03.jpg" alt=""></figure></li><li>Selezionare <strong>Rivedi e crea</strong> per passare alla pagina di revisione e quindi selezionare <strong>Crea</strong> per creare l'app. In pochi secondi la Web App sarà predisporla e pronta per l'uso.</li></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":3} -->
<h3>Accesso alla Web App</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Quando l'app è pronta, ecco come accedere:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Nel menu del portale di Azure o nella <strong>home page</strong> selezionare <strong>Tutte le risorse</strong>.</li><li>Selezione la Web App dall’elenco.</li><li>Il portale visualizzerà la pagina di panoramica della Web App.</li></ul>
<!-- /wp:list -->

<!-- wp:image {"align":"center","id":274,"sizeSlug":"large","className":"is-style-zoooom"} -->
<div class="wp-block-image is-style-zoooom"><figure class="aligncenter size-large"><img src="http://www.gaetanopaterno.it/wp-content/uploads/2020/03/CreateAzureAppWebFig04.jpg" alt="" class="wp-image-274"/></figure></div>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>Creare una Web App con Visual Studio 2019</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Se si sta sviluppando un’applicazione web con i framework .Net Core o .Net Framework in Visual Studio 2019, è possibile creare una Web App su Azure durante la pubblicazione dell’applicazione.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":275,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://www.gaetanopaterno.it/wp-content/uploads/2020/03/CreateAzureAppWebFig05.jpg" alt="" class="wp-image-275"/></figure></div>
<!-- /wp:image -->

<!-- wp:list -->
<ul><li>In <strong>Solution Explorer</strong> cliccare con il pulsante destro del mouse sul progetto myFirstAzureWebApp e scegliere <strong>Publish</strong>.</li><li>Scegliere <strong>App Service</strong> (Servizio App) e quindi cliccare su <strong>Create Profile</strong>.<br>Attenzione! Se stiamo pubblicando un’applicazione web sviluppata con .Net Core possiamo selezionare sia il <strong>App Service</strong>, servizio distribuito in un’ambiente con sistema operativo Windows, che il <strong>App Service Linux</strong>, servizio distribuito in un’ambiente con sistema operativo Linux; invece se l’applicazione web è sviluppata con .Net Framework, è possibile solo selezionare il <strong>App Service</strong> (Windows).</li></ul>
<!-- /wp:list -->

<!-- wp:image {"align":"center","id":276,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://www.gaetanopaterno.it/wp-content/uploads/2020/03/CreateAzureAppWebFig06.jpg" alt="" class="wp-image-276"/></figure></div>
<!-- /wp:image -->

<!-- wp:list -->
<ul><li>Nella finestra di dialogo completare i campi obbligatori, in particolare:<ul><li>In <strong>Name </strong>immettere un nome univoco per la web app che includa solo i caratteri validi, ossia a-z, A-Z, 0-9 e - oppure è possibile accettare il nome univoco generato automaticamente. L'URL dell'app Web è http://&lt;app_name&gt;.azurewebsites.net, dove &lt;app_name&gt; è il nome dell'app. </li></ul><ul><li>In <strong>Resources group</strong> è possibile selezionare un gruppo esistente o crearne uno nuovo.</li></ul><ul><li>In <strong>Hosting Plan</strong> è possibile selezionare un piano esistente o crearne uno nuovo. <br>I piani di servizio app definiscono:<ul><li>Area (ad esempio Europa settentrionale, Stati Uniti orientali o Asia sud-orientale)</li></ul><ul><li>Dimensione dell'istanza (Small, Medium o Large)</li></ul><ul><li>Numero di scala (da 1 a 20 istanze)</li></ul><ul><li>SKU (Gratuito, Condiviso, Basic, Standard o Premium)</li></ul></li><li>Se creiamo un nuovo <strong>Hosting Plan</strong>, nella finestra di dialogo immettere i valori come nell’immagine seguente e quindi scegliere OK.</li></ul></li></ul>
<!-- /wp:list -->

<!-- wp:image {"align":"center","id":277,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://www.gaetanopaterno.it/wp-content/uploads/2020/03/CreateAzureAppWebFig07.jpg" alt="" class="wp-image-277"/></figure></div>
<!-- /wp:image -->

<!-- wp:list -->
<ul><li>Selezionare <strong>Create </strong>per avviare la creazione delle risorse di Azure.<br> Al termine della procedura guidata, l'app viene pubblicata in Azure e avviata nel browser predefinito.</li></ul>
<!-- /wp:list -->

<!-- wp:heading -->
<h2>Creare una Web App con Visual Studio Code</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Se si sta sviluppando un’applicazione web con Node.js e Visual Studio Code, indipendentemente dal sistema Windows o Linux, possiamo utilizzare l’<strong><a href="vscode:extension/ms-azuretools.vscode-azureappservice">Estensione Servizio app di Azure</a></strong> di Visual Studio Code per creare una nuova Web App su Azure.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Sulla barra delle attività di VS Code fare clic
sul logo di Azure per visualizzare Esplora risorse del <strong>SERVIZIO APP DI AZURE</strong>.
Selezionare <strong>Accedi ad Azure</strong> e seguire le istruzioni.<br>
</li></ul>
<!-- /wp:list -->

<!-- wp:image {"align":"center","id":278,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://www.gaetanopaterno.it/wp-content/uploads/2020/03/CreateAzureAppWebFig08.jpg" alt="" class="wp-image-278"/></figure></div>
<!-- /wp:image -->

<!-- wp:list -->
<ul><li>Una volta effettuato l'accesso, lo strumento di
esplorazione visualizzerà il nome della sottoscrizione di Azure. Selezionare
l'icona della freccia verso l'alto blu per distribuire l'app in Azure. È anche
possibile richiamare lo stesso comando dal <strong>riquadro comandi (CTRL+MAIUSC+P)</strong>
digitando 'Distribuisci nell'app Web' e scegliendo <strong>Servizio app di Azure:
Distribuisci nell'app Web</strong>.<br>
</li></ul>
<!-- /wp:list -->

<!-- wp:image {"align":"center","id":279,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://www.gaetanopaterno.it/wp-content/uploads/2020/03/CreateAzureAppWebFig09.jpg" alt="" class="wp-image-279"/></figure></div>
<!-- /wp:image -->

<!-- wp:list -->
<ul><li> Scegliere la cartella nodejs-docs-hello-world. </li></ul>
<!-- /wp:list -->

<!-- wp:image {"align":"center","id":280,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://www.gaetanopaterno.it/wp-content/uploads/2020/03/CreateAzureAppWebFig10.jpg" alt="" class="wp-image-280"/></figure></div>
<!-- /wp:image -->

<!-- wp:list -->
<ul><li>Scegliere un'opzione di creazione in base al sistema operativo in cui eseguire la distribuzione:<ul><li>Linux: Scegliere <strong>Crea una nuova app Web</strong></li></ul><ul><li>Windows: Scegliere <strong>Crea una nuova app Web... Impostazioni avanzate</strong></li></ul></li></ul>
<!-- /wp:list -->

<!-- wp:image {"align":"center","id":281,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://www.gaetanopaterno.it/wp-content/uploads/2020/03/CreateAzureAppWebFig11.jpg" alt="" class="wp-image-281"/></figure></div>
<!-- /wp:image -->

<!-- wp:list -->
<ul><li>Digitare un nome univoco a livello globale per
l'app Web e premere <strong>INVIO</strong>. Il nome deve essere univoco in tutte le
risorse di Azure e usare solo caratteri alfanumerici (' A-Z ',' a-z ' è 0-9') e
trattini ('-').</li></ul>
<!-- /wp:list -->

<!-- wp:image {"align":"center","id":282,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://www.gaetanopaterno.it/wp-content/uploads/2020/03/CreateAzureAppWebFig12.jpg" alt="" class="wp-image-282"/></figure></div>
<!-- /wp:image -->

<!-- wp:list -->
<ul><li>Selezionare il runtime di esecuzione dell’app:<ul><li>Se la destinazione è Linux, selezionare una
versione di Node.js quando richiesto. È consigliabile usare una versione <strong>LTS</strong>.</li></ul><ul><li>Se la destinazione è Windows, seguire le
istruzioni aggiuntive:<ul><li>Selezionare <strong>Creare un nuovo gruppo di risorse</strong>,
quindi immettere un nome per il gruppo di risorse, ad esempio AppServiceQS-rg.</li></ul><ul><li>Selezionare <strong>Windows</strong> come sistema
operativo.</li></ul><ul><li>Selezionare <strong>Crea nuovo piano di servizio app</strong>,
quindi immettere un nome per il piano, ad esempio AppServiceQS-plan, quindi
selezionare il piano tariffario <strong>F1 Gratuito</strong>.</li></ul><ul><li>Scegliere <strong>Ignora per adesso</strong> quando viene
richiesto riguardo ad Application Insights.</li></ul><ul><li>Scegliere un'area vicina al proprio ambiente o
alle risorse a cui si vuole accedere.</li></ul></li></ul></li></ul>
<!-- /wp:list -->

<!-- wp:list -->
<ul><li>Dopo aver risposto a tutte le richieste, VS Code mostra le risorse di Azure che vengono create per l'app nella finestra popup di notifica.<br> </li></ul>
<!-- /wp:list -->

<!-- wp:image {"align":"center","id":283,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://www.gaetanopaterno.it/wp-content/uploads/2020/03/CreateAzureAppWebFig13.jpg" alt="" class="wp-image-283"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Per la distribuzione in Linux, selezionare <strong>Sì</strong> quando viene richiesto di aggiornare la configurazione per eseguire <em>npm install</em> nel server Linux di destinazione. </p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":284,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://www.gaetanopaterno.it/wp-content/uploads/2020/03/CreateAzureAppWebFig14.jpg" alt="Richiesta di aggiornamento della configurazione nel server Linux di destinazione" class="wp-image-284"/></figure></div>
<!-- /wp:image -->

<!-- wp:list -->
<ul><li> Quando richiesto, selezionare <strong>Sì</strong> per <strong>Distribuisci sempre l'area di lavoro "nodejs-docs-hello-world" in (nome app)"</strong>. Selezionando <strong>Sì</strong> si indica VS Code di impostare automaticamente come destinazione la stessa app Web del servizio app con le distribuzioni successive. </li></ul>
<!-- /wp:list -->

<!-- wp:image {"align":"center","id":285,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://www.gaetanopaterno.it/wp-content/uploads/2020/03/CreateAzureAppWebFig15.jpg" alt="" class="wp-image-285"/></figure></div>
<!-- /wp:image -->

<!-- wp:list -->
<ul><li>Al termine:<ul><li>Per la distribuzione in Linux, selezionare Esplora sito Web nel messaggio per visualizzare l'app Web appena distribuita. Nel browser verrà visualizzato il testo "Hello World!"</li></ul><ul><li>Per la distribuzione in Windows, è prima necessario impostare il numero di versione di Node.js per l'app Web:</li></ul></li></ul>
<!-- /wp:list -->

<!-- wp:list -->
<ul><li>In VS Code espandere il nodo del nuovo servizio
app, quindi fare clic con il pulsante destro del mouse su <strong>Impostazioni
applicazione</strong> e scegliere <strong>Aggiungi nuova impostazione</strong>:<br>
<ul><li>Immettere WEBSITE_NODE_DEFAULT_VERSION per la chiave
dell'impostazione.</li></ul><ul><li>Immettere 10.15.2 per il valore dell'impostazione.</li></ul></li></ul>
<!-- /wp:list -->

<!-- wp:image {"align":"center","id":286,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://www.gaetanopaterno.it/wp-content/uploads/2020/03/CreateAzureAppWebFig16.jpg" alt="" class="wp-image-286"/></figure></div>
<!-- /wp:image -->

<!-- wp:list -->
<ul><li>Cliccare con il pulsante destro del mouse sul nodo relativo al App Service e scegliere <strong>Riavvia</strong>.</li></ul>
<!-- /wp:list -->

<!-- wp:image {"align":"center","id":287,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://www.gaetanopaterno.it/wp-content/uploads/2020/03/CreateAzureAppWebFig17.jpg" alt="" class="wp-image-287"/></figure></div>
<!-- /wp:image -->

<!-- wp:list -->
<ul><li>Cliccare con il pulsante destro del mouse sul nodo relativo al App Service e scegliere <strong>Esplora sito Web</strong>.</li></ul>
<!-- /wp:list -->

<!-- wp:heading -->
<h2>Creare una Web App con Azure Cloud Shell</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Un altro modo per creare una Web App su Azure è utilizzando Azure Cloud Shell. Azure Cloud Shell è un ambiente di shell interattivo ospitato in Azure e usato tramite il browser. È possibile usare Bash o PowerShell con Cloud Shell per usare i servizi di Azure.<br> &nbsp;<br> Per avviare Azure Cloud Shell abbiamo 3 opzioni:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Selezionare <strong>Prova</strong> nell'angolo superiore
destro di un blocco di codice scritto sull'interfaccia della riga di comando <strong>Azure
Cli</strong>.</li><li>Passare a <a href="https://shell.azure.com/">https://shell.azure.com</a>
o selezionare il pulsante <strong>Avvia Cloud Shell</strong> per aprire Cloud Shell nel
browser.</li><li>Selezionare il pulsante <strong>Cloud Shell</strong> nella
barra dei menu nell'angolo in alto a destra del portale di Azure.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Avviato Cloud Shell, i passaggi da eseguire per la creazione
dell’App Web sono:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Creare un gruppo di risorse con il comando <a href="https://docs.microsoft.com/it-it/cli/azure/group?view=azure-cli-latest">az
group create</a>.<br>
<br>
az group create --name myResourceGroup --location "West Europe"<br>
<br>
L'esempio nell’immagine precedente crea un gruppo di risorse denominato
myResourceGroup nella località Europa occidentale. Per visualizzare tutte le
località supportate per il servizio app nel livello <strong>gratuito</strong>, eseguire
il comando <a href="https://docs.microsoft.com/it-it/cli/azure/appservice?view=azure-cli-latest">az
appservice list-locations --sku FREE</a>.<br>
In genere, il gruppo di risorse e le risorse vengono create in un'area vicina
alla località dell'utente.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Al termine del comando, un output JSON
visualizza le proprietà del gruppo di risorse.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Creare un piano di servizio app di Azure con il comando <a href="https://docs.microsoft.com/it-it/cli/azure/appservice/plan?view=azure-cli-latest">az appservice plan create</a>.<br> <br> az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku FREE<br><br> Al termine della creazione del piano di servizio app, l'interfaccia della riga di comando di Azure visualizza informazioni simili all'esempio seguente: </li></ul>
<!-- /wp:list -->

<!-- wp:image {"align":"center","id":289,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="http://www.gaetanopaterno.it/wp-content/uploads/2020/03/CreateAzureAppWebFig18.jpg" alt="" class="wp-image-289"/></figure></div>
<!-- /wp:image -->

<!-- wp:list -->
<ul><li>Creare un'app Web nel piano di servizio
app myAppServicePlan con il comando <a href="https://docs.microsoft.com/it-it/cli/azure/webapp?view=azure-cli-latest#az-webapp-create">az
webapp create</a>.<br>
Nell'esempio seguente sostituire &lt;app_name&gt; con un nome app univoco
globale. I caratteri validi sono a-z, 0-9 e -. Il runtime è impostato su
PHP|7.0. Per visualizzare tutti i runtime supportati, eseguire <a href="https://docs.microsoft.com/it-it/cli/azure/webapp?view=azure-cli-latest#az-webapp-list-runtimes">az
webapp list-runtimes</a>.<br>
<br>
# Bash<br>
az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name &lt;app_name&gt; --runtime "PHP|7.0" --deployment-local-git<br>
<br>
# PowerShell<br>
az --% webapp create --resource-group myResourceGroup --plan myAppServicePlan --name &lt;app_name&gt; --runtime "PHP|7.0" --deployment-local-git</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p><br>Dopo la creazione dell'app Web, l'interfaccia della riga di comando di Azure mostra un output simile all'esempio seguente:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":290,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://www.gaetanopaterno.it/wp-content/uploads/2020/03/CreateAzureAppWebFig19.jpg" alt="" class="wp-image-290"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>È stata creata una nuova app Web vuota. Per visualizzare nel
browser l'App Web appena creata sostituire <em>&lt;app name&gt;</em> con il nome
app univoco creato nel passaggio precedente.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Conclusioni</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In questo articolo abbiamo visto come è possibile creare, con diversi strumenti, una Web App che sia in grado di ospitare l’applicazione web che stiamo sviluppando grazie alle tante caratteristiche.</p>
<!-- /wp:paragraph -->