Bei jedem Projekt wird es früher oder später nötig sein ein automatisiertes Deployment (Continuous Integration) einzurichten. Dies wird vor allem nötig wenn mehrere Personen an einem Projekt arbeiten und es mehrere Umgebungen (Stages) gibt. In diesem konkreten Beispiel wird ein Wizdom Projekt mit Hilfe von Visual Studio Team Services automatisiert. Das Ziel ist es das Branding sowie Custom Modules Artefakte in o365 und Azure zu publizieren.

Projektsetup

Das Projekt wurde in 2 Visual Studio Projekte unterteilt.

  • Das Branding Projekt enthält CSS, JS und Wizdom Templates
  • Das CustomModules welches komplexere Strukturen wie WebServices, WebParts, Formulare und Skripte beinhaltet

Die Technologien die für dieses Projekt verwendet wurden sind:

  • Visual Studio 2017
  • Visual Studio Team Services (VSTS)
  • NPM
  • GIT Extensions
  • GIT
    • Bitbucket Repository
    • VSTS Git Repository

Erstellen der Build configuration

Um den Deploymentprozess abzubilden muss unter https://tenantname.visualstudio.com ein neues Projekt erstellt werden. Jedes Projekt enthält Prozesse, wobei ein Prozess den Ablauf für eine Umgebung abbildet. Ein Prozess verwendet als Quelle ein existierendes GIT Repository, sowie als eindeutige Kennung einen Branchnamen.

Wird ein Prozess erstellt so muss dieser zuerst konfiguriert werden. Dies beinhaltet folgendes:

Agent Queue
Hier wird das Betriebssystem des Agents ausgewählt. In unserem Fall verwenden wir „Hosted VS 2017“.

Get Sources
Hier wird das Repository ausgewählt welches angehängt werden soll. Wichtig ist die Angabe des Branchnamens.

Variables
Hier können globale Prozessvariablen hinterlegt werden. Um mehr Logging zu erhalten empfiehlt es sich den Eintrag system.debug=true einzutragen

Triggers
Hier wird der Interval und der Branch definiert in welchem das Repository auf Änderungen untersucht wird.

Erstellen der Actions für die Custom Modules

Da der Prozess erstellt wurde gilt es nun die Schritte zu definieren welche ausgeführt werden. Diese sind:

Node v8.11.2 zu installieren
So ist sichergestellt, dass die korrekte Node Version auf dem Agent installiert ist.

NuGet Restore ausführen

NPM Install

Gulp Task ausführen

Build Solution

Web.config settings einfügen
Dies ist im Standard nicht vorhanden. Im MarketPlace gibt es aber das Tool BDC „Build & Release Tools“. Nach dessen Installation gibt es eine Aktion „Set web.config“

FTP Upload der Artefakte
Custom Modules werden auf dem Azure App Server gehosted und werden per FTP hochgeladen.

Erstellen der Actions für das Branding

Das Branding wird nicht am App Server gehosted sondern im Azure Storage. Die Schritte die dafür nötig sind:

  • NPM Install
  • Gulp Task ausführen. Die Sass files werden kompiliert
  • Azure File Copy der css files
  • Azure File Copy der Javascript files
  • Azure File Copy der wizdom templates
  • Azure File Copy der wizdom site templates

Die Azure File Copy Tasks müssen korrekt konfiguriert werden, was nicht so trivial ist. Hier nun die Settings für die css files. Nach dem gleichen Muster können die anderen File Copy ebenfalls konfiguriert werden:

Source:
Der Pfad in der Solution z.B. D:\a\1\s\projektname\Wizdom Intranet\css\

Azure Connection Type:
Azure Resource Manager

Azure Subscription:
Auf den Manage Knopf klicken und einen neuen Endpoint konfigurieren.

Destination Type:
Azure Blob

RM Storage Account:
Der Storage Accountname. Dieser kann über das PublishingProfile file herausgefunden werden

Container Name:
wizdom365public

Blob Prefix:
CustomStyles/templates/

Additional Arguments:
/Pattern:*.css /SetContentType:text/css

Storage Container URI:
targetContainer

 

Ausführung und Testing

Sobald alles konfiguriert ist kann mit dem Testen begonnen werden. Wird nun ein commit auf einen Branch gepushed so startet, nach einer kurzen Verzögerung, der Prozess. Nach einigen Minuten ist der Prozess durchlaufen und das Ergebnis kann kontrolliert werden.

In der Übersicht können ältere Ausführungen kontrolliert und die Build History eingesehen werden. Ein Debugging des Prozesses zur Laufzeit ist leider nicht möglich.

Tipps

  • Sich wiederholende Tasks können in Task Groups ausgelagert werden. Variablen können in den Tasks mittles Platzhaltern $(CustomVariable) referenziert werden
  • NPM Install dauert in der Agent queue „Hosted VS2017“ sehr lange. Es ist wesentlich schneller die Queue „Hosted macOS“ zu verwenden. Einziger Nachteil, einige Tasks sind unter macOS nicht supported.
  • Mit Hilfe des Tools Azure Storage Explorer kann der Inhalt des Storages eingesehen werden. Dies ist hilfreich um zu kontrollieren ob die Artefakte korrekt deployed worden sind