Contenuti

Angular CI/CD - Pipeline di Build & Release

Angular CI/CD - Pipeline di Build & Release

Durante lo scorso fine settimana ho avviato un mio progetto basato sull’utilizzo di Angular e delle Azure Function con lo scopo di raggruppare in modo sensato i miei fogli excel sparsi su cloud. Una volta concluso il primo modulo ho deciso di pubblicarla. La prima volta ho fatto tutto il giro in maniera manuale

  • Publish della Azure Function via Visual Studio
  • Build della web app angular da console
  • Upload del contenuto della cartella dist su azurewebsites tramite ftp

Bello la prima volta, forse una seconda ma in tutta onesta’ l’idea di doverlo fare la terza non mi andava e cosi’ ho effettuato la pubblicazione automatica sfruttando VSTS e le pipeline di Build e Release.

In questo articolo verra’ visto solamente la parte relativa ad Angular e non quella della Azure Functions

Web App Angular: Publish Artifact

Prima di avviare la procedura di Deployment e’ necessario avere i seguenti pre requisiti

  • Account VSTS
  • Azure Server Plan
  • Azure App Service

Il primo passo da compiere e’ un piccolo intervento nella vostra angular web app modificando il file package.json nella sezione script aggiugendo la riga indicata:

1
2
3
4
5
"scripts": {
[...]
    "build-production":"ng build --configuration=production",
[...]
},

Una volta fatta la modifica e’ possibile tornare su VSTS, entrare nella sezione pipeline e crearne una nuova.

La pipeline sara’ molto semplice ed al suo interno troverem solamente tre elementi all’interno della sezione Agent Job

TaskDisplay NameCommandWorking folder that contains package.jsonCommand and arguments
npmnpm installinstallcartella contentente il file package.json
npmnpm buildcustomcartella contentente il file package.jsonrun build-production

Come potete notare il run build-production richiama la modalita’ di build inserita nello step precedente nel file package.json

TaskDisplay NamePath to publishArtifact nameArtifact publish location
Publish Build ArtifactPublish Artifact: appIndicare la cartella in cui troveremo distappAzure Pipelines

Ora non vi restano dei passaggi molto semplici

  • Indicare nella sezione Get Source il ramo da cui prendere i sorgenti
  • Nella sezione Triggers attivare il Continuos integration

Se non viene abilitato il Continuos integration dovrete avviare manualmente la pipeline per la creazione dell’Artifact ogni volta che consegnerete (meglio se con pull request) sul ramo indicato

Web App Angular: Release Artifact

Ora che abbiamo il nostro Artifact (ovviamente lo step precedente deve andare in success) non resta che attivare la pubblicazione tramite release all’interno del nostro Azure App Service. Pensate sia difficile? Assolutamente no.

La schermata di release si divide in due “rettangoli " principali

  • Artifact: in questo blocco dovremmo selezionare l’artifact appena generato selezionando il nome della pipeline appena creata. Se desiderate attivare il Continuous deployment trigger dovrete cliccare sul fulmine e passare da disabled a Enabled il primo interruttore.
  • Stage: Per avere uno stage, dovrete aggiungerne uno e nello specifico Deploy Azure App Service

Ora -in una tabella chiave/valore- vedremo come impostare i valori all’interno di questa sezione

SettingValue
Display nameDeploy Azure App Service
Connection typeAzure Resource Manager
Azure SubcriptionIndicare la sottoscrizione contenente App Service
App Service typeLinux o Windows
App Service nameIndicare l’app service che conterra’ la nostra angular web app
Package or folder$(System.DefaultWorkingDirectory)/_artifact_name-CI/app

Vorrei fare una precisazione su App Service type e l’esperienza che ho avuto. Per pubblicare il mio progetto poteva andare benissimo un App Service Linux utilizzando Angular & NET Core. Il problema e’ il segente: su Linux non e’ supportato Application Insight e per questo motivo ho selezionato windows.

Inoltre -questo a prescindere dal type- vi ricordo che il deploy a Slot non e’ previsto sui piani free.