Continuous Deployment einer Ionic-App mit Jenkins

In Zeiten der fortschreitenden Automatisierung wird auch im Bereich der Software-Entwicklung an der Optimierung der Prozesse gearbeitet. Keine moderne Softwareschmiede kommt heutzutage ohne Continous-Deployment (CD) und Continous-Integration (CI) aus. Zur Verfügung stehen dafür je nach gewählter Plattform verschiedene Tools, um neue Programmversionen einfach und schnell an den Kunden auszuliefern. Dies gilt umso mehr im Bereich des Mobile Development, wo Nutzer noch ungeduldiger sind und immer neue Features und Fehlerverbesserungen erwarten.

Ionic ist ein Framework, welches sich bei der Entwicklung plattformübergreifender Apps immer größerer Beliebtheit erfreut. Dennoch gibt es bisher kein Jenkins-Plugin, das die Erstellung und das Deployment der App erleichtert. Zum Glück ermöglicht Jenkins durch das Pipelining Feature den flexiblen Zugriff auf CLI-Kommandos. Mit Hilfe dieser Tools ist mit einiger Konfiguration schnell eine funktionierende Umgebung für CD eingerichtet.

Wichtig ist hierbei zu beachten, dass für den Bau einer App für iOS zwingend ein Apple-Gerät genutzt werden muss, da nur darauf die notwendige Software (Xcode) zur Verfügung steht.

Vorbereitung

Zunächst wird das NodeJS Plugin für Jenkins benötigt. Dies lässt sich einfach über Jenkins eigenen Plugin-Manager (<Jenkins-URL>/pluginManager/available) installieren.

Außerdem muss zusätzlich auf dem System, auf dem auch Jenkins läuft, folgende Software installiert werden:

• Gradle (notwendig für die Nutzung der Android SDK-Tools)
• Android SDK-Tools (CLI-Tools)
• Xcode (ausschließlich auf Geräten mit MacOS verfügbar)

Bei der Installation der Android SDK-Tools werden die CLI-Tools nach dem Download  in den neu erstellten Ordner android-sdk entpackt. Als nächstes werden in der Konsole folgenden Befehle ausgeführt, um die Build-tools, die es über das Ionic Framework ermöglichen, die App für Android zu bauen:

cd android-sdk/tools/bin/
./sdkmanager "build-tools;26.0.0"
Code-Sprache: JavaScript (javascript)

Die Xcode Command Line Tools werden für das Bauen der App für iOS benötigt und lassen sich in MacOS mit folgendem Befehl über die Konsole installieren:

xcode-select --install

Konfiguration

Jenkins

In Jenkins werden nun die Plugins und die Umgebungsvariablen konfiguriert.

Zunächst werden unter „<Jenkins-URL>/configure“ die Umgebungsvariablen gesetzt. Hierfür muss unter globale Eigenschaften der Hacken bei „Umgebungsvariablen“ gesetzt werden. Folgende Werte werden eingegeben:

• ANDROID_HOME:“/Users/Shared/Jenkins/android-sdk/“
• PATH+EXTRA:“$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools“

Falls die Icons und der Splashscreen nicht im Repository liegen, sondern lokal erstellt werden sollen, werden außerdem die Daten des Ionic-Accounts benötigt:

• IONIC_EMAIL
• IONIC_PASSWORD

Plugins

Außerdem kann hier das Xcode Plugin global konfiguriert werden. Insbesondere falls Xcode nicht im Standardordner installiert wurde, können hier die Pfade zu xcodebuild, agvtool und xcrun angepasst werden. Außerdem können hier global erreichbare Apple Development Teams und Keychains hinterlegt werden. Diese können später beim Buildprozess aus einer Liste ausgewählt werden. Alternativ kann man diese Daten allerdings auch lokal in dem jeweiligen build Job festlegen.

Das NodeJS Plugins wird unter „<Jenkins-URL>/configureTools/“ konfiguriert. Hierzu wird zunächst auf den Button „NodeJS Installationen…“ und dann auf den Button „NodeJS hinzufügen“ geklickt. Bei Namen sollte ein eindeutiger Bezeichner wie z.B. „Ionic Build“ verwendet werden. Bei „Global npm packages to install“ wird „ionic cordova“ eingetragen. Das Ergebnis sollte in etwa so aussehen:

Build Jobs

