Introduzione

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).
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.

Le possibilità

La distribuzione manuale di un’applicazione web nella Web App può avvenire tramite:

• FTP,
• Cloud (OneDrive, Dropbox),
• Repository pubblico Git o Mercurial.

In questo articolo vedremo la distribuzione tramite FTP e gli strumenti che semplificano l’operazione.

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.

• 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.
• Nel caso in cui non stiamo usando VS2019 o VS Code possiamo utilizzare Azure CLI oppure un qualsiasi client FTP.

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.

Ottenere l’endpoint FTP e le credenziali di accesso

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.

Come recuperare l’endpoint e le credenziali di accesso dopo aver creato la Web App:

• Nel portale di Azure cercare e selezionare App Services.
• Selezionare la Web App da distribuire.
• Selezionare nel menu a sinistra Deployment Center (Centro Distribuzione).
• Selezionare FTP e cliccare sul pulsante Dashboard.
• Nella dashboard FTP selezionare e copiare l’endpoint FTP e le credenziali della Web App (App Credentials o User Credentials).

Quale è la differenza tra le App Credentials e le User Credentials?

Azure App Services supporta due tipi di credenziali per la distribuzione tramite FTP, che non corrispondono alle credenziali dell’account di accesso ad Azure.

• App Credentials:
  • Vengono generate automaticamente al momento della creazione della Web App.
  • Sono uniche per ogni Web App.
  • La password può essere visualizzata, copiata o reimpostata in qualsiasi momento.

• User Credentials:
  • Vengono configurate manualmente per ogni Web App al quale l’utente è autorizzato ad accedere.
  • 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 <app-name>\<user-name> (ad esempio, se per la Web App “dotnetcore31webapp” configuriamo l’utente “tanopaterno”, l’Username da usare per l’accesso FTP è “dotnetcore31webapp\tanopaterno”).
  • La password non sarà mai visibile e può essere solo reimpostata nel caso venga smarrita.

Distribuzione tramite FTP con Visual Studio 2019

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…).
Supponiamo lo sviluppo di un’applicazione web con il framework ASP.NET Core per analizzare la distribuzione tramite FTP con Visual Studio 2019.

Creare una Web App per .NET Core

Come creare una Web App per distribuire un’applicazione web sviluppata con .NET Core 3.1:

• Nel portale di Azure cercare e selezionare App Services.
• Cliccare in alto nel pulsante Create a resource.
• Nell’elenco sulla sinistra cliccare su Web e poi Web App.
• Nella sezione Project Details configurare la Web App come segue:
  • Resource Group: selezionate un resource group esistente o createne uno nuovo (ad esempio: webappdnstraining).
  • Name: inserite un nome univoco per la Web App (ad esempio: netcore31webapp).
  • Publish: Code.
  • Runtime stack: .NET Core 3.1 (LTS).
  • Operating System: Windows.
  • Region: Central US o quella a voi più vicina.
  • 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.
• Cliccare in basso a sinistra sul pulsante Review + create.
• Cliccare in basso a sinistra sul pulsante Create.
• Alla fine del processo di distribuzione:
  • Cliccare sul pulsante Go to resource.
  • Cliccare nel menu a sinistra su Deployment Center.
  • Selezionare a destra FTP.
  • Cliccare in basso al centro sul pulsante Dashboard.
  • Recuperare nella dashboard l’endpoint e le credenziali per configurare successivamente la distribuzione tramite FTP su Visual Studio 2019.

Creare e pubblicare tramite FTP un’applicazione web .NET Core con Visual Studio 2019

Come creare un’applicazione web .NET Core con Visual Studio 2019:

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

Come pubblicare un’applicazione web .NET Core tramite FTP con Visual Studio 2019:

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

Distribuzione tramite FTP con Visual Studio Code

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…).
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.
Supponiamo quindi lo sviluppo di un’applicazione web con Angular (Node.js/JavaScript) per analizzare la distribuzione tramite FTP con Visual Studio Code.

Creare una Web App per Node.js

Come creare una Web App per distribuire un’applicazione web sviluppata con Angular:

• Nel portale di Azure cercare e selezionare App Services.
• Cliccare in alto nel pulsante Create a resource.
• Nell’elenco sulla sinistra cliccare su Web e poi Web App.
• Nella sezione Project Details configurare la Web App come segue:
  • Resource Group: selezionate un resource group esistente o createne uno nuovo (ad esempio: webappdnstraining).
  • Name: inserite un nome univoco per la Web App (ad esempio: node1014webapp).
  • Publish: Code.
  • Runtime stack: Node 10.14.
  • Operating System: Windows.
  • Region: Central US o quella a voi più vicina.
  • 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.
• Cliccare in basso a sinistra sul pulsante Review + create.
• Cliccare in basso a sinistra sul pulsante Create.
• Alla fine del processo di distribuzione:
  • Cliccare sul pulsante Go to resource.
  • Cliccare nel menu a sinistra su Deployment Center.
  • Selezionare a destra FTP.
  • Cliccare in basso al centro sul pulsante Dashboard.
  • Recuperare nella dashboard l’endpoint e le credenziali per configurare successivamente la distribuzione tramite FTP su Visual Studio 2019.

Creare e pubblicare tramite FTP un’applicazione web Angular con Visual Studio Core

Come creare un’applicazione web Angular con Visual Studio Code:

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

(Potrebbero essere necessari alcuni minuti per creare l'applicazione Angular in TypeScript e installarne le dipendenze)

• Digitare il comando cd my-app per entrare dentro la cartella dell’applicazione.
• Digitare il comando ng serve -o per avviare il web server e apre l’applicazione nel browser predefinito.

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.

Come installare un’estensione su Visual Studio Code per la trasmissione dati tramite FTP:

• Nel menù sulla sinistra cliccare sull’icona Extensions.
• Nella casella “Search Extensions in Marketplace” digitare ftp e premere Invio.
• Selezionare l’estensione ftp-simple e cliccare su Install.

Come configurare l’estensione ftp-simple:

• Con i tasti Ctrl+Shift+P apriamo la Command Palette.
• Digitare config e selezionare la voce ftp-simple : Config – FTP connection setting.
• 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:
  • “name”: “webappdsntraining”,
  • “host”: “waws-prod-dm1-121.ftp.azurewebsites.windows.net”,
  • “port”: 21,
  • “type”: “ftp”,
  • “username”: “node1014webapp\$node1014webapp”,
  • “password”: “xxxxxxxxxxxxxxxxx”,
  • “path”: “/site/wwwroot”,
  • “autosave”: true,
  • “confirm”: true
• Salvare e chiudere il file json.

Come pubblicare l’applicazione web Angular tramite FTP con Visual Studio Code:

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

Conclusioni

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.

Nel prossimi articoli vedremo il pricing di Azure App Service, degli Slot di distribuzione e di sicurezza.