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
-. --
..
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
gitbash-3.2$ git
git version 2.9.3 (Apple Git-75)
e
azure-cli-. --
.. ..
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.
- Login
Per eseguire il login dalla linea di comando di azure, eseguiamo:
$ azure login
e seguiamo le istruzioni riportate nella risposta
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
- Impostazione dell’utente per la pubblicazione
Per impostare nome utente e password per la pubblicazione della Web Application, eseguire il comando:
-- <> -- <>
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
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
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
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:
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
- aggiungiamo tutti i files e le cartelle create
$ git add .
- 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
<> -- -- <>
dove
app_name è il nome che assegneremo alla web application, e
username è il nome utente impostato nel passaggio precedente.
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
Visualizzando i dettagli della nostra App, abbiamo
e, selezionando il pulsante
Browse siamo in grado di visualizzare la web app appena creata (anche se vuota).
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:
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.
.
Salvando le modifiche effettuate il sito verrà riavviato e, se non ci sono problemi, ricaricando la pagina otterremo ancora il nostro
Hello World.
Enjoy