Insgesamt werden 3 Jobs mit folgenden Aufgaben benötigt um das Projekt zu deployen:

• den Sourcecode aus dem SCM auszuchecken, und die App für Android und iOS bauen
• die App für Android deployen
• die App für iOS deployen

Hier wird zunächst auf den ersten Job eingegangen.

Der Artikel zum Deployment für Android ist auf der folgenden Seite zu finden:
https://conciso.de/blog/2018/05/14/continuous-deployment-einer-ionic-app-mit-jenkins-android/

Zu dem Deployment für iOS wird ein eigener Artikel folgen.

Sourcecode aus dem SCM holen und die App bauen

Für das Auschecken aus dem SCM wird die Multibranch Pipeline genutzt. Hierbei ist es insbesondere wichtig, dass unter „Build Configuration“ der korrekte Pfad zum Jenkinsfile eingegeben wird, beispielsweise „IonicApp/Jenkinsfile“. Falls der Build nicht von außen gestartet wird sollte hier auch noch unter „Scan Multibranch Pipeline Triggers“ der Haken für das aktive Polling aktiviert werden und ein entsprechendes Intervall gewählt werden, in dem Jenkins überprüfen soll, ob es neuen Code im SCM gibt. Unter „Health metrics“ lässt sich auswählen, welcher Status abhängig von den jeweiligen Builds der Branches in Jenkins angezeigt wird. Des Weiteren kann unter Behaviour eingestellt werden, welche Branches gebaut werden sollen.

Die restliche Konfiguration erfolgt über eine Pipeline.

Pipeline

Um den eigentlichen Build Prozess durchzuführen wird eine Jenkins-Pipeline genutzt, welche in der Programiersprache Groovy verfasst wird. Dafür wird zuerst der rudimentäre Aufbau erstellt:

pipeline {
    agent any
    stages {
        stage('Build') {
            steps {
            }
        }
        stage('Test') {
            steps {
            }
        }
        stage('Deploy') {
            steps {
            }
        }
    }
}
Code-Sprache: JavaScript (javascript)

Anschließend wird vor dem Eintrag für die stages (Zeile 3) der folgende Code eingefügt:

tools {
nodejs 'Ionic Build'
}
Code-Sprache: JavaScript (javascript)

Dies ermöglicht es, im Folgenden auf die NodeJS tools zuzugreifen, die zu Anfang konfiguriert wurden. Der eigentliche Build wird mit dem folgenden Code durchgeführt:

echo 'Cleaning up..'
sh 'git clean -dfx'

echo 'Building..'
dir('IonicApp'){
    echo 'Installing node_modules'
    sh 'npm install'

    echo 'Preparing Android..'
    sh 'ionic cordova platform add android'

    echo 'Preparing iOS..'
    sh 'ionic cordova platform add ios'

    echo 'Creating Resources'
    sh 'ionic cordova resources'
}
Code-Sprache: PHP (php)

Der Code aus Zeilen 15 – 17 können entfernt werden, falls die Icons und der Splashscreen bereits im Repository vorhanden sind.

Die nötigen buildConfig Flags für den iOS-Build werden in einer Datei build.json gespeichert:

{
    "ios": {
        "debug": {
            "codeSignIdentity": "iPhone Developer",
            "developmentTeam": "",
            "packageType": "development",
            "buildFlag": [
                "EMBEDDED_CONTENT_CONTAINS_SWIFT = YES",
                "ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES=NO",
                "LD_RUNPATH_SEARCH_PATHS = \"@executable_path/Frameworks\""
            ]
        },
        "release": {
            "codeSignIdentity": "iPhone Developer",
            "developmentTeam": "",
            "packageType": "app-store",
            "buildFlag": [
                "EMBEDDED_CONTENT_CONTAINS_SWIFT = YES",
                "ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES=NO",
                "LD_RUNPATH_SEARCH_PATHS = \"@executable_path/Frameworks\""
            ]
        }
    }
}

Code-Sprache: JSON / JSON mit Kommentaren (json)

In den Zeilen 5 und 15 muss die ID des eigenen Development Teams ergänzt werden.

Damit ist die Konfiguration des Jenkins und das Bauen der App abgeschlossen. Die nächsten Blogs zu diesem Thema beschäftigen sich mit dem automatisierten Deployment der App in den Google Play Store und den Apple App Store.