Zum Hauptinhalt springen

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

Erhalten Sie Informationen darüber, wie Sie Build-Skripte mit Capacitor CLI anpassen können, um effiziente Bereitstellungen und zugeschnittene App-Updates auf verschiedenen Plattformen zu ermöglichen

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

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

  • Updates beschleunigen: Änderungen sofort ohne App-Store-Verzögerungen durchführen.
  • Deployments steuern: Updates rückgängig machen oder bestimmte Benutzergruppen auswählen.
  • Die Anwendung sichern: Verschlüsselung verwenden, um Updates zu schützen.
  • Builds optimieren: Einstellungen an die Plattform angepasst anpassen.

Zusammenfassung der Schlüsselfunktionen:

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

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

Vorstellung Capacitor Konfigurieren Sie

Capacitor Framework Dokumentationswebsite

Standardbauprozess in Capacitor

Um den Standardbauprozess von Capacitor effektiv anzupassen, ist es wichtig, zu verstehen, wie Capacitor seinen Standardbauprozess handhabt. Im Folgenden werden wir den Capacitor CLI-Bauprozess und seine Schlüsselkonfigurationsdateien aufschlüsseln.

Standardbauschritte

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:

Phase Beschreibung Ausgabe
Web Build Compiliert Web-Assets mit Ihren Framework-Tools Optimiertes Web-Bundle
Copy Assets Überträgt Web-Assets in native Plattform-Ordner Plattform-spezifische Asset-Ordner
Native Build Ausführt plattform-spezifische Build-Befehle Bereit zum Bereitstellen Binärdateien
Überprüfung Überprüft die Build-Integrität und Abhängigkeiten Build-Status und Warnungen

Hauptkonfigurationsdateien

Two key configuration files shape how Capacitor handles your builds:

capacitor.config.json
This is the core configuration file for your Capacitor project. It sets important parameters for your builds:

{
  "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: Specifies where Capacitor should look for the web assets (e.g., 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 erzählt Capacitor Ihnen, wo Ihre kompilierten Web-Assets für die Einbindung in die nativen Builds zu finden sind.
  • Nachdem Sie Änderungen an vorgenommen haben, capacitor.config.jsonmü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.

You can tweak Capacitor’s default build process to better suit your project needs. Here’s how:

Sie können die Standardbuild-Prozesse von __CAPGO_KEEP_0__ an Ihre Projektbedürfnisse anpassen. Hier ist, wie Sie das tun können:

Einstellungen für die Konfigurationsdatei capacitor.config.json Sie können den Build-Prozess, indem Sie die

{
  "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
  }
}

Datei bearbeiten. Hier ist ein Beispielkonfiguration:

  • webDirHier sind einige Schlüssel-Einstellungen, die Sie anpassen können:
  • server: Konfiguriert den Entwicklungs-Server, einschließlich Hostname und Navigationsberechtigungen.
  • android/ios: Zulässt plattformspezifische Build-Einstellungen, wie z.B. Keystore-Daten für Android oder Provisionierungsoptionen für iOS.

Creating NPM Scripts

To streamline your workflow, add custom NPM scripts to your 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-Ausführung.
  • build:platform: Plattformspezifische Befehle für die Erstellung von Android- oder iOS-Anwendungen.

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

Build-Hooks-Einstellung

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;

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

Wenn Sie an größeren Projekten arbeiten, 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

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

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

Konfigurieren Sie dann 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 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 glatteere Bereitstellungen zu gewährleisten.

Funktion Android iOS
Debug-Symbols ProGuard Mapping-Dateien dSYM-Dateien
Build-Varianten debug, release, Staging debug, release
Code Signierung Keystore-Verwaltung Provisioning-Profile-Verwaltung
Asset-Verwaltung res/drawable-Optimierung Asset-Kataloge

Zusätzliche Tipps zur Optimierung Ihrer Builds umfassen:

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

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

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

Häufige Fehler beheben

Viele Build-Script-Probleme 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

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-Provisionierungsprofilprobleme, probieren Sie Folgendes:

npx cap build ios --configuration=release --type=development
Fehlerart Häufige Ursache Lösung
Signierungs-Konfiguration Fehlende Keystore-Daten Setzen KEYSTORE_PATH und Anmeldeinformationen
Build-Umgebung Ungewisse Variablen Erstellen Sie plattform-spezifische .env Dateien
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 umfassende Build-Tests durchführen.

Testen Sie die 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
  • Umweltvalidierung: Ü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 Build-Skripten: 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.
  • Beachten Sie die Build-Leistung für mögliche Verbesserungen.

Capgo Build Features

Capgo Live Update Dashboard Interface

Capgo bringt Build-Skripte auf das nächste Level mit automatisierter Bereitstellung, was die Effizienz erhöht und den Prozess vereinfacht.

Quick 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 reibungslos mit den wichtigsten CI/CD-Plattformen, wobei eine Vielzahl von Integrationsmöglichkeiten angeboten wird:

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

Die Einrichtung eines automatischen Builds kostet typischerweise etwa $300 pro Monat, was deutlich budgetfreundlicher ist im Vergleich zu traditionellen Lösungen, die bis zu $6,000 jährlich.

Sicherheitsstandards

Capgo setzt auf Sicherheit mit einem robusten Framework, das umfasst:

  • End-to-End-Verschlüsselung für Update-Pakete.
  • Sichere Schlüsselverwaltung.
  • Kongruenz mit den Richtlinien von Apple und Google.

Versionierungssteuerungsfunktionen

  • Instante Rollover-Optionen.
  • Versionenverfolgung bei der Bereitstellung.
  • Update-Kanalverwaltung für geplante Releases.

Diese Sicherheitsarchitektur 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 der Build-Schritte

Benutzerdefinierte Build-Skripte ermöglichen automatisierte und konsistente Bereitstellungen, indem sie Build-Hooks, Umgebungsvariablen und plattform-spezifische Befehle nutzen. Diese Prozesse bilden 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 Kanal-basiertes Verteilungssystem. Diese Konfiguration unterstützt zielgerichtete Updates, Beta-Tests und die Einhaltung von Richtlinien der App-Stores, während eine starke Sicherheitsarchitektur beibehalten wird.

Fortsetzung von Wie Sie Capacitor CLI für die Anpassung von Build-Skripten verwenden.

Wenn Sie __CAPGO_KEEP_0__ verwenden Wie Sie Capacitor CLI für die Anpassung von Build-Skripten verwenden um die CI/CD-Automatisierung zu planen, verbinden Sie es mit Capgo CI/CD Capgo CI/CD für das Produktworkflow Capgo Native Builds Capgo Native Builds für das Produktworkflow Capgo Integrations Capgo Integrations für das Produktworkflow __CAPGO_KEEP_0__ CI/CD-Integration __CAPGO_KEEP_0__ CI/CD-Integration für die Implementierungsdetails GitHub Actions Integration for the implementation detail in GitHub Actions Integration.

Live-Updates für Capacitor-Anwendungen

Wenn ein Web-Schicht-Bug live ist, versenden Sie die Reparatur über Capgo anstatt Tage für die Genehmigung durch den App-Store zu warten. Die Benutzer erhalten die Aktualisierung im Hintergrund, während native Änderungen im normalen Review-Prozess bleiben.

Menschliche Unterstützung von Martin

Jetzt loslegen

Neueste von unserem Blog

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