Zum Hauptinhalt springen

Wie man Build-Skripte mit Capacitor CLI anpasst

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

Martin Donadieu

Martin Donadieu

Content-Marketing-Spezialist

Wie man Build-Skripte mit Capacitor CLI anpasst

Capacitor CLI ermöglicht die Anpassung Ihres App-Build-Prozesses für iOS, Android und Web-Plattformen. Durch die Anpassung von Build-Skripten können Sie:

  • Updates beschleunigen: Änderungen sofort ohne App-Store-Verzögerungen durchführen.
  • Deployments schützen: Zurücksetzen Sie Updates oder richten Sie bestimmte Benutzergruppen ein.
  • App sichern: Verwenden Sie Verschlüsselung, um Updates zu schützen.
  • Builds optimieren: Passen Sie Einstellungen an, um Plattform-spezifische Bedürfnisse zu erfüllen.

Zusammenfassung der Schlüsselfunktionen:

  • Konfigurationsdateien: Verwenden Sie capacitor.config.json und package.json um die Einstellungen für die Build-Verarbeitung zu verwalten.
  • Benutzerdefinierte Skripte: Fügen Sie Auf- und Abbaubefehle für die Automatisierung hinzu.
  • Build Hooks: Führen Sie code während bestimmter Phasen des Build-Prozesses aus.
  • Environment Variables: Vereinfachen Sie Builds für bestimmte Umgebungen mit .env files.

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

Standardbauprozess 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-App in plattform-spezifische Builds umzuwandeln. Hier ist, was während des Standardbauprozesses passiert:

PhaseBeschreibungAusgabe
Web-BuildKompilet Web-Assets mithilfe Ihrer Framework-ToolsOptimiertes Web-Bundle
Assets kopierenVerschiebt Web-Assets in native Plattform-OrdnerPlattform-spezifische Asset-Ordner
Natives BuildAusführt plattform-spezifische Build-BefehleBereitstellungsbinarys
ÜberprüfungÜberprüft die Build-Integrität und AbhängigkeitenBuild-Status und Warnungen

Haupt-Konfigurationsdateien

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 das 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 tells Capacitor wo Ihre kompilierten Web-Assets für die Einbindung in die nativen Builds zu finden sind.
  • Nachdem Sie Änderungen vorgenommen haben capacitor.config.json, Sie müssen aktualisieren. cap sync Damit Ihre native Projekte auf dem neuesten Stand sind.

Zu diesem Zweck werden wir Ihnen zeigen, wie Sie diese Einstellungen anpassen können, um Ihre Builds noch weiter anzupassen.

Build-Script-Modifikation

Sie können die Standardbuild-Prozesse von Capacitor an Ihre Projektbedürfnisse anpassen. Hier ist, wie Sie das 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 Schlüsselfunktionen, die Sie anpassen können:

  • webDir: Legt den Speicherort Ihrer kompilierten Web-Assets fest.
  • server: Konfiguriert den Entwicklungsserver, einschließlich Hostname und Navigationsberechtigungen.
  • android/ios: Ermöglicht plattformspezifische Build-Einstellungen, wie z.B. Keystore-Daten für Android oder Provisionierungsoptionen für iOS.

Erstellung von NPM Skripten

Um Ihren Workflow zu beschleunigen, fügen Sie benutzerdefinierte NPM Skripte Ihrem Projekt hinzu. Hier ist ein Beispiel: package.json und

{
  "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 : Verwenden Sie diese für Aufgaben wie die Einrichtung der Umgebung oder die Benachrichtigung bei Abschluss der Build-Phase. postbuild: Plattform-spezifische Befehle für die Erstellung von Android- oder iOS-Anwendungen.
  • build:platformSie können die Automatisierung noch weiter vorantreiben, indem Sie Build-Hooks hinzufügen.

Build-Hooks-Einstellungen

Für eine umfassendere Kontrolle verwenden Sie Build-Hooks, um benutzerdefinierte __CAPGO_KEEP_0__ an bestimmten Punkten während des Build-Prozesses auszuführen. Hier ist ein Beispiel für eine Einstellung in

For more advanced control, use build hooks to execute custom code at specific points during the build process. Here’s an example 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;

Vor dem Build-Start die Anforderungen überprüfen

  • Während des Prozesses Assets transformieren
  • __CAPGO_KEEP_0__
  • Benachrichtigungen auslösen an wichtigen Punkten
  • Versionsnummern automatisch aktualisieren
  • Automatisierte Tests reibungslos durchführen

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

Umgebungsvariablen einrichten, indem Sie separate .env Dateien für jede Umgebung erstellen:

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

Dann konfigurieren Sie Ihren Build-Skript, um die entsprechende Datei auf der Grundlage der Umgebung zu laden:

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 Plattform-spezifische Anforderungen zu erfüllen.

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 MappingdateiendSYM-Dateien
Build-Variantendebug, release, stagingdebug, release
Code SignierungVerwaltung des KeystoresProvisioning-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
  • Aktivieren der Ende-zu-Ende-Verschlüsselung für sichere Verteilung

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

Build-Script-Probleme & Lösungen

Bei der Arbeit mit benutzerdefinierten Build-Konfigurationen ist es entscheidend, Fehler schnell zu lösen, um den Build-Prozess reibungslos laufen zu lassen.

Häufige Fehler beheben

Viele Build-Script-Probleme rühren von der Umgebungs-Einstellung oder von Abhängigkeitsproblemen her. Hier sind einige Lösungen für häufige Probleme:

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 Root-Verzeichnis Ihres Projekts erstellen. Hier ist ein Beispiel:

BUILD_ENV=development
CAPACITOR_PLATFORM=ios
BUILD_TYPE=debug

Plattform-spezifische Build-Fehler

Für Android-Signierungsfehler verwenden Sie diesen Befehl:

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

Für iOS-Provisioning-Profile-Probleme versuchen Sie es mit diesem:

npx cap build ios --configuration=release --type=development
Fehler-TypGemeinsame UrsacheLösung
Signierungs-KonfigurationFehlende Keystore-DatenSetzen KEYSTORE_PATH und Anmeldeinformationen
Build-UmgebungUngewisse VariablenErstellen plattform-spezifische .env Dateien
AbhängigkeitenVersionen stimmen nicht übereinAktualisierung package.json und Synchronisierung

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

Test Build-Skripte

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 des Builds 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:

  • Benutzen Docker-Container, um Builds zu isolieren. Überprüfen Sie die Konfigurationsdateien, bevor Sie den Prozess starten.
  • Testen Sie mit mehreren
  • Node.js Versionen. Stellen Sie sicher, dass die Plattform-Anforderungen erfüllt sind.
  • Beachten Sie die Build-Leistung für mögliche Verbesserungen.
  • __CAPGO_KEEP_0__

Capgo __CAPGO_KEEP_0__ Live-Update-Dashboard-Interface

Capgo

Capgo bringt Build-Skripte auf ein neues Niveau mit automatisierter Bereitstellung, wodurch die Effizienz erhöht und der Prozess vereinfacht wird.

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.

Automatisierte Build-Prozesse

Capgo funktioniert reibungslos mit den größten CI/CD-Plattformen, bietet eine Vielzahl von Integrationsmöglichkeiten:

CI/CD-PlattformIntegrationseigenschaftenVorteile
GitHub AktionenAutomatisierte Builds, Deploy-TriggerKontinuierliche Bereitstellung
GitLab CIPipeline-Automatisierung, VersionskontrolleGestrafter Workflow
JenkinsBenutzerdefinierte Workflows, Build-HooksSkalierbar für Unternehmen

Die Einrichtung einer automatischen Build-Prozess kostet typischerweise etwa 300 US-Dollar pro Monat, was deutlich budgetfreundlicher ist im Vergleich zu traditionellen Lösungen, die bis zu 6.000 US-Dollar pro Jahr.

Sicherheitsstandards

Capgo legt den Schwerpunkt auf Sicherheit mit einem robusten Framework, das Folgendes umfasst:

  • End-to-end-Verschlüsselung für Update-Pakete.
  • Sichere Schlüsselverwaltung.
  • Einhaltung der Richtlinien von Apple und Google.

Versionierungssteuerung

  • Schnelle Rollback-Optionen.
  • Versionen der Bereitstellung verfolgen.
  • Updatekanal-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 macht die Update-Verteilung flexibel. Entwickler können spezifische Benutzergruppen mit verschiedenen Versionen ansprechen, ideal für Beta-Tests oder schrittweise Rollouts.

Zusammenfassung

Übersicht der 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 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 teilweises 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 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 aufrechterhalten wird.

Weitermachen von Wie man Build-Skripte mit Capacitor CLI anpasst.

Wenn Sie __CAPGO_KEEP_1__ verwenden Wie man Build-Skripte anpasst mit Capacitor CLI um die CI/CD-Automatisierung zu planen, mit ihr zu verbinden Capgo CI/CD-Integration für den Produktworkflow in Capgo CI/CD-Integration Capgo Native Builds-Integration für den Produktworkflow in Capgo Native Builds-Integration Capgo Integrations-Integration für den Produktworkflow in Capgo Integrations-Integration 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-Anwendungen

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

Los geht's jetzt

Aktuelle Beiträge aus unserem Blog

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