Distribuire una Web App tramite FTP
Tags: azure, vscode, ftp, vs2019
Published: 2020-05-04 22:29:15

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

<!-- wp:paragraph -->
<p>Nei precedenti articoli abbiamo visto come creare una Web App con il servizio Azure App Services e come distribuire il codice eseguibile tramite processi di Continuous Deployment (CD).<br>Possono esserci contesti in cui è difficile poter applicare un processo di CD perché magari dobbiamo distribuire del codice legacy oppure nonostante ci sia un processo di CD non abbiamo la possibilità di accederci per problemi di integrazione o per politiche aziendali. In questo caso dobbiamo distribuire l’applicazione web manualmente.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":1} -->
<h1>Le possibilità</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>La distribuzione manuale di un’applicazione web nella Web App può avvenire tramite:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>FTP,</li><li>Cloud (OneDrive, Dropbox),</li><li>Repository pubblico Git o Mercurial.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>In questo articolo vedremo la distribuzione tramite FTP e gli strumenti che semplificano l’operazione.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Quando sentiamo parlare del trasferimento dati tramite canale FTP, la prima cosa che ci viene in mente è la necessità di dover utilizzare un client ftp (FileZilla, WinSCP o altri) per l’upload del codice eseguibile.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Se stiamo utilizzando Visual Studio 2019 o Visual Studio Code per lo sviluppo della ns applicazione web, possiamo sfruttarli per la distribuzione del codice eseguibile tramite FTP alla Web App.</li><li>Nel caso in cui non stiamo usando VS2019 o VS Code possiamo utilizzare Azure CLI oppure un qualsiasi client FTP.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Per ogni caso che andremo ad analizzare utilizzeremo il framework di sviluppo più adatto e configureremo la web app nel modo opportuno per ospitare l’applicazione web sviluppata.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Ottenere l’endpoint FTP e le credenziali di accesso</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Prima di analizzare i vari casi, notiamo che ogni nuova Web App che creeremo avrà l'endpoint FTP già attivo senza la necessità di alcuna configurazione.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Come recuperare l’endpoint e le credenziali di accesso dopo aver creato la Web App:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Nel portale di Azure cercare e selezionare <strong>App Services</strong>.</li><li>Selezionare la Web App da distribuire.</li><li>Selezionare nel menu a sinistra <strong>Deployment Center</strong> (Centro Distribuzione).</li><li>Selezionare <strong>FTP</strong> e cliccare sul pulsante <strong>Dashboard</strong>.</li><li>Nella dashboard FTP selezionare e copiare l’endpoint FTP e le credenziali della Web App (<strong>App Credentials</strong> o <strong>User Credentials</strong>).</li></ul>
<!-- /wp:list -->

<!-- wp:video {"id":472} -->
<figure class="wp-block-video"><video controls src="https://www.gaetanopaterno.it/wp-content/uploads/2020/05/Get-Endpoint-FTP-and-Credentials.mp4"></video></figure>
<!-- /wp:video -->

<!-- wp:heading -->
<h2>Quale è la differenza tra le App Credentials e le User Credentials?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Azure App Services supporta due tipi di credenziali per la distribuzione tramite FTP, che non corrispondono alle credenziali dell’account di accesso ad Azure.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><strong>App Credentials</strong>:<ul><li>Vengono generate automaticamente al momento della creazione della Web App.</li></ul><ul><li>Sono uniche per ogni Web App.</li></ul><ul><li>La password può essere visualizzata, copiata o reimpostata in qualsiasi momento.</li></ul></li></ul>
<!-- /wp:list -->

