Integrazione Continua su Azure con git e azure-cli

Posted by Maurizio Attanasi on November 28, 2016 · 9 mins read
In un precedente post (Integrazione Continua con Visual Studio Team Service) avevo condiviso il link ad un tutorial che illustrava il servizio di Continuous Integration offerto da Visual Studio Team Services. In questa nota riporterò gli step necessari ad ottenere un risultato analogo
per la pubblicazione su una Web Application su Azure sfruttando git come sistema di versioning, e azure-cli, un’interfaccia della riga di comando di Azure.
Gli strumenti necessari per raggiungere il nostro fine sono:
  • node.js (del quale utilizzeremo il gestore dei pacchetti, npm, per l’installazione, tra l’altro, di angular-cli);
  • git;
  • azure-cli;
  • un account Azure valido (anche un free trial);
Data la natura degli strumenti sopra elencati, la procedura che andremo a descrivere vale per tutti i sistemi operativi per i quali tali strumenti sono disponibili, e quindi Windows, Linux e osX/macOS.
In primo luogo verifichiamo che sul sistema sia installato Node.js eseguendo su una shell di comando
bash-3.2$ node --version
v7.2.0
Nel caso in cui Node.js non sia presente sul sistema procederemo alla sua installazione seguendo le istruzioni presenti sul sito.
Allo stesso modo verifichiamo la presenza sul nostro sistema di git
bash-3.2$ git --version
git version 2.9.3 (Apple Git-75)
e azure-cli
bash-3.2$ azure --version
0.10.7 (node: 7.2.0)
Nel caso in cui questo pacchetto non sia presente sul sistema, utilizzeremo npm per la sua installazione
npm install -g azure-cli
Preparati gli strumenti necessari, procediamo alla realizzazione di una Web Application ed alla sua pubblicazione su Azure.
  1. Login
    Per eseguire il login dalla linea di comando di azure, eseguiamo:
$ azure login
e seguiamo le istruzioni riportate nella risposta
azure login
2. Impostazione Gestione servizi di Azure (asm)
Per abilitare i comandi della modalità Service Management dell’interfaccia della riga di comando di Azure, eseguire il comando.
bash-3.2$ azure config mode asm
  1. Impostazione dell’utente per la pubblicazione
    Per impostare nome utente e password per la pubblicazione della Web Application, eseguire il comando:
azure site deployment user set --username <username> --pass <password>

Creazione della Web Application

Tra le varie possibilità disponibili, (html, asp.net, Node.js, …), realizzeremo una Web Application faremo con l’ultima nata delle tecnologie ASP.NET:
ASP.NET Core.
Verifichiamo la presenza dell’sdk sul nostro sistema con il comando
bash-3.2$ dotnet --version
1.0.0-preview2-1-003177
Nel caso in cui .net non sia presente, seguiamo le istruzioni
relative al sistema operativo di nostro interesse.

Yeoman

Per semplificare l’implementazione della web app utilizzeremo Yeoman, il set di strumenti per la creazione di progetti web già visto in un precedente post.
In primo luogo procederemo all’installazione del generator necessario alla realizzazione di un progetto .net Core con il comando
$ sudo npm install -g generator-aspnet
Procediamo quindi alla creazione del nostro progetto creando la seguente gerarchia di directories:
$ mkdir CloudWorkbenchWebApplication
$ mkdir CloudWorkbenchWebApplication/src
$ mkdir CloudWorkbenchWebApplication/test
$ cd CloudWorkbenchWebApplication/
Nella cartella root del nostro progetto, creiamo il file global.json
che conterrà il seguente oggetto json
{
"projects": [ "src", "test" ],
"sdk": {
"version": "1.0.0-preview2-1-003177"
}
}
Spostandoci nella cartella src, eseguiamo il comando
$ yo aspnet
in risposta al quale verrà avviata una procedura guidata per la creazione del nostro progetto
yo aspnet
Selezionando la voce Empty Web Application, e, in seguito assegnando il nome CloudWorkbenchWebApplication,
verrà creata l’infrastruttura di una semplice Web Application ASP.NET Core.
Spostandoci nella cartella appena creata (CloudWorkbenchWebApplication), eseguiamo in sequenza i comandi
dotnet restore
dotnet run
dotnet run
In questo modo abbiamo avviato, sulla nostra macchina un Web Server che risponderà all’indirizzo riportato (nel nostro caso http://localhost:5000/).
Avviando un browser e puntando all’indirizzo di cui sopra avremo:
Local Run
Et voilà, abbiamo la nostra Web Application!

Creazione del repository git

Tornando nella directory root del nostro progetto (quella contenente la cartelle src e test ed il file global.json),
1. creiamo il repository git
$ git init
  1. aggiungiamo tutti i files e le cartelle create
$ git add .
  1. eseguiamo il primo commit
$ git commit -m "Initial commit"

Creazione della Web Application su Azure

Mediante la linea di comando di azure, creiamo la nostra web application
 azure site create <app_name> --git --gitusername <username>
dove app_name è il nome che assegneremo alla web application, e username è il nome utente impostato nel passaggio precedente.
site creation
Selezioniamo il server sul quale pubblicheremo la nostra applicazione (nel nostro caso 3. West Europe).
Al termine dell’operazione, accedendo al portale di Azure, avremo, tra le risorse disponibili, quella appena creata
azure portal
Visualizzando i dettagli della nostra App, abbiamo
azure site detail
e, selezionando il pulsante Browse siamo in grado di visualizzare la web app appena creata (anche se vuota).
site-browse

Pubblicazione della web application

Siamo pronti per eseguire il primo push verso il repository azure creato in precedenza.
A tal fine eseguiamo il comando
$ git push azure master
Oltre che copiare i file dal nostro repository locale al site di azure, il processo avvierà le operazioni di restore e build dell’applicazione, ed infine alla pubblicazione dell’app.
Se l’operazione è andata a buon fine, ricaricando il browser all’indirizzo precedente, abbiamo:
published-site
Et voilà ancora!!! Abbiamo ottenuto il risultato voluto, ovvero siamo riusciti a pubblicare la nostra web application raggiungibile all'indirizzo http://cloud-workbench.azurewebsites.net/ utilizzando git e la linea di comando di azure.

Configurazione versione di Node.js

Poiché la web application che abbiamo appena creato sarà il punto di partenza per una serie prove per verificare le potenzialità di Azure per le applicazioni IoT, per provare Angular 2 in combinazione con .net core, ed altro ancora, facciamo un ulteriore passaggio per aggiornare la versione di Node.js di della nostra app azure con quella installata sul nostro sistema di sviluppo (la 7.2.0, come abbiamo visto all’inizio del post).
Tra gli Application Settings della nostra Web App individuiamo la chiave WEBSITE_NODE_DEFAULT_VERSION e modifichiamone il valore a 7.2.0, come illustrato nell’immagine seguente.
application-settings.
Salvando le modifiche effettuate il sito verrà riavviato e, se non ci sono problemi, ricaricando la pagina otterremo ancora il nostro Hello World.

Enjoy