Integrazione Continua su Azure con git e azure-cli (parte II)

Continuiamo la precedente nota su Integrazione Continua su Azure con git e azure-cli, nella quale ho illustrato una possibile procedura per l’implementazione di un ambiente di sviluppo per l’integrazione continua su Microsoft Azure. In quell’occasione il progetto pubblicato implementava sia la gestione del front-end (sviluppato in quell’occasione con un’applicazione Angular 2), che il back-end (implementato con ASP.NET Core) implementata su host IIS.

In questo post concentreremo la nostra attenzione solo sulla pubblicazione di una Web App Angular 2 implementata con Node.js. A tal fine ci avvarremo di angular-cli, un set di strumenti in linea di comando per lo sviluppo di un'app Angular 2.

Creazione della Web App

Seguendo le istruzioni riportate dal sito creiamo una Web App Angular 2 con angular-cli.

1. In primo luogo installiamo sul nostro sistema angular-cli:

$ npm install -g angular-cli

2. Quindi creiamo la nostra Web App:

$ ng new my-a2-app

3. Personalizziamone il contenuto, modificando:
   
   • il file app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my angular 2 app!';
  sign = 'Maurizio Attanasi';
  year = '2016';
}

• il file app.component.html
  
4. Avviamo il server in locale con il comando

$ ng serve


.
5. Aggiungiamo nella directory root del progetto il file .deployment che configurerà la directory di avvio del progetto, e contenente le righ che seguono:

[config]

project = dist

Preparazione e pubblicazione della Web App su azure

1. Utilizzando le funzionalità di azure-cli viste nel post precedente, creiamo la Web App

$ azure site create my-a2-app --git --gitusername ***

2. Aggiorniamo le modifiche del repository locale, eseguiamo il commit ed infine eseguiamo il push verso il repository remoto di azure

$ git add .

$ git commit -m "Initial commit"

$ git push azure master

Se la è andata a buon fine, la nostra shell di comando sarà simile a quella seguente

Ulteriore conferma dell’avvenuta pubblicazione possiamo averla navigando il portale di azure al percoso my-a2-app > Deployment options

Ed infine, raggiungendo l’indirizzo http://my-a2-app.azurewebsites.net/

Enjoy