Zum Hauptinhalt springen

Wie Sie die Capacitor CLI für die Anpassung Ihrer Build-Skripte konfigurieren können

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

Martin Donadieu

Martin Donadieu

Inhaltsmarketer

Wie Sie die Capacitor CLI für die Anpassung Ihrer Build-Skripte konfigurieren können

Capacitor ermöglicht Ihnen, den Build-Prozess Ihrer App für iOS, Android und Web-Plattformen anzupassen. Durch die Anpassung von Build-Skripten können Sie: CLI lets you customize your app’s build process for iOS, Android, and web platforms. By tweaking build scripts, you can:

  • Erhöhen Sie die Aktualisierungsrate: Pushen Sie Änderungen sofort ohne Verzögerung durch das App-Store.
  • Kontrollieren Sie die Bereitstellung: Rollen Sie Updates zurück oder richten Sie spezifische Benutzergruppen ein.
  • Sichern Sie Ihre App: Verwenden Sie Verschlüsselung, um Updates zu schützen.
  • Optimieren Sie die Builds: Passen Sie Einstellungen an, um Plattform-spezifische Bedürfnisse zu erfüllen.

Schnelle Übersicht der Schlüsselfunktionen:

  • Konfigurationsdateien: Verwenden Sie __CAPGO_KEEP_0__ und __CAPGO_KEEP_1__. capacitor.config.json __CAPGO_KEEP_0__ und __CAPGO_KEEP_1__ package.json um die Build-Einstellungen zu verwalten.
  • Benutzerdefinierte Skripte: Fügen Sie Vorbau- und Nachbauaufgaben für die Automatisierung hinzu.
  • Build Hooks: Führen Sie code während bestimmter Phasen des Build-Prozesses aus.
  • Umgebungsvariablen: Vereinfachen Sie Builds für bestimmte Umgebungen 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

Es ist wichtig, zu verstehen, wie Capacitor seinen Standardbauprozess handhabt, wenn Sie ihn anpassen möchten. Hier unten wird der Bauprozess von Capacitor CLI und seine Schlüsselkonfigurationsdateien aufgeschlüsselt.

Standardbauschritte

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

Phase Beschreibung Ausgabe
Web Build Mit Ihren Framework-Tools werden Web-Assets kompiliert Optimierter Web-Bundle
Copy Assets Web-Assets werden in native Plattform-Ordner verschoben Plattform-spezifische Asset-Ordner
Native Build Plattform-spezifische Build-Befehle werden ausgeführt Binärdateien zum Bereitstellen
Überprüfung Sicherheit und Abhängigkeiten werden überprüft Build-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-eigenen Einstellungen, wie z.B. Optionen für den SplashScreen.

package.json
Diese Datei enthält Build-Skripte und Abhängigkeiten, die das 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-Assets für die Einbindung in die nativen Builds zu finden sind.
  • Nachdem Sie Änderungen an " capacitor.config.json", 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 der Build-Skripte

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 den Build-Prozess durch die Bearbeitung der " capacitor.config.json Konfigurationsdatei" 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 wichtige Einstellungen, die Sie anpassen können:

  • webDir: Legt fest, wo Ihre kompilierten Web-Assets 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 für die Erstellung von Android- oder iOS-Anwendungen.

Sie können die Automatisierung noch weiter vorantreiben, 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 im Build-Prozess 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-Anpassung

Bei größeren Projekten kann die Feinabstimmung Ihres Build-Prozesses einen großen Unterschied machen. Hier erfahren Sie, wie Sie Umgebungs-spezifische Builds und Plattform-Anpassungen effektiv handhaben können.

Umgebungsvariablen

Konfigurieren Sie Umgebungsvariablen, indem Sie separate Dateien für jede Umgebung erstellen: .env Dann konfigurieren Sie Ihren Build-Skript, 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.

Funktion Android iOS
Debug Symbols ProGuard mapping-Dateien dSYM-Dateien
Build-Varianten Debug, Release, Staging Debug, Release
Code Signierung Keystore-Verwaltung Provisionierungsprofile
Asset-Verwaltung Optimierung von res/drawable Asset-Kataloge

Zusätzliche Tipps zur Optimierung Ihrer Builds umfassen:

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

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 für Build-Skripte

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

Gemeinsame Fehler beheben

Viele Probleme mit Build-Skripten gehen auf Umgebungs- oder Abhängigkeitsprobleme zurück. 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

Plattformspezifische Build-Fehler

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ängigkeiten Versionen stimmen nicht überein Aktualisieren 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 Features entwickeln

Capgo Live Update Dashboard Interface

Capgo bringt Build-Skripte auf ein neues Level, indem es eine automatisierte Bereitstellung ermöglicht, die Effizienz erhöht und den Prozess vereinfacht.

Schnelle App-Updates

Capgo’s Update-Leistung ist beeindruckend:

  • 95% der aktiven Nutzer 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 vollständig automatisiert, was Zeit und Mühe spart.

Automatisierung von Build-Prozessen

Capgo funktioniert nahtlos mit den wichtigsten CI/CD-Plattformen, wobei eine Vielzahl von Integrationsmöglichkeiten angeboten wird:

CI/CD-Plattform Integrationseigenschaften Vorteile
GitHub-Aktionen Automatisierte Builds, Deploy-Auslöser Kontinuierliche Bereitstellung
GitLab CI Pipeline-Automatisierung, Versionskontrolle Gestrafter Workflow
Jenkins Benutzerdefinierte Workflows, Build-Hooks Skalierbar für Unternehmen

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

__CAPGO_KEEP_0__ legt den Schwerpunkt auf 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

__CAPGO_KEEP_0__

  • Instant-Rollback-Optionen.
  • Versionenverfolgung bei der Bereitstellung.
  • Update-Kanal-Verwaltung für gestaffelte Releases.

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

Capgo’s Kanal-System ermöglicht flexible Update-Verteilung. Entwickler können spezifische Benutzergruppen mit verschiedenen Versionen ansprechen, ideal für Beta-Tests oder schrittweise Releases.

Zusammenfassung

Übersicht über die Build-Schritte

Benutzerdefinierte Build-Skripte ermöglichen automatisierte und konsistente Bereitstellungen, indem sie Build-Hooks, Umgebungsvariablen und plattform-spezifische Befehle nutzen. Diese Prozesse schaffen eine solide Grundlage für Bereitstellungsvorlagen, die mit Capgo verbessert werden können.

Capgo-Vorteile

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

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

Bleiben Sie bei der Anpassung von Build-Skripten mit Capacitor CLI

Wenn Sie " Anpassen von Build-Skripten mit Capacitor CLI um die CI/CD-Automatisierung zu planen, 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 für die Implementierungsdetails in CI/CD-Integration, und GitHub Aktionen-Integration für die Implementierungsdetails in GitHub Aktionen-Integration.

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 vorliegt. Die Benutzer erhalten die Aktualisierung im Hintergrund, während native Änderungen im normalen Review-Verfahren bleiben.

Los geht's jetzt

Neueste Beiträge aus unserem Blog

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