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:
| |
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
| Task | Display Name | Command | Working folder that contains package.json | Command and arguments |
|---|---|---|---|---|
| npm | npm install | install | cartella contentente il file package.json | |
| npm | npm build | custom | cartella contentente il file package.json | run build-production |
Come potete notare il run build-production richiama la modalita’ di build inserita nello step precedente nel file package.json
| Task | Display Name | Path to publish | Artifact name | Artifact publish location |
|---|---|---|---|---|
| Publish Build Artifact | Publish Artifact: app | Indicare la cartella in cui troveremo dist | app | Azure 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
| Setting | Value |
|---|---|
| Display name | Deploy Azure App Service |
| Connection type | Azure Resource Manager |
| Azure Subcription | Indicare la sottoscrizione contenente App Service |
| App Service type | Linux o Windows |
| App Service name | Indicare 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.