mercoledì 7 dicembre 2016

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


Node.jsMicorsoft AzureAngular 2






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.

angular-cli

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:
  2. $ npm install -g angular-cli
  3. Quindi creiamo la nostra Web App:
  4. $ ng new my-a2-app
  5. Personalizziamone il contenuto, modificando:
    • il file app.component.ts
  6. 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
  7. Avviamo il server in locale con il comando
  8. $ ng serve
    ng-serve-terminal
    localhost-run.
  9. 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
  2. $ azure site create my-a2-app --git --gitusername ***
  3. 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
azure-deployment-terminal
Ulteriore conferma dell’avvenuta pubblicazione possiamo averla navigando il portale di azure al percoso my-a2-app > Deployment options
azure-deployment-options
Ed infine, raggiungendo l’indirizzo http://my-a2-app.azurewebsites.net/
azure-run
Enjoy


Nessun commento:

Posta un commento