Mit Azure DevOps Pipelines lässt sich dies einfach bewerkstelligen. In diesem Beitrag wird anhand eines einfachen Beispiels aufgezeigt, wie eine unter Google Firebase betriebene Angular-Applikation (https://meyer74.ch) über Azure DevOps automatisiert "deployed" wird.
1. Build-Pipeline
Im Portal von Azure DevOps wählen wir unter Pipelines den Punkt Builds, damit ein neuer Build-Prozess für die Applikation erstellt werden kann.
Connect: Über einen Wizard müssen wir zuerst die Quelle des Repositories auswählen.
Select: In diesem Beispiel verwenden wir ein GIT-Repository aus Azure DevOps.
Configure: Danach wechselt der Wizard auf den Schritt Configure und ein neues YML-File wird im Repository hinzugefügt. Alle Steps unserer Build-Pipeline werden in der Yaml-Syntax in diesem File hinterlegt. Mit jedem Save an den Yaml-Configurations wird in GIT zudem ein Commit ausgeführt. Dadurch sind alle Änderungen jederzeit nachvollziehbar und an die Applikation gebunden.
In diesem Build sollen in einem ersten Schritt die notwendigen NPM-Pakete der Angular Applikation installiert werden. Dazu können wir über Tasks einen neuen Task des Typs npm hinzufügen.
- task: Npm@1
displayName: 'npm install'
inputs:
command: install
workingDir: meyer74.SPA/src
In einem zweiten Schritt soll die Applikation für einen produktiven Build bereitgestellt werden. Dadurch wird im Arbeitsverzeichnis des Build-Agents ein dist-Verzeichnis mit den auszuliefernden Files generiert.
- task: Npm@1
displayName: 'Build Angular'
inputs:
command: custom
customCommand: run build -- --prod
workingDir: meyer74.SPA/src
Nun muss ein Build-Artefakt erstellt werden, dass später in der Release-Pipeline auf eine Instanz deployed werden kann.
In einem ersten Schritt kopieren wir dazu den Folder dist in ein neues Verzeichnis namens deploy.
- task: CopyFiles@2
inputs:
SourceFolder: 'meyer74.SPA/dist'
Contents: '**'
TargetFolder: 'meyer74.SPA/deploy/dist'
CleanTargetFolder: true
Da die Applikation unter Google-Firebase bereitgestellt werden soll, muss das File firebase.json zwingend im Build-Artefakt enthalten sein. Daher kopieren wir das File in einem separaten Task in den neu angelegten Folder deploy.
- task: CopyFiles@2
inputs:
SourceFolder: 'meyer74.SPA'
Contents: 'firebase.json'
TargetFolder: 'meyer74.SPA/deploy'
OverWrite: true
Als letzter Schritt im Build muss das finale Build-Artefakt erstellt werden. Dazu kann ein neuer Task vom Typ Publish Pipeline Artifact hinzugefügt werden.
- task: PublishPipelineArtifact@0
inputs:
artifactName: 'drop'
targetPath: 'meyer74.SPA/deploy'
Nachdem der Build gespeichert ist, kann dieser über run ausgeführt werden. Ein erfolgreich ausgeführter Build zeigt im Artifacts explorer folgende Verzeichnisstruktur.
Nachdem das Build-Artefakt generiert worden ist, kann dieses automatisiert auf eine Test- und/oder Produktionsinstanz deployed werden. In diesem Beispiel soll ein Deployment auf Google Firebase erfolgen.
Im Portal von Azure DevOps unter Pipelines den Punkt Release wählen, damit ein neuer Release-Prozess für die Applikation erstellt werden kann.
- Firebase Token
- Firebase Project
Der Firebase Token kann über Firebase-CLI (Firebase-Tool) mit firebase login:ci generiert werden.
Unter Azure DevOps können wir diese beiden Parameter als Variablen hinterlegen.
npm i -g firebase-tools
Im zweiten Schritt erfolgt das eigentliche Deployment nach Firebase. Dabei werden die Parameter Firebase Token und Firebase Project über die hinterlegten Variablen mitgeliefert.
firebase deploy --token $(firebasetoken) --project $(firebaseproject)
Danach kann der Release gespeichert und ausgeführt werden. Nach erfolgreicher Ausführung ist das Firebase Deployment im Log des Releases ersichtlich.
