Einstellung von CI/CD für Capacitor-Apps

Möchten Sie schnellere und fehlerfreie App-Veröffentlichungen für iOS und Android? CI/CD-Pipelines für Capacitor Anwendungen automatisieren die Erstellung, Tests und Bereitstellung, wodurch die Veröffentlichungszeit um bis zu 70% und die Fehler um 60% reduziert werden kann. Diese Anleitung umfasst alles, was Sie wissen müssen, von der Einrichtung Ihres Umfelds bis hin zur Automatisierung von Live-Updates mit Capgo.

Hauptergebnisse:

• Warum CI/CD für Capacitor-Anwendungenwichtig ist:
• Beschleunigt die Builds um 78% und reduziert die Store-Ablehnungen um 60%.: Xcode, Android Studio, CocoaPods, und mehr.
• Pipeline-Einrichtung: Aufgaben wie npx cap sync, Abhängigkeitscaching und plattformabhängige Builds automatisieren.
• Live-Updates mit Capgo: Post-Release-Updates mit phasenweisen Rollouts und Rollback-Sicherungen aktivieren.

Schnelle Einrichtungsschritte:

1. Vorbereiten Sie Ihr Umfeld: Installieren Sie die erforderlichen Tools für iOS und Android.
2. Konfigurieren Sie Ihr Projekt: Aktualisieren capacitor.config.ts und verwalten Sie Umgebungsvariablen sicher.
3. Pipelines erstellen: Automatisieren Sie die Installation von Abhängigkeiten, die Erstellung und Tests für beide Plattformen.
4. Leistung optimieren: Verwenden Sie Caching, parallele Builds und bedingte Workflows.
5. Live-Updates hinzufügen: Integrieren Sie Capgo für sichere, OTA-Updates mit phasenweisen Rollouts.

Mithilfe von CI/CD erreichen Capacitor-Apps schnellere, glattere Releases, während die Fehler und manuelle Eingriffe minimiert werden. Bereit, Ihre Workflow zu optimieren? Lassen Sie uns loslegen!

Integrieren Sie Ihre bestehenden CI/CD-Pipelines mit mobilen Funktionen

Ihr CI/CD-Umgebung vorbereiten

Einmal, wenn Sie die Grundlagen von CI/CD beherrschen, ist der nächste Schritt die Einrichtung Ihrer Umgebung. Dies ist der Rückgrat einer zuverlässigen Automatisierung.

Tools und Software-Setup

Stellen Sie sicher, dass Sie diese Schlüsselwerkzeuge installiert haben:

Für iOS-Entwicklung:

• Xcode 14 oder neuer
• Xcode Command Line Tools
• CocoaPods für die Verwaltung von Abhängigkeiten

Für Android-Entwicklung:

• Android Studio
• Android SDK 33 oder höher
• Java-Entwicklungskit (JDK)

Um sicherzustellen, dass Ihre Xcode Command Line Tools installiert sind, verwenden Sie:

xcode-select -p

Erstellung eines Capacitor Projekt

Ihr Capacitor-Projekt muss korrekt konfiguriert sein, um CI/CD-Workflows zu unterstützen. Der capacitor.config.ts Datei steht im Mittelpunkt dieser Einrichtung:

const config: CapacitorConfig = {
  appId: 'com.example.app',
  webDir: 'build',
  ios: { 
    scheme: 'MyApp'
  }
}

Diese Datei stellt sicher, dass Ihr Projekt den CI/CD-Anforderungen entspricht.

Einrichtung von Umgebungsvariablen

Die sichere Verwaltung von Zugriffscodes ist ein wichtiger Teil der Verbindung zwischen Ihrer Umgebungs-Einrichtung und der CI/CD-Pipeline.

Schlüsselvariablen, die definiert werden müssen:

• BUILD_ENV: Legt die Bereitstellungsstufe fest (z.B., production)
• IOS_SIGNING_IDENTITY: Ihr code Signierungszeugnis
• ANDROID_KEYSTORE_PATH: Pfad zu Ihrem Android-Keystore

Für Android-Builds: Generieren Sie dynamisch ein local.properties Datei während des CI-Prozesses:

echo "sdk.dir=$ANDROID_SDK_ROOT" > android/local.properties

Wenn Sie mit iOS-Builds arbeiten, stellen Sie sicher, dass Ihr CI-Plattform macOS-Agenten unterstützt.

Um zu prüken, ob Ihr Umfeld bereit ist:

node --version | grep "v16" && xcodebuild -version | grep "Xcode 14" || exit 1

Die ordnungsgemäße Verwaltung von Schlüsseln und Anmeldeinformationen kann die Chancen auf App-Store-Ablehnungen erheblich verringern, wie in den vorherigen Statistiken erwähnt. [1].

Erstellen Sie Ihren CI/CD-Pipeline

Einmal Ihr Umfeld bereit ist, ist der nächste Schritt die Einrichtung einer CI/CD-Pipeline für Ihr Capacitor App. Diese Pipeline sollte effizient sowohl Web-Assets als auch native Plattform-Builds verwalten.

Abhängigkeiten installieren und aktualisieren

In CI/CD-Umgebungen erfordert die Verwaltung von Abhängigkeiten eine strikte Versionskontrolle. Beginnen Sie mit einem sauberen Installationsprozess:

npm install --ignore-scripts
npm install @capacitor/cli

Um die Build-Zeit zu verkürzen, verwenden Sie eine Abhängigkeits-Caching. Zum Beispiel Azure DevOps Benutzer haben eine Verbesserung der Build-Zeit um 40-60% mit dieser Konfiguration gesehen:

- task: Cache@2
  inputs:
    key: 'npm | "$(Agent.OS)" | package-lock.json'
    path: |
      node_modules
      android/.gradle
      ios/Pods

iOS- und Android-Build-Einstellungen

Hier erfahren Sie, wie Sie die Builds für beide Plattformen einrichten:

iOS-Build-Konfiguration:

steps:
  - task: InstallAppleCertificate@2
    inputs:
      certSecureFile: 'certificate.p12'
      certPwd: $(P12_PASSWORD)
  - script: |
      xcodebuild -workspace ios/App/App.xcworkspace -scheme App -configuration Release -archivePath ios/App/App.xcarchive archive

Android-Build-Konfiguration:

cd android
./gradlew bundleRelease

Test- und Bereitstellungsschritte

Führen Sie Plattformtests parallel mit einer Matrixstrategie durch:

test:
  steps:
    - run: npm run test:unit
    - run: npm run test:e2e
    - name: Run Platform Tests
      matrix:
        platform: [ios, android]
      run: npm run test:${{ matrix.platform }}

Für die Bereitstellung stellen Sie eine plattform-spezifische Artefaktverwaltung ein:

Mit parallelen Builds kann die Ausführungszeit des Pipelines erheblich reduziert werden, wenn sie richtig konfiguriert sind.

Sobald Ihre Builds validiert und verpackt sind, sind Sie bereit, sich auf lebendige Updates mit Capgo (erörtert im nächsten Abschnitt) zu konzentrieren.

sbb-itb-f9944d2

Hinzufügen Capgo für Live-Updates

Die Integration von Capgo in Ihren Workflow verbessert Ihren CI/CD-Prozess, indem er post-release-Updates ermöglicht. Hier erfahren Sie, wie Sie es einrichten:

Capgo Pipeline-Konfiguration

Zuerst installieren Sie das Capgo CLI in Ihrem Pipeline-Umgebung:

steps:
  - name: Install Capgo CLI
    run: npm install -g @capgo/cli
  - name: Configure Authentication
    env:
      CAPGO_KEY: ${{ secrets.CAPGO_API_KEY }}

Diese Ergänzung erweitert Ihr CI/CD-Lebenszyklus, indem Sie das Update-Management in Ihren automatisierten Build- und Deployments-Prozess einbeziehen.

Fügen Sie als Nächstes den Upload-Befehl nach Ihren Build-Schritten ein:

- name: Upload Update
  run: |
    capgo upload --api-key $CAPGO_KEY --bundle ./build/app-release.apk
    capgo deploy v${VERSION} --channel production

Für sichere Aktualisierungen, konfigurieren Sie die Validierungs-Einstellungen wie folgt:

{
  "verification": {
    "checksum": "strict",
    "certificatePinning": true,
    "updateTimeout": 500
  }
}

Capgo Features Übersicht

OTA-Update-Leitfaden

Verbessern Sie Ihre Testprozesse, indem Sie diese Schlüsselmetriken nach der Bereitstellung verfolgen:

Phasenweise Bereitstellung

Verwenden Sie eine gestufte Rollout, um die Verteilung von Updates zu kontrollieren:

- name: Staged Rollout
  run: |
    capgo deploy v1.2.3 --group "beta-users" --rollout 10%
    capgo deploy v1.2.3 --rollout 50%

Update-Überwachung

Bleiben Sie auf folgende Metriken achten:

• Anpassungsrate: Ziel ist eine Rate von 40-60% innerhalb der ersten 24 Stunden.
• Crash-freie Sitzungen: Halten Sie diese über 99,5%.
• Überprüfungszeit: Stelle sicher, dass es unter 500ms liegt.

Wenn die Anzahl der Crashs die akzeptablen Grenzen überschreitet, automatisiere einen Rollback:

- name: Rollback Check
  run: |
    if [ $(capgo stats --version v1.2.3 --metric crashes) -gt 2 ]; then
      capgo rollback --channel production
    fi

Verbesserung der Pipeline-Leistung

Konzentrieren Sie sich auf drei Schlüsselfaktoren, um eine merkliche Verbesserung in Ihrer Pipeline zu erzielen:

Optimierung der Build-Geschwindigkeit

Für web-only-Änderungen kann die Verwendung von npx cap sync Zeit sparen, indem vollständige native Rebuilds ausgelassen werden, wodurch die Rebuildzeit um etwa 40% reduziert wird. Hier ist, wie Sie bedingte Builds implementieren können:

- name: Build Strategy
  run: |
    [ "$WEB_ONLY" = true ] && npx cap sync || (./gradlew assembleRelease && xcodebuild ...)

Diese Vorgehensweise stellt sicher, dass nur die notwendigen Komponenten neu erstellt werden, wodurch der Prozess gestreamt wird.

Automatisierung der Versionskontrolle

Die Automatisierung der Versionskontrolle kann Ihre Workflow vereinfachen. Verwenden Sie das folgende Skript, um Versions- und Buildnummern dynamisch zu setzen:

- name: Set Version
  run: |
    VERSION=$(node -p "require('./package.json').version")
    BUILD_NUMBER=$GITHUB_RUN_NUMBER
    echo "APP_VERSION=${VERSION}" >> $GITHUB_ENV
    echo "BUILD_ID=${BUILD_NUMBER}" >> $GITHUB_ENV

Zusätzlich kann mit dieser Konfiguration auch eine automatisierte semantische Versionsnummerierung eingerichtet werden:

{
  "scripts": {
    "version": "standard-version",
    "build:prod": "npm version patch && ionic build --prod"
  }
}

Diese Praktiken bieten einen soliden Rahmen für die Erfassung und Verbesserung der Pipeline-Leistung über Metriken wie:

• Zeit für die Erstellung pro Stufe
• Cache-Effizienz (Treffer/Verfehlungsverhältnisse)
• Höchstverbrauch von Ressourcen

Multi-Umgebungskonfiguration

Die Verwaltung mehrerer Umgebungen kann durch die Verwendung umgebungsbezogener Konfigurationen vereinfacht werden. Hier ist ein Beispiel für eine Konfiguration:

Sie können Umgebungen dynamisch mit diesem Skript konfigurieren:

- name: Configure Environment
  env:
    API_KEY: ${{ secrets.ENV_SPECIFIC_API_KEY }}
    BUNDLE_ID: ${{ parameters.bundleId }}
  run: |
    echo "ENVIRONMENT=${{ parameters.environment }}" >> $GITHUB_ENV
    echo "API_ENDPOINT=${{ parameters.apiUrl }}" >> $GITHUB_ENV

Indem man diese Konfigurationen mit Capgo’s Kanal-basierten Bereitstellung kombiniert, ermöglicht man präzise, auf Umgebung abgestimmte Updates. Dies sichert glattere Rollouts und bessere Kontrolle über die Anwendungsverhalten in verschiedenen Umgebungen.

Zusammenfassung

Die Rolle von CI/CD im Entwicklungsprozess

Die Verwendung von CI/CD-Pipelines für Capacitor-Anwendungen erhöht die Effizienz des Workflow um ein Vielfaches. Nach Angaben von Branchenstudien können Teams 50-70% schnellere Release-Zyklen dank gleichzeitiger iOS- und Android-Builds [3]. Automatisierte Aufgaben wie die Installation von Abhängigkeiten und die Synchronisierung von Plattformen reduzieren die Fehlerquote bei der Bereitstellung um 40-60% [1][2].

Ein Beispiel dafür sind Teams, die Azure DevOps-Pipelines nutzen, um Prozesse wie sequenzielle Build-Schritte und Xcode-Packaging zu automatisieren. Sie nutzen auch parametrisierte Umgebungen für die Entwicklung und Produktion. Diese Vorgehensweise entfällt die Notwendigkeit für manuelle Gradle- und Xcode-CLI-Operationen, was eine zuverlässige Artefakt-Erstellung garantiert.

Diese Verbesserungen legen den Grundstein für eine gestreamte Update-Verwaltung, wenn man sie mit Capgo kombiniert.

Capgo für die Update-Verwaltung

Capgo funktioniert reibungslos mit CI/CD-Pipelines, um sofortige Updates bereitzustellen, während man sich an die Richtlinien der App-Stores hält. Updates werden nur nachdem sie die automatisierten Testgitter durchlaufen, die in die Pipeline integriert sind.

Indem man automatisierte Builds mit phasenweisen Rollouts kombiniert, erzielen Teams beeindruckende Ergebnisse: 80% Benutzerabdeckung innerhalb von 7 Tagen und Rollback-Funktionen in weniger als einer Stunde.

Eine gängige Strategie beinhaltet die parallele Auslieferung von Tracks. Automatisierte Builds werden für interne Tests verwendet, während sich die phasenweise Auslieferung auf Benutzersegmente richtet. Dies stellt sicher, dass Updates sowohl schnell als auch sicher sind, unterstützt durch strenge automatisierte Testgates [1].

FAQs

Wie erstelle ich eine Capacitor-Anwendung?

Die Erstellung einer Capacitor-Anwendung umfasst einige direkte Schritte:

1. Einrichten Ihrer Umgebung: Installieren Sie Node.js und npm auf Ihrem System. Dann verwenden Sie den Ionic CLI , um eine neue Projekt mit Capacitor-Unterstützung zu starten:

   ionic start myApp tabs --capacitor

2. Hinzufügen von Plattformunterstützung: Fügen Sie die von Ihnen gewünschten Plattformen hinzu, wie z.B. iOS oder Android:

   npx cap add ios
   npx cap add android

3. Synchronisieren Sie Ihre Web code: Stellen Sie sicher, dass Ihre Web code mit den native Plattformen übereinstimmt, indem Sie Folgendes ausführen:

   npx cap sync

Der Synchronisierungsstep ist entscheidend für die Einhaltung der Konsistenz Ihres Apps über Plattformen und die Gewährleistung eines reibungslosen Betriebs in CI/CD-Pipelines. Für weitere Details zu der Einrichtung Ihres Umfelds, schauen Sie sich bitte die Tools-Sektion an.

Weitermachen Sie von der Einrichtung von CI/CD für Capacitor-Apps

Wenn Sie Einrichtung von CI/CD für Capacitor-Apps zur Planung der CI/CD-Automatisierung verwenden, verbinden Sie es mit Capgo CI/CD für den Produktworkflow in Capgo CI/CD, Capgo Native Builds für den Produktworkflow in Capgo Native Builds, Capgo Integrations für den Produktworkflow in Capgo Integrations, CI/CD-Integration zur Implementierungsdetail in CI/CD-Integration und GitHub-Aktionen-Integration zur Implementierungsdetail in GitHub-Aktionen-Integration.