Zum Hauptinhalt springen

Einrichtung von CI/CD für Capacitor-Apps

Erfahren Sie, wie Sie die Veröffentlichung Ihrer Apps für iOS und Android durch CI/CD-Pipelines beschleunigen und Fehler minimieren können.

Martin Donadieu

Martin Donadieu

Content-Marketing-Beauftragter

Einrichtung 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 Apps automatisieren die Erstellung, Tests und Bereitstellung, wodurch die Veröffentlichungszeit um bis zu 70% und die Fehlerquote um 60% reduziert wird. Diese Anleitung umfasst alles, was Sie wissen müssen, von der Einrichtung Ihres Umfelds bis hin zur Automatisierung von Live-Updates mit Capgo.

Werum CI/CD für

  • Wichtige Werkzeuge: Capacitor appsAndroid Studio
  • CocoaPods: , und mehr., Pipeline-Einrichtung: , Automatisierung von Aufgaben wie __CAPGO_KEEP_0__
  • Why CI/CD matters for __CAPGO_KEEP_0__ apps: Beschleunigt die Builds um 78% und reduziert die Store-Ablehnungen um 60%. npx cap syncAbhängigkeits-Caching und plattform-spezifische Builds.
  • Live-Updates mit Capgo: Aktiviere postveröffentlichungs-Updates mit phasenweisen Rollouts und Sicherheitsfunktionen zum Zurücksetzen.

Schritte für die schnelle Einrichtung:

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

Mit CI/CD erreichen Capacitor-Apps schnellere, glattere Releases, während 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

Vorbereitung Ihres CI/CD-Umgebungs

Einmal Sie die Grundlagen von CI/CD beherrschen, ist der nächste Schritt die Einrichtung Ihrer Umgebung. Dies ist die Grundlage für verlässliche Automatisierung.

Werkzeuge 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 die Android-Entwicklung:

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

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

xcode-select -p

Erstellung eines Capacitor Projekts

Capacitor Framework-Dokumentationswebsite

Ihr Capacitor Projekt muss korrekt konfiguriert sein, um CI/CD-Workflows zu unterstützen. capacitor.config.ts Der Datei liegt am Herzen 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.

Umgebungssvariablen einrichten

Sicherheitsbewährte Verwaltung von Anmeldeinformationen ist ein wichtiger Aspekt bei der Verbindung Ihrer Umgebungs-Einrichtung mit dem CI/CD-Pipeline.

Schlüsselvariablen definieren:

  • BUILD_ENV: Legt die Bereitstellungsbühne (z.B. production)
  • IOS_SIGNING_IDENTITY: Ihr code Signierungszertifikat
  • ANDROID_KEYSTORE_PATH: Pfad zu Ihrem Android-Keystore

Für Android-Builds generieren Sie dynamisch eine 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.

To überprüfen, ob Ihre Umgebung 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 früheren Statistiken erwähnt [1].

Erstellen Sie Ihr CI/CD-Pipeline

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

Installieren und Aktualisieren von Abhängigkeiten

In CI/CD-Umgebungen erfordert die Abhängigkeitsverwaltung eine strenge Versionskontrolle. Beginnen Sie mit einem sauberen Installationsprozess:

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

Um die Build-Zeit zu verkürzen, verwenden Sie die Abhängigkeits-Caching. Zum Beispiel Benutzer von Azure DevOps haben eine Reduzierung 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-Einrichtung

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

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

Schritte zur Prüfung und Bereitstellung:

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 müssen Sie Plattform-spezifische Artefakt-Verwaltung einrichten:

PlattformArtefakttypVerteilungschannel
iOS.ipaApp Store Connect
Android.aabGoogle Play Console

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 zu konzentrieren mit Capgo (in der nächsten Abschnitt besprochen).

sbb-itb-f9944d2

Hinzufügen Capgo für Live Updates

Capgo Live Update Dashboard Interface

Die Integration von Capgo in Ihren Workflow verbessert Ihren CI/CD-Prozess, indem er postveröffentlichende Updates ermöglicht. Hier ist, wie Sie es einrichten können:

Capgo Pipeline-Konfiguration

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

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

Diese Erweiterung erweitert Ihr CI/CD-Lebenszyklus, indem Sie das Update-Management in Ihren automatisierten Build- und Bereitstellungsprozess einbeziehen.

Als Nächstes fügen Sie 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 Updates, konfigurieren Sie die Validierungs-Einstellungen wie folgt:

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

Capgo Features Übersicht

Funktion{"targetLanguage":"Deutsch","protectedTokens":["Cloudflare","Capacitor","GitHub","Capgo","code","API","SDK","CLI","npm","bun"],"texts":["Beschreibung","End-to-End-Verschlüsselung","Reduziert die Fehler bei der Bereitstellung erheblich."
Kanalbasierte BereitstellungPasst Updates an spezifische Umgebungen an.
Phasenweise RolloutsSorgt dafür, dass Updates allmählich verteilt werden.
OTA-Update-LeitfadenVerbessern Sie Ihre Testprozesse, indem Sie diese Schlüsselmetriken nach der Bereitstellung verfolgen:

Phasenweise Bereitstellungsstrategie

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

Update-Monitoring"]

Beschreibung

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

End-to-End-Verschlüsselung ist eine sichere Methode, um Daten zu schützen, indem sie während der gesamten Lebensdauer der Daten verschlüsselt bleiben, einschließlich der Übertragung und Speicherung.

Achten Sie auf diese Metriken:

  • Annahmequote: Ziel ist es, innerhalb der ersten 24 Stunden 40-60% zu erreichen.
  • Crash-freie Sitzungen: Halten Sie es über 99,5%.
  • Verifizierungszeit: Stellen Sie sicher, dass es unter 500ms liegt.

Wenn Crashs über akzeptable Grenzen hinausgehen, automatisieren Sie 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-Änderungen nur, verwenden Sie npx cap sync kann 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 erleichtert wird.

Versionskontroll-Automatisierung

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

- 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 Pipelineleistung über Metriken wie:

  • Buildzeit pro Stufe
  • Cache-Effizienz (Treffer/Verfehlungsverhältnisse)
  • Peak-Ressourcenverbrauch

Multi-Umgebungskonfiguration

Die Verwaltung mehrerer Umgebungen kann durch die Verwendung umgebungsbezogener Konfigurationen erleichtert werden. Hier ist ein Beispielkonfiguration:

UmgebungKonfigurationsdatei
Entwicklung.env.dev
Staging.env.staging
ProduktionBeschützte Tresore

Mit diesem Skript können Sie Umgebungen dynamisch 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 Sie diese Konfigurationen mit Capgo’s channel-basierten Bereitstellung kombinieren, ermöglichen Sie präzise, umgebungsabhängige Updates. Dies sichert glattere Rollouts und bessere Kontrolle über die Anwendungsverhalten in verschiedenen Umgebungen.

Zusammenfassung

Die Rolle von CI/CD in der Entwicklung

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% schneller Releasezyklen erreichen, dank gleichzeitiger iOS- und Android-Builds [3]. Automatisierung von Aufgaben wie der Installation von Abhängigkeiten und der Synchronisierung von Plattformen reduziert die Fehler bei der Bereitstellung um 40-60% [1][2].

Zum Beispiel haben Teams, die Azure DevOps Pipelines nutzen, automatisierte Prozesse wie sequenzielle Build-Schritte und Xcode-Pakete implementiert. Sie nutzen auch parametrisierte Umgebungen für Entwicklung und Produktion. Diese Vorgehensweise eliminiert die Notwendigkeit für manuelle Gradle- und Xcode-CLI-Operationen, um sicherzustellen, dass Artefakte jederzeit zuverlässig erstellt werden.

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

Capgo für Update-Verwaltung

Capgo funktioniert reibungslos mit CI/CD-Pipelines, um sofortige Updates bereitzustellen, während die Einhaltung von App-Store-Richtlinien gewährleistet wird. Updates werden nur nachdem sie automatisierte Testgattern durchlaufen sind, die in die Pipeline integriert sind.

Indem automatisierte Builds mit phasenweisen Rollouts kombiniert werden, erreichen Teams beeindruckende Ergebnisse: 80% Benutzer-Abdeckung innerhalb von 7 Tagen und Rollback-Fähigkeiten innerhalb von einer Stunde.

Eine gängige Strategie besteht darin, parallel Deploymentspuren zu betreiben. Automatisierte Builds werden für interne Tests verwendet, während phasenweise Rollouts auf Benutzersegmente ausgerichtet sind. Dies stellt sicher, dass Updates sowohl schnell als auch sicher sind, unterstützt durch strenge automatisierte Testgatten. [1].

FAQs

Wie erstelle ich eine Capacitor-App?

Die Erstellung einer Capacitor-App umfasst einige einfache Schritte:

  1. Konfiguriere deine Umgebung: Installiere Node.js und npm auf deinem System. Dann verwende die Ionic CLI , um ein neues Projekt mit Capacitor-Unterstützung zu starten:

    ionic start myApp tabs --capacitor
  2. Füge Plattform-Unterstützung hinzu: Füge die Plattformen hinzu, die du targeten möchtest, wie z.B. iOS oder Android:

    npx cap add ios
    npx cap add android
  3. Synchronisiere deine Web code: Stelle sicher, dass deine Web code mit den native Plattformen übereinstimmt, indem du folgendes ausführst:

    npx cap sync

Der Synchronisierungsprozess ist entscheidend, um sicherzustellen, dass deine App konsistent über Plattformen ist und eine glatte Funktion in CI/CD-Pipelines ermöglicht. Für weitere Details zu der Konfiguration deiner Umgebung, schau dir die Werkzeuge an.

Fahre fort von der Einrichtung von CI/CD für Capacitor-Apps

Wenn du CI/CD-Automatisierung verwendest Einrichtung von CI/CD für Capacitor-Apps um CI/CD-Automatisierung zu planen, verbinde 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 für die Implementierungsdetails in CI/CD-Integration, und GitHub Actions-Integration für die Implementierungsdetails in GitHub Actions-Integration.

Live-Updates für Capacitor-Apps

Wenn ein Web-Schicht-Bug live ist, liefern Sie die Reparatur über Capgo anstatt Tage zu warten, bis die App-Store-Zulassung vorliegt. Die Benutzer erhalten die Aktualisierung im Hintergrund, während native Änderungen im normalen Review-Prozess bleiben.

Los geht's

Neuestes aus unserem Blog

Capgo bietet Ihnen die besten Einblicke, die Sie benötigen, um eine wirklich professionelle mobilen App zu erstellen.