Zum Hauptinhalt springen

Wie Sie die Capacitor CLI-Skripte anpassen können

Lernen Sie, wie Sie die Capacitor CLI-Skripte anpassen können, um effiziente Bereitstellungen und angepasste App-Updates auf verschiedenen Plattformen zu ermöglichen.

Martin Donadieu

Martin Donadieu

Content-Marketing-Beauftragter

Wie Sie die Capacitor CLI-Skripte anpassen können

Capacitor CLI ermöglicht Ihnen, den Build-Prozess Ihrer App für iOS, Android und Web-Plattformen anzupassen. Durch das Anpassen der Build-Skripte können Sie beispielsweise:

  • Schnellere Updates: Änderungen sofort pushen, ohne Wartezeit der App-Store.
  • Kontrolle der Bereitstellung: Updates rückgängig machen oder spezifische Benutzergruppen auswählen.
  • Sicherheit deiner App: Verschlüsselung verwenden, um Updates zu schützen.
  • Optimierung von Builds: Einstellungen anpassen für Plattform-spezifische Bedürfnisse.

Schnelle Übersicht der Schlüsselfunktionen:

  • Konfigurationsdateien: Verwenden Sie capacitor.config.json und package.json die Build-Einstellungen zu verwalten.
  • Benutzerdefinierte Skripte: Fügen Sie vor- und nachdem Aufgaben für die Automatisierung hinzu.
  • Build-Hooks: Ausführen Sie code während bestimmter Phasen des Build-Prozesses.
  • Umgebungsvariablen: Vereinfachen Sie umgebungsabhängige Builds mit .env Dateien.

Capgo, ein Bereitstellungs-Tool, verbessert diesen Prozess mit automatischen Updates, Versionsverfolgung und globaler Leistungsoptimierung. Lesen Sie weiter, um zu erfahren, wie Sie Ihre Build-Skripte einrichten und anpassen können, um die Effizienz zu maximieren.

Introducing Capacitor Konfigurieren

Capacitor Framework Dokumentation Website

Standarder Bauprozess in Capacitor

Um den Standardbauprozess von Capacitor effektiv anpassen zu können, ist es wichtig, zu verstehen, wie Capacitor seinen Standardbauprozess handhabt. Im Folgenden werden wir den Bauprozess und die Schlüsselkonfigurationsdateien von Capacitor CLI aufschlüsseln.

Standardbaustufen

Capacitor verwendet einen Schritt-für-Schritt-Prozess, um Ihre Web-Anwendung in plattform-spezifische Builds umzuwandeln. Hier ist, was während des Standardbauprozesses passiert:

PhaseBeschreibungAusgabe
Web BuildVerwendet Ihre Framework-Tools, um Web-Assets zu kompilierenOptimierter Web-Bundle
Copy AssetsÜberträgt Web-Assets in native Plattform-OrdnerPlattform-spezifische Asset-Ordner
Native BuildAusführt plattform-spezifische Build-BefehleBinärdateien zum Bereitstellen
ÜberprüfungÜberprüft die Build-Integrität und AbhängigkeitenBuild-Status und Warnungen

Hauptkonfigurationsdateien

Zwei Schlüsselkonfigurationsdateien bestimmen, wie Capacitor Ihre Builds verarbeitet:

capacitor.config.json
Dies ist die zentrale Konfigurationsdatei für Ihr Capacitor-Projekt. Sie legt wichtige Parameter für Ihre Builds fest:

{
  "appId": "com.example.app",
  "appName": "MyApp",
  "webDir": "dist",
  "bundledWebRuntime": false,
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 3000
    }
  }
}
  • appId: Eine eindeutige Identifikationsnummer für Ihre App.
  • appName: Der Name Ihrer App.
  • webDir: Legt fest, wo Capacitor nach den Web-Assets (z.B. dist).
  • plugins: Ermöglicht die Konfiguration von Plugin-Einstellungen, wie z.B. Optionen für den SplashScreen.

package.json
Diese Datei enthält Build-Skripte und Abhängigkeiten, die den Build-Prozess beeinflussen:

{
  "scripts": {
    "build": "npm run build:web && cap sync",
    "build:web": "vite build",
    "cap:build": "cap build"
  }
}
  • Das webDir Einstellung in capacitor.config.json erzählt Capacitor Ihnen, wo Ihre kompilierten Web-Ressourcen für die Einbindung in die nativen Builds zu finden sind.
  • Nachdem Sie Änderungen an " capacitor.config.json" vorgenommen haben, müssen Sie " cap sync " ausführen, um sicherzustellen, dass Ihre nativen Projekte aktualisiert werden.