<!-- wp:image {"id":484,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.gaetanopaterno.it/wp-content/uploads/2020/05/Eseguire_la_distribuzione_tramite_FTP_01.png" alt="" class="wp-image-484"/></figure>
<!-- /wp:image -->

<!-- wp:list -->
<ul><li><strong>User Credentials</strong>:<ul><li>Vengono configurate manualmente per ogni Web App al quale l’utente è autorizzato ad accedere.</li></ul><ul><li>Più Web App possono avere gli stessi User Credentials. Per assicurare che l’utente acceda alla Web App corretta, l’Username di accesso all’FTP ha il formato <strong>&lt;app-name&gt;\&lt;user-name&gt;</strong> (ad esempio, se per la Web App “dotnetcore31webapp” configuriamo l’utente “tanopaterno”, l’Username da usare per l’accesso FTP è “dotnetcore31webapp\tanopaterno”).</li></ul><ul><li>La password non sarà mai visibile e può essere solo reimpostata nel caso venga smarrita.</li></ul></li></ul>
<!-- /wp:list -->

<!-- wp:image {"id":485,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://www.gaetanopaterno.it/wp-content/uploads/2020/05/Eseguire_la_distribuzione_tramite_FTP_02.png" alt="" class="wp-image-485"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":1} -->
<h1>Distribuzione tramite FTP con Visual Studio 2019</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Visual Studio 2019 è l’ambiente di sviluppo di riferimento per lo sviluppo di software con le tecnologie Microsoft (Desktop, Web, Mobile, Games, IoT, Cloud, etc…).<br>Supponiamo lo sviluppo di un’applicazione web con il framework ASP.NET Core per analizzare la distribuzione tramite FTP con Visual Studio 2019.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Creare una Web App per .NET Core</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Come creare una Web App per distribuire un’applicazione web sviluppata con .NET Core 3.1:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Nel portale di Azure cercare e selezionare <strong>App Services</strong>.</li><li>Cliccare in alto nel pulsante <strong>Create a resource</strong>.</li><li>Nell’elenco sulla sinistra cliccare su <strong>Web</strong> e poi <strong>Web App</strong>.</li><li>Nella sezione <strong>Project Details</strong> configurare la Web App come segue:<ul><li>Resource Group: selezionate un resource group esistente o createne uno nuovo (ad esempio: webappdnstraining).</li></ul><ul><li>Name: inserite un nome univoco per la Web App (ad esempio: netcore31webapp).</li></ul><ul><li>Publish: Code.</li></ul><ul><li>Runtime stack: .NET Core 3.1 (LTS).</li></ul><ul><li>Operating System: Windows.</li></ul><ul><li>Region: Central US o quella a voi più vicina.</li></ul><ul><li>Sku and size: se lo scopo di questa Web App è solo formativo o di sviluppo possiamo selezionare il piano F1 (sezione Dev/Test). Se la Web App deve avere funzionalità e prestazioni per un’ambiente di produzione, selezionare il piano S1 (sezione Production). Parleremo dettagliatamente del pricing delle Web App in un prossimo articolo.</li></ul></li><li>Cliccare in basso a sinistra sul pulsante <strong>Review + create</strong>.</li><li>Cliccare in basso a sinistra sul pulsante <strong>Create</strong>.</li><li>Alla fine del processo di distribuzione:<ul><li>Cliccare sul pulsante <strong>Go to resource</strong>.</li></ul><ul><li>Cliccare nel menu a sinistra su <strong>Deployment Center</strong>.</li></ul><ul><li>Selezionare a destra <strong>FTP</strong>.</li></ul><ul><li>Cliccare in basso al centro sul pulsante <strong>Dashboard</strong>.</li></ul><ul><li>Recuperare nella dashboard l’endpoint e le credenziali per configurare successivamente la distribuzione tramite FTP su Visual Studio 2019.</li></ul></li></ul>
<!-- /wp:list -->

<!-- wp:video {"id":473} -->
<figure class="wp-block-video"><video controls src="https://www.gaetanopaterno.it/wp-content/uploads/2020/05/Create-Web-App-.NET-Core.mp4"></video></figure>
<!-- /wp:video -->

<!-- wp:heading -->
<h2>Creare e pubblicare tramite FTP un’applicazione web .NET Core con Visual Studio 2019</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Come creare un’applicazione web .NET Core con Visual Studio 2019:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Avviare <strong>Visual Studio 2019</strong>.</li><li>Nella finestra di avvio cercare e selezionare il template <strong>ASP.NET Core Web Application</strong> e cliccare su <strong>Next</strong>.</li><li>Configurare il nuovo progetto inserendo il <strong>Project name</strong> e verificando che la <strong>Location</strong> e la <strong>Solution name</strong> siamo quelli desiderati.</li><li>Cliccare su <strong>Create</strong>.</li><li>Configurare la nuova applicazione web ASP.NET Core selezionando il template <strong>Web Application (Model-View-Controller)</strong>.</li><li>Cliccare su <strong>Create</strong>.</li></ul>
<!-- /wp:list -->

<!-- wp:video {"id":474} -->
<figure class="wp-block-video"><video controls src="https://www.gaetanopaterno.it/wp-content/uploads/2020/05/Create-Web-Application-VS2019.mp4"></video></figure>
<!-- /wp:video -->

<!-- wp:paragraph -->
<p>Come pubblicare un’applicazione web .NET Core tramite FTP con Visual Studio 2019:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Cliccare con il pulsante destro del mouse sul nome del progetto dell’applicazione web.</li><li>Nel menu cliccare su <strong>Publish</strong>.</li><li>Nella finestra selezionare il target <strong>IIS, FTP, etc</strong> e cliccare in basso a destra su <strong>Create Profile</strong>.</li><li>Nella finestra <strong>Publish</strong>:<ul><li>Compilare la pagina <strong>Connection</strong>:<ul><li>Selezionare il <strong>Publish method : FTP</strong>.</li></ul><ul><li>Compilare <strong>Server</strong>, <strong>User name</strong> e <strong>Password</strong> con le App Credentials o le User Creadentials.</li></ul><ul><li>Cliccare su <strong>Save password</strong></li></ul><ul><li>Cliccare su <strong>Next</strong>.</li></ul></li></ul><ul><li>Compilare la pagina <strong>Settings</strong>:<ul><li>Selezionare il <strong>Target Framework: netcoreapp3.1</strong>.</li></ul><ul><li>Cliccare su <strong>Save</strong>.</li></ul></li></ul></li><li>Cliccare il altro al centro sul pulsante <strong>Publish</strong> per avviare la distribuzione tramite FTP.</li></ul>
<!-- /wp:list -->

<!-- wp:video {"id":475} -->
<figure class="wp-block-video"><video controls src="https://www.gaetanopaterno.it/wp-content/uploads/2020/05/Publish-Web-Application-VS2019.mp4"></video></figure>
<!-- /wp:video -->

<!-- wp:heading {"level":1} -->
<h1>Distribuzione tramite FTP con Visual Studio Code</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Visual Studio Code è un’editor di codice molto popolare tra gli sviluppatori perché supporta tantissimi framework e librerie per lo sviluppo applicazioni web (.NET Core, Node.js, React, Angular, Vue, etc…).<br>Angular, per esempio, è una libreria Javascript molto popolare per la creazione di interfacce utente per applicazione web e Visual Studio Code supporta tantissime funzionalità di questa libreria, come ad esempio l’IntelliSense e la navigazione del codice.<br>Supponiamo quindi lo sviluppo di un’applicazione web con Angular (Node.js/JavaScript) per analizzare la distribuzione tramite FTP con Visual Studio Code.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Creare una Web App per Node.js</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Come creare una Web App per distribuire un’applicazione web sviluppata con Angular:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Nel portale di Azure cercare e selezionare <strong>App Services</strong>.</li><li>Cliccare in alto nel pulsante <strong>Create a resource</strong>.</li><li>Nell’elenco sulla sinistra cliccare su <strong>Web</strong> e poi <strong>Web App</strong>.</li><li>Nella sezione <strong>Project Details</strong> configurare la Web App come segue:<ul><li>Resource Group: selezionate un resource group esistente o createne uno nuovo (ad esempio: webappdnstraining).</li></ul><ul><li>Name: inserite un nome univoco per la Web App (ad esempio: node1014webapp).</li></ul><ul><li>Publish: Code.</li></ul><ul><li>Runtime stack: Node 10.14.</li></ul><ul><li>Operating System: Windows.</li></ul><ul><li>Region: Central US o quella a voi più vicina.</li></ul><ul><li>Sku and size: se lo scopo di questa Web App è solo formativo o di sviluppo possiamo selezionare il piano F1 (sezione Dev/Test). Se la Web App deve avere funzionalità e prestazioni per un’ambiente di produzione, selezionare il piano S1 (sezione Production). Parleremo dettagliatamente del pricing delle Web App in un prossimo articolo.</li></ul></li><li>Cliccare in basso a sinistra sul pulsante <strong>Review + create</strong>.</li><li>Cliccare in basso a sinistra sul pulsante <strong>Create</strong>.</li><li>Alla fine del processo di distribuzione:<ul><li>Cliccare sul pulsante <strong>Go to resource</strong>.</li></ul><ul><li>Cliccare nel menu a sinistra su <strong>Deployment Center</strong>.</li></ul><ul><li>Selezionare a destra <strong>FTP</strong>.</li></ul><ul><li>Cliccare in basso al centro sul pulsante <strong>Dashboard</strong>.</li></ul><ul><li>Recuperare nella dashboard l’endpoint e le credenziali per configurare successivamente la distribuzione tramite FTP su Visual Studio 2019.</li></ul></li></ul>
<!-- /wp:list -->

<!-- wp:video {"id":477} -->
<figure class="wp-block-video"><video controls src="https://www.gaetanopaterno.it/wp-content/uploads/2020/05/Create-Web-App-Node-10.14.mp4"></video></figure>
<!-- /wp:video -->

<!-- wp:heading -->
<h2>Creare e pubblicare tramite FTP un’applicazione web Angular con Visual Studio Core</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Come creare un’applicazione web Angular con Visual Studio Code:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Avviare <strong>Visual Studio Code</strong>.</li><li>Con i tasti <strong>Ctrl+Shift+ò</strong> apriamo la finestra <strong>Terminal</strong>.</li><li>Digitare il comando <strong>ng new my-app </strong>(my-app è il nome della cartella dell’applicazione) per la creazione di una nuova applicazione Angular.</li><li>Alla domanda “<em>Would you like to add Angular routing?</em>” rispondere <strong>Y</strong>.</li><li>Alla domanda “<em>Which stylesheet format would you like to use?</em>” selezionare <strong>CSS</strong>.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>(Potrebbero essere necessari alcuni minuti per creare l'applicazione Angular in TypeScript e installarne le dipendenze)</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Digitare il comando <strong>cd my-app</strong> per entrare dentro la cartella dell’applicazione.</li><li>Digitare il comando <strong>ng serve -o</strong> per avviare il web server e apre l’applicazione nel browser predefinito.</li></ul>
<!-- /wp:list -->

<!-- wp:video {"id":478} -->
<figure class="wp-block-video"><video controls src="https://www.gaetanopaterno.it/wp-content/uploads/2020/05/Create-Web-Application-Angular.mp4"></video></figure>
<!-- /wp:video -->

<!-- wp:paragraph -->
<p>Visual Studio Code è famoso anche per il grandissimo numero di plugin/estensioni che vengono sviluppate per estendere le sue funzionalità. Anche per la trasmissione dati tramite FTP abbiamo la necessità di installare un’estensione.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Come installare un’estensione su Visual Studio Code per la trasmissione dati tramite FTP:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Nel menù sulla sinistra cliccare sull’icona <strong>Extensions</strong>.</li><li>Nella casella “Search Extensions in Marketplace” digitare <strong>ftp</strong> e premere <strong>Invio</strong>.</li><li>Selezionare l’estensione <strong>ftp-simple</strong> e cliccare su <strong>Install</strong>.</li></ul>
<!-- /wp:list -->

<!-- wp:video {"id":479} -->
<figure class="wp-block-video"><video controls src="https://www.gaetanopaterno.it/wp-content/uploads/2020/05/Install-ftp-simple-on-VSCode.mp4"></video></figure>
<!-- /wp:video -->

<!-- wp:paragraph -->
<p>Come configurare l’estensione ftp-simple:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Con i tasti <strong>Ctrl+Shift+P</strong> apriamo la Command Palette.</li><li>Digitare <strong>config</strong> e selezionare la voce <strong>ftp-simple : Config – FTP connection setting</strong>.</li><li>Si aprirà un file json in cui è possibile configurare tutte le connessioni FTP che utilizziamo. Nel ns caso configuriamo la connessione FTP alla Web App precedentemente creata, tramite l’endpoint e le App Credentials disponibili:<ul><li>“name”: “webappdsntraining”,</li></ul><ul><li>“host”: “waws-prod-dm1-121.ftp.azurewebsites.windows.net”,</li></ul><ul><li>“port”: 21,</li></ul><ul><li>“type”: “ftp”,</li></ul><ul><li>“username”: “node1014webapp\$node1014webapp”,</li></ul><ul><li>“password”: “xxxxxxxxxxxxxxxxx”,</li></ul><ul><li>“path”: “/site/wwwroot”,</li></ul><ul><li>“autosave”: true,</li></ul><ul><li>“confirm”: true</li></ul></li><li>Salvare e chiudere il file json.</li></ul>
<!-- /wp:list -->

<!-- wp:video {"id":480} -->
<figure class="wp-block-video"><video controls src="https://www.gaetanopaterno.it/wp-content/uploads/2020/05/Configure-ftp-simple-on-VSCode.mp4"></video></figure>
<!-- /wp:video -->

<!-- wp:paragraph -->
<p>Come pubblicare l’applicazione web Angular tramite FTP con Visual Studio Code:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>Con i tasti <strong>Ctrl+Shift+ò</strong> apriamo la finestra <strong>Terminal</strong>.</li><li>Digitare il comando <strong>cd my-app</strong> entriamo dentro la cartella dell’applicazione.</li><li>Digitare il comando <strong>code . -r</strong> per aprire la cartella all’interno di Visual Studio Code.</li><li>Con i tasti <strong>Ctrl+Shift+ò</strong> apriamo nuovamente la finestra <strong>Terminal</strong>.</li><li>Digitare il comand <strong>ng build --prod</strong> per creare una versione eseguibile dell’applicazione web.</li><li>Sulla sinistra, nell’albero della cartella my-app, cliccare con il bottone destro del mouse sulla cartella <strong>dist</strong> e cliccare sulla voce <strong>ftp-client : Save – Upload to FTP server</strong>.</li><li>Selezionare l’opzione <strong>my-app/**</strong> per distribuire solo il contenuto della cartella <strong>dist</strong>.</li><li>Selezionare la voce <strong>webappdsntraining</strong> (nome dell’host ftp).</li><li>Selezionare l’opzione <strong>. Current directory : /site/wwwroot</strong> per distribuire l’applicazione sulla root principale.</li></ul>
<!-- /wp:list -->

<!-- wp:video {"id":481} -->
<figure class="wp-block-video"><video controls src="https://www.gaetanopaterno.it/wp-content/uploads/2020/05/Publish-Web-Application-VSCode.mp4"></video></figure>
<!-- /wp:video -->

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

<!-- wp:paragraph -->
<p>In questo 3° articolo abbiamo visto il caso più comune di distribuzione manuale di una Web App tramite il protocollo FTP, servendoci degli strumenti messi a disposizione da Visual Studio 2019 e Visual Studio Code. È logico che è possibile distribuire tramite FTP con qualsiasi altro client ftp o comando tramite command line.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Nel prossimi articoli vedremo il pricing di Azure App Service, degli Slot di distribuzione e di sicurezza.</p>
<!-- /wp:paragraph -->