Zum Hauptinhalt springen

Wie man Build-Skripte mit Capacitor CLI anpasst

Erfahren 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

Content Marketer

Wie Sie Build-Skripte mit Capacitor CLI anpassen können

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

  • Schnellere Updates: Änderungen sofort ohne App-Store-Verzögerungen durchführen.
  • Bereitstellungssteuerung: Updates rückgängig machen oder bestimmte Benutzergruppen ansprechen.
  • Sicherheit Ihrer App: Verwenden Sie Verschlüsselung, um Updates zu schützen.
  • Optimieren Sie Builds: Passen Sie die Einstellungen an, um auf Plattformen spezifische Bedürfnisse zu erfüllen.

Schnelle Übersicht der Schlüsselfeatures:

  • Konfigurationsdateien: Verwenden Sie capacitor.config.json und package.json um die Build-Einstellungen zu verwalten.
  • Benutzerdefinierte Skripte: Fügen Sie Vorbau- und Nachbauaufgaben hinzu, um die Automatisierung zu ermöglichen.
  • Build-Hooks: Führen Sie code während bestimmter Phasen des Build-Prozesses aus.
  • Umgebungsvariablen: Vereinfachen Sie umgebungsabhängige Builds mit .env Dateien.

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

Einführung Capacitor Konfigurieren

Capacitor Framework-Dokumentationswebsite

Standarder Build Prozess in Capacitor

Es ist wichtig, wie Capacitor seinen Standardbuildprozess handhabt, wenn Sie ihn effektiv anpassen möchten. Im Folgenden werden wir den Buildprozess von Capacitor CLI und seine Schlüsselkonfigurationsdateien aufschlüsseln.

Standard Build Schritte

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

PhaseBeschreibungAusgabe
Web BuildKompiliert Web-Assets mit Ihren Framework-ToolsOptimierter Web-Bundle
Copy AssetsÜberträgt Web-Assets in native Plattform-OrdnerPlattform-spezifische Asset-Ordner
Natives BuildFührt plattform-spezifische Build-Befehle ausBereit für die Bereitstellung Binärdateien
VerifizierungÜberprüft die Integrität und Abhängigkeiten des BuildsBuild-Status und Warnungen

Haupt-Konfigurationsdateien

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

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 Kennung für Ihre App.
  • appNameDie Bezeichnung Ihrer App.
  • webDirLegt fest, wo Capacitor nach den Web-Ressourcen suchen soll (z.B. dist).
  • pluginsErmöglicht die Konfiguration von Plugin-spezifischen Einstellungen, wie z.B. Optionen für den SplashScreen.

package.json
Dieses 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"
  }
}
  • Der webDir Einstellung in capacitor.config.json sagt Capacitor an, wo Ihre kompilierten Web-Ressourcen 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 sehen, wie Sie diese Einstellungen anpassen können, um Ihre Builds noch weiter zu individualisieren.

Modifizieren Sie die Build-Skripte

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

Konfigurationsdatei-Einstellungen

Sie können den Buildprozess 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üsselinstellungen, die Sie anpassen können:

  • webDir: Legt den Speicherort Ihrer kompilierten Webressourcen fest.
  • server: Konfiguriert den Entwicklungs-Server, einschließlich Hostname und Navigationsberechtigungen.
  • android/ios: Erstellt plattformspezifische Build-Einstellungen, wie z.B. Schlüsselbankdetails für Android oder Bereitstellungsoptionen für iOS.

Erstellen von NPM-Skripten

Um Ihren Workflow zu vereinfachen, fügen Sie benutzerdefinierte NPM-Skripte Ihrer package.json datei hinzu. 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, wenn der Build abgeschlossen ist.
  • build:platform: Plattform-spezifische Befehle für die Erstellung von Android- oder iOS-Apps.

Sie können die Automatisierung noch weiter vorantreiben, indem Sie Build-Hooks hinzufügen.

Build-Hooks-Setup

Für mehrere Kontrolle verwenden Sie Build-Hooks, um benutzerdefinierte code an bestimmten Punkten während des Build-Prozesses auszuführen. Hier ist ein Beispiel für eine Einrichtung 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

Dieser Ansatz bietet Ihnen mehr Flexibilität und Kontrolle über das gesamte Build-Lebenszyklus.

Erweiterte Build-Konfiguration

Wenn Sie an größeren Projekten arbeiten, kann die Feinabstimmung Ihres Build-Prozesses einen großen Unterschied machen. Hier erfahren Sie, wie Sie Umgebungsabhängige Builds und Plattform-Konfigurationen 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 basierend auf der Umgebung zu laden:

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

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

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'
          }
        }
      }
    }
  }
});

Plattform-spezifische Builds

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

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

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
    }
  }
};

Feature

FeatureAndroidiOS
Debug SymbolsProGuard mapping filesdSYM-Dateien
Build Variantedebug, release, Stagingdebug, release
Code SignierungKeystore-VerwaltungProvisioning-Profile-Verwaltung
Asset Managementres/drawable-OptimierungAsset-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 Tools wie Capgo für Analysen und sichere Updates verwenden, bieten diese Techniken Ihnen mehr Kontrolle über Ihren Bereitstellungsprozess [1].

Build-Script-Probleme & Lösungen

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

Häufige Fehler beheben

Viele Probleme bei den Build-Skripten gehen auf eine fehlerhafte Umgebungs- oder Abhängigkeitskonfiguration zurück. Hier sind einige gängige Probleme und Lösungen:

Fehlende Umgebungsvariablen

Wenn Sie ein 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

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-Profile-Probleme versuchen Sie es mit diesem:

npx cap build ios --configuration=release --type=development
FehlerartGemeinsame UrsacheLösung
Signierungs-KonfigurationFehlende Keystore-DatenEinstellen KEYSTORE_PATH und Anmeldeinformationen
Build-UmgebungUngewisse VariablenErstellen Sie plattform-spezifische .env Dateien
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 Schlüsselkommandos aus, um sicherzustellen, dass der Build-Prozess wie erwartet funktioniert.
npm run build
npx cap sync
npx cap copy
  • Umgebungserkennung: Ü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}`);
  }
});
  • Fehlersuche in den Build-Skripten: 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:

  • Verwenden Sie Docker- Container, um Builds zu isolieren.
  • Konfigurationsdateien vor dem Start des Prozesses überprüfen.
  • Mit mehreren Node.js Versionen testen.
  • Stellen Sie sicher, dass die Plattform-spezifischen Anforderungen erfüllt sind.
  • Beachten Sie die Build-Leistung für mögliche Verbesserungen.

Capgo Build Features

Capgo Live Update Dashboard Interface

Capgo bringt Build-Skripte auf ein neues Level 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 Sie Updates innerhalb von 24 Stunden.
  • 82% Erfolgssatz für weltweite Lieferungen von Updates.
  • Ein durchschnittlicher API Antwortzeit 434ms global.

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

Automatisierung der Build-Prozesse

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

CI/CD-PlattformIntegration FunktionenVorteile
GitHub ActionsAutomatisierte Builds, Deploy-TriggerKontinuierliche Bereitstellung
GitLab CIPipeline-Automatisierung, VersionskontrolleGestreamte Workflow
JenkinsBenutzerdefinierte Workflows, Build-HooksSkalierbar für Unternehmen

Die Einrichtung eines automatisierten Builds kostet typischerweise etwa 300 Euro pro Monat, was deutlich budgetfreundlicher ist im Vergleich zu traditionellen Lösungen, die bis zu 6.000 $ pro Jahr.

Sicherheitsstandards

Capgo legt den Schwerpunkt auf die 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.

Funktionen für Versionskontrolle

  • Schnelle Rollover-Optionen.
  • Verfolgung der Versionsnummer der Bereitstellung.
  • Verwaltung von Update-Kanälen für gestaffelte Releases.

Dieses Sicherheitsframework wurde sorgfältig auf Hunderten 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-Test oder schrittweise Rollouts.

Zusammenfassung

Übersicht über die Build-Schritte

Custom build scripts allow for automated and consistent deployments by leveraging build hooks, environment variables, and platform-specific commands. These processes create a solid foundation for deployment improvements made possible with Capgo.

Vorteile von Capgo

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 Bereitstellungszeit.

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-Testungen und die Einhaltung von Richtlinien der App-Store, während ein starkes Sicherheitsframework beibehalten wird.

Live-Updates für Capacitor-Apps

Wenn ein Web-Schicht-Bug live ist, liefern Sie die Reparatur über Capgo und nicht warten Sie Tage für die Genehmigung der App-Store. Die Benutzer erhalten das Update im Hintergrund, während native Änderungen im normalen Review-Verfahren bleiben.

Los geht's jetzt

Neueste Beiträge aus unserem Blog

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