Als nächstes werden wir Ihnen zeigen, wie Sie diese Einstellungen anpassen können, um Ihre Builds noch weiter anzupassen.

Modifizierung von Build-Skripten

Sie können das Standard-Build-Prozess von Capacitor an Ihre Projektbedürfnisse anpassen. Hier ist, wie Sie es tun können:

Konfigurationsdatei-Einstellungen

Sie können das Build-Prozess durch die Bearbeitung der " capacitor.config.json Datei anpassen. Hier ist ein Beispielkonfiguration:

{
  "appId": "com.example.app",
  "webDir": "www",
  "server": {
    "hostname": "localhost",
    "androidScheme": "https",
    "iosScheme": "https",
    "allowNavigation": ["*.example.com"]
  },
  "android": {
    "buildOptions": {
      "keystorePath": "release.keystore",
      "keystorePassword": "mypassword",
      "keystoreAlias": "release",
      "keystoreAliasPassword": "mypassword"
    }
  },
  "ios": {
    "scheme": "App",
    "automaticProvisioning": true
  }
}

Hier sind einige Schlüssel-Einstellungen, die Sie anpassen können:

  • webDirLegt fest, wo Ihre kompilierten Web-Ressourcen sich befinden.
  • server: Konfiguriert den Entwicklungs-Server, einschließlich Hostname und Navigationsberechtigungen.
  • android/ios: Ermöglicht Plattform-spezifische Build-Einstellungen, wie z.B. Keystore-Daten für Android oder Provisionierungsoptionen für iOS.

Erstellen Sie NPM-Skripte

Um Ihren Workflow zu vereinfachen, fügen Sie benutzerdefinierte NPM-Skripte Ihrem package.json Datei. Hier ist ein Beispiel:

{
  "scripts": {
    "prebuild": "node ./scripts/prepare-env.js",
    "build": "npm run build:web && cap sync",
    "build:web": "vite build",
    "build:ios": "cap build ios --release",
    "build:android": "cap build android --release",
    "postbuild": "node ./scripts/notify-completion.js"
  }
}
  • prebuild und postbuild: Verwenden Sie diese für Aufgaben wie die Einrichtung der Umgebung oder die Benachrichtigung bei Abschluss der Build-Phase.
  • build:platform: Plattform-spezifische Befehle zum Erstellen von Android- oder iOS-Anwendungen.

Sie können die Automatisierung sogar weiterführen, indem Sie Build-Hooks hinzufügen.

Build-Hooks-Setup

Für eine umfassendere Kontrolle verwenden Sie Build-Hooks, um benutzerdefinierte code-Skripte an bestimmten Punkten während des Build-Prozesses auszuführen. Hier ist ein Beispiel-Setup in capacitor.config.ts:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  plugins: {
    CapacitorHooks: {
      beforeBuild: async () => {
        console.log('Running pre-build tasks...');
        // Add your pre-build tasks here
      },
      afterBuild: async () => {
        console.log('Running post-build tasks...');
        // Add your post-build tasks here
      }
    }
  }
};

export default config;

Mit Build-Hooks können Sie:

  • Überprüfen Sie die Anforderungen, bevor der Build beginnt
  • Transformieren Sie Assets während des Prozesses
  • Auslösen Sie Benachrichtigungen an wichtigen Punkten
  • Aktualisieren Sie die Versionsnummern automatisch
  • Führen Sie automatisierte Tests reibungslos durch

Diese Vorgehensweise bietet Ihnen mehr Flexibilität und Kontrolle über den gesamten Build-Lebenszyklus

Erweiterte Build-Anpassungen

Bei größeren Projekten kann die Feinabstimmung Ihres Build-Prozesses einen großen Unterschied machen. Hier erfahren Sie, wie Sie Umgebungsabhängige Builds und Plattformanpassungen effektiv handhaben können

Umgebungsvariablen

Richten Sie Umgebungsvariablen ein, indem Sie separate Dateien für jede Umgebung erstellen: .env Konfigurieren Sie dann Ihren Build-Script, um die entsprechende Datei auf der Grundlage der Umgebung zu laden:

  • .env.development
  • .env.staging
  • .env.production

__CAPGO_KEEP_0__

import { defineConfig } from '@capacitor/cli';

export default defineConfig({
  ios: {
    buildConfig: {
      environment: process.env.BUILD_ENV || 'development',
      configurations: {
        development: {
          signing: {
            debug: true,
            automaticProvisioning: true
          }
        },
        production: {
          signing: {
            release: true,
            provisioningProfile: 'dist/profile.mobileprovision'
          }
        }
      }
    }
  }
});

Sie können diese Einstellungen weiter anpassen, um sie den Plattform-spezifischen Anforderungen anzupassen.

Plattform-spezifische Builds

Um Builds für Android und iOS anzupassen, verwenden Sie die folgende Struktur:

const platformConfig = {
  android: {
    buildType: process.env.BUILD_TYPE || 'debug',
    keystoreConfig: {
      path: process.env.KEYSTORE_PATH,
      password: process.env.KEYSTORE_PASSWORD,
      alias: process.env.KEYSTORE_ALIAS
    }
  },
  ios: {
    scheme: process.env.APP_SCHEME || 'App',
    xcodePreferences: {
      automaticSigning: false,
      developmentTeam: process.env.DEVELOPMENT_TEAM
    }
  }
};

Diese Konfigurationen ermöglichen Ihnen, Builds für jede Plattform anzupassen, um eine glattere Bereitstellung zu gewährleisten.

FunktionAndroidiOS
Debug-SymbolsProGuard Mapping-DateiendSYM-Dateien
Build-VariantenDebug, Release, StagingDebug, Release
Code SignierungKeystore-VerwaltungProvisioning-Profile-Verwaltung
Asset-VerwaltungOptimierung von res/drawableAsset-Kataloge

Zusätzliche Tipps zur Optimierung Ihrer Builds umfassen:

  • Verwendung von Teilaktualisierungen, um Zeit während der Bereitstellung zu sparen
  • Einrichten von Fehlermeldungen, um Probleme schnell zu identifizieren
  • Erstellen von Kanal-Systemen für Beta-Testversionen
  • Sicherstellung der Ende-zu-Ende-Verschlüsselung für sichere Verteilung

Wenn Sie diese Techniken mit Werkzeugen wie Capgo für Analysen und sichere Updates kombinieren, haben Sie mehr Kontrolle über Ihren Bereitstellungsprozess [1].

Probleme und Lösungen im Build-Script

Wenn Sie mit benutzerdefinierten Build-Konfigurationen arbeiten, ist es wichtig, Fehler schnell zu lösen, um den Build-Prozess reibungslos laufen zu lassen

Häufige Fehler beheben

Viele Probleme im Build-Script resultieren aus Umgebungs- oder Abhängigkeitsproblemen. Hier erfahren Sie, wie Sie einige häufige Probleme lösen können:

Fehlende Umgebungsvariablen

Wenn Sie einen Fehler wie diesen begegnen:

error: Cannot find environment configuration for BUILD_ENV

Sie können ihn beheben, indem Sie ein .env.local Datei in der Wurzel Ihres Projekts erstellen. Hier ist ein Beispiel:

BUILD_ENV=development
CAPACITOR_PLATFORM=ios
BUILD_TYPE=debug

Fehler bei der Plattform-spezifischen Build-Verarbeitung

Für Android-Signierungsfehler verwenden Sie diesen Befehl:

npx cap build android --keystorePassword=$KEYSTORE_PASSWORD --keystoreAlias=$KEYSTORE_ALIAS

Für iOS-Provisioning-Profilprobleme, versuchen Sie Folgendes:

npx cap build ios --configuration=release --type=development
__CAPGO_KEEP_0____CAPGO_KEEP_1____CAPGO_KEEP_2__
__CAPGO_KEEP_3____CAPGO_KEEP_4____CAPGO_KEEP_5__ KEYSTORE_PATH __CAPGO_KEEP_6__
__CAPGO_KEEP_7____CAPGO_KEEP_8____CAPGO_KEEP_9__ .env __CAPGO_KEEP_10__
AbhängigkeitenVersionen stimmen nicht übereinAktualisieren package.json und synchronisieren

Nachdem Sie die Reparaturen angewendet haben, stellen Sie sicher, dass Ihre Änderungen stabil sind, indem Sie gründliche Build-Tests durchführen.

Test Build Scripts

Sobald die Fehler behoben sind, überprüfen Sie Ihre Build-Skripte mit diesen Schritten:

  • Automatisierte Verifizierung: Führen Sie wichtige Befehle aus, um sicherzustellen, dass der Build-Prozess wie erwartet funktioniert.
npm run build
npx cap sync
npx cap copy
  • Umgebungserfassung: Überprüfen Sie fehlende Umgebungsvariablen, bevor Sie den Build starten.
const requiredVars = ['BUILD_ENV', 'KEYSTORE_PATH'];
requiredVars.forEach(varName => {
  if (!process.env[varName]) {
    throw new Error(`Missing required env var: ${varName}`);
  }
});
  • Build-Skript-Debugging: Fügen Sie detaillierte Skripte hinzu, um potenzielle Probleme während der Erstellung zu erkennen.
{
  "scripts": {
    "build:debug": "NODE_ENV=development npx cap build --verbose",
    "build:release": "NODE_ENV=production npx cap build --verbose"
  }
}

Zusätzliche Tipps für die Testung:

  • Verwenden Sie Docker Container, um Builds zu isolieren.
  • Überprüfen Sie die Konfigurationsdateien, bevor Sie den Prozess starten.
  • Testen Sie mit mehreren Node.js Versionen.
  • Bestätigen Sie, dass die Plattform-spezifischen Anforderungen erfüllt sind.
  • Beobachten Sie die Build-Leistung, um mögliche Verbesserungen zu erkennen.

Capgo Funktionen entwickeln

Capgo Live Update Dashboard Interface

Capgo bringt Build-Skripte auf ein neues Niveau, indem es die automatisierte Bereitstellung einführt, die Effizienz erhöht und den Prozess vereinfacht.

Schnelle App-Updates

Capgo’s Update-Leistung ist beeindruckend:

  • 95% der aktiven Benutzer erhalten Updates innerhalb von 24 Stunden.
  • 82% Erfolgsrate für die weltweite Lieferung von Updates.
  • Ein durchschnittlicher API-Antwortzeit von 434ms weltweit.

Die Plattform verwendet partielle Updates, was bedeutet, dass nur die Änderungen heruntergeladen werden. Diese Vorgehensweise reduziert den Bandbreitenverbrauch und beschleunigt den Update-Prozess. Zudem ist der gesamte Build-Prozess vollautomatisiert, was Zeit und Mühe spart.

Automatisierung von Build-Prozessen

Capgo funktioniert nahtlos mit den wichtigsten CI/CD-Plattformen und bietet eine Vielzahl von Integrationsmöglichkeiten:

CI/CD-PlattformIntegrationseigenschaftenVorteile
GitHub-AktionenAutomatisierte Builds, Deploy-AuslöserKontinuierliche Bereitstellung
GitLab CIPipeline-Automatisierung, VersionskontrolleGestreamte Workflow
JenkinsBenutzerdefinierte Workflows, Build-HooksSkalierbar für Unternehmen

Die Einrichtung eines automatischen Builds kostet typischerweise etwa __CAPGO_KEEP_0__dies ist weitaus budgetfreundlicher als traditionelle Lösungen, die bis zu Sicherheitsstandards.

__CAPGO_KEEP_0__ priorisiert die Sicherheit mit einem robusten Framework, das Folgendes umfasst:

Capgo prioritizes security with a robust framework that includes:

  • Sichere Schlüsselverwaltung.
  • Einhaltung der Richtlinien von Apple und Google.
  • Versionierungssteuerungsfunktionen

Version Control Features

  • Instant-Rollback-Optionen.
  • Versionen der Bereitstellung verfolgen.
  • Update-Kanal-Verwaltung für gestaffelte Veröffentlichungen.

Diese Sicherheitsframework wurde sorgfältig getestet in Hunderten von Unternehmen-Anwendungen. Für Teams, die zusätzliche Sicherheit benötigen, bietet Capgo auch selbst gehostete Lösungen mit anpassbaren Konfigurationen.

Das Kanalsystem von Capgo ermöglicht flexible Update-Verteilung. Entwickler können spezifische Benutzergruppen mit verschiedenen Versionen ansprechen, ideal für Beta-Tests oder schrittweise Veröffentlichungen.

Zusammenfassung

Übersicht über die Build-Schritte

Benutzerdefinierte Build-Skripte ermöglichen automatisierte und konsistente Bereitstellungen, indem sie Build-Hooks, Umgebungsvariablen und plattformspezifische Befehle nutzen. Diese Prozesse schaffen eine solide Grundlage für Bereitstellungsverbesserungen, die mit Capgo möglich sind.

Capgo-Vorteile

Capgo vereinfacht die Bereitstellung, indem es erfolgreich über 23,5 Millionen Updates in 750 Produktionsanwendungen geliefert hat. [1]Sein teilweiser Update-System reduziert sowohl den Bandbreitenverbrauch als auch die Bereitstellungsdauer.

Die Plattform bietet schnelle Updates, globale Leistungsoptimierung, Ende-zu-Ende-Verschlüsselung für die Sicherheit und ein flexibles, kanalbasiertes Verteilungssystem. Diese Konfiguration unterstützt zielgerichtete Updates, Beta-Tests und die Einhaltung von Richtlinien der App-Store, während eine starke Sicherheitsframework beibehalten wird.

Live-Updates für Capacitor-Anwendungen

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

Los geht's jetzt

Neueste von unserem Blog

Capgo bietet Ihnen die besten Einblicke, um eine wirklich professionelle mobile App zu erstellen.