Sauter au contenu principal

Comment personnaliser les scripts de construction avec Capacitor CLI

Apprenez à personnaliser vos scripts de build en utilisant Capacitor CLI pour des déploiements efficaces et des mises à jour d'applications personnalisées sur plusieurs plateformes.

Comment personnaliser les scripts de construction avec Capacitor CLI

Capacitor CLI vous permet de personnaliser le processus de construction de votre application pour les plateformes iOS, Android et web. En ajustant les scripts de construction, vous pouvez :

  • Accélérer les mises à jour: Push changes instantly without app store delays.
  • Gérer les déploiements: Annuler les mises à jour ou cibler des groupes d'utilisateurs spécifiques.
  • Sécuriser votre applicationUtilisez l'encryption pour protéger les mises à jour.
  • Optimisez les builds: Adjust settings for platform-specific needs.

Vue d'ensemble rapide des fonctionnalités clés :

  • Fichiers de configuration: Utilisez capacitor.config.json et package.json pour gérer les paramètres de build.
  • Scripts personnalisésAjoutez des tâches pré et post-construction pour l'automatisation.
  • Hooks de build: Exécutez code lors de certaines étapes du processus de build.
  • Variables d'environnement: Simplifiez les builds spécifiques à l'environnement avec .env les fichiers.

Capgo, un outil de déploiement, améliore ce processus avec mises à jour automatiquesSuivez la mise à jour pour apprendre comment configurer et personnaliser vos scripts de build pour une optimisation maximale.

Introducing Capacitor Configure

Documentation du site Web du Framework Capacitor

Processus de construction par défaut dans Capacitor

Comprendre comment Capacitor gère son processus de construction par défaut est crucial si vous souhaitez le personnaliser efficacement. En dessous, nous décomposerons le processus de construction de Capacitor CLI et ses fichiers de configuration clés.

Étapes de construction standard

Capacitor suit une démarche étape par étape pour transformer votre application web en builds spécifiques aux plateformes. Voici ce qui se produit lors du processus de build par défaut :

Phase Description Sortie
Construction web Compile les actifs web en utilisant vos outils de framework. Bundle web optimisé
Copie des actifs Déplace les actifs web vers les dossiers de plateforme native Répertoires d'actifs spécifiques à la plateforme
Développement natif Runs platform-specific build commands Fichiers binaires prêts à déployer
Vérification Vérifie l'intégrité et les dépendances de la construction État de la construction et les avertissements

Fichiers de configuration principaux

Two key configuration files shape how Capacitor handles your builds:

capacitor.config.json
Ceci est le fichier de configuration principal pour votre projet Capacitor. Il définit des paramètres importants pour vos builds.

{
  "appId": "com.example.app",
  "appName": "MyApp",
  "webDir": "dist",
  "bundledWebRuntime": false,
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 3000
    }
  }
}
  • appId: Un identifiant unique pour votre application.
  • appName: Le nom de votre application.
  • webDir: Spécifie où Capacitor doit chercher les actifs web (par exemple, dist).
  • pluginsPermet de configurer les paramètres spécifiques aux plugins, comme les options de SplashScreen.

package.json
Ce fichier inclut des scripts de construction et des dépendances qui influencent le processus de construction :

{
  "scripts": {
    "build": "npm run build:web && cap sync",
    "build:web": "vite build",
    "cap:build": "cap build"
  }
}
  • Le webDir paramètre dans capacitor.config.json indique à Capacitor où localiser vos actifs web compilés pour les inclure dans les builds natifs.
  • Après avoir apporté des modifications à capacitor.config.json, vous devez exécuter cap sync assurer que vos projets natifs soient mis à jour.

Ensuite, nous explorerons comment vous pouvez modifier ces paramètres pour personnaliser encore plus vos builds.

Modifiant les scripts de construction

Vous pouvez personnaliser le processus de construction par défaut de Capacitor pour mieux répondre à vos besoins de projet. Voici comment.

Paramètres du fichier de configuration

Vous pouvez ajuster le processus de construction en modifiant le capacitor.config.json fichier. Voici un exemple de configuration :

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

Voici quelques paramètres clés que vous pouvez modifier :

  • webDir: Spécifie l'emplacement des actifs web compilés.
  • serverConfigure le serveur de développement, y compris l'hôte et les permissions de navigation.
  • android/iosPermet d'appliquer des paramètres de build spécifiques à chaque plateforme, comme les détails du keystore pour Android ou les options de provisioning pour iOS.

Création de scripts NPM

Pour simplifier votre flux de travail, ajoutez des scripts NPM personnalisés à votre package.json fichier. Voici un exemple :

{
  "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 et postbuild: Utilisez-les pour des tâches telles que la configuration de l'environnement ou l'envoi de notifications lorsque la construction est terminée.
  • build:platform: Commandes spécifiques au plateau pour construire des applications Android ou iOS.

You can take automation even further by adding build hooks.

Configuration des Hooks de Construction

Pour un contrôle plus avancé, utilisez les hooks de build pour exécuter des commandes personnalisées code à des points spécifiques du processus de build. 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;

Avec les hooks de construction, vous pouvez :

  • Valider les exigences avant le démarrage de la construction
  • Transformer les actifs pendant le processus
  • Déclencher des notifications à des points clés
  • Mise à jour automatique des numéros de version
  • Exécuter des tests automatisés sans heurt

Cette approche vous offre plus de flexibilité et de contrôle sur l'ensemble du cycle de construction.

Customisation de la Construction Avancée

Lorsque vous travaillez sur de grands projets, affiner votre processus de construction peut faire une grande différence. Voici comment gérer les builds spécifiques à l'environnement et les personnalisations de plateforme de manière efficace.

Variables d'Environnement

Créez des variables d'environnement en créant des fichiers séparés .env fichiers pour chaque environnement :

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

Vous pouvez encore ajuster ces paramètres pour les adapter aux exigences spécifiques de la plateforme.

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

Vous pouvez ajuster ces paramètres pour les adapter aux besoins spécifiques de chaque plateforme.

Constructions de plateformes

Pour personnaliser les builds pour Android et iOS, utilisez la structure suivante :

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

Ces configurations vous permettent de personnaliser les builds pour chaque plateforme, garantissant des déploiements plus fluides.

Feature Android iOS
Symboles de débogage ProGuard fichiers de cartographie fichiers dSYM
Variantes de construction debug, production, préproduction debug, production
Code Signature Gestion de clés de coffre Profils de provisionnement
Gestion des Actifs optimisation des ressources graphiques Gestion des catalogues d'assets

Gardez à l'esprit ces conseils supplémentaires pour optimiser vos builds :

  • Using partial updates to save time during deployments
  • Configurer la suivi des erreurs pour identifier rapidement les problèmes
  • Créer des systèmes de canaux pour les versions de test bêta
  • Activer la cryptage de bout en bout pour une distribution sécurisée

Lorsque combinés avec des outils comme Capgo pour l'analyse et les mises à jour sécurisées, ces techniques vous donnent plus de contrôle sur votre processus de déploiement. [1].

Problèmes et corrections de scripts de build

Lorsque vous travaillez avec des configurations de build personnalisées, il est essentiel de résoudre rapidement les erreurs pour maintenir un processus de build fluide.

Corriger les erreurs courantes

Many build script issues stem from environment setup or dependency problems. Here’s how to address some common ones:

Variables d'environnement manquantes

Si vous rencontrez une erreur comme celle-ci :

error: Cannot find environment configuration for BUILD_ENV

Vous pouvez le corriger en créant un .env.local Échecs de construction liés à la plateforme

BUILD_ENV=development
CAPACITOR_PLATFORM=ios
BUILD_TYPE=debug

Échecs de construction spécifiques à la plateforme

Pour les problèmes de profil de provisionnement iOS, essayez ceci :

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

Pour les problèmes de profil de provisionnement iOS, essayez ceci :

npx cap build ios --configuration=release --type=development
Cause commune Cause commune Solution
Configuration de signature Détails de clé de stockage manquants Configurer KEYSTORE_PATH et vos identifiants
Environnement de construction Variables non définies Créez des scripts de construction .env Fichiers
Dépendances Incompatibilités de version Mettre à jour package.json et synchroniser

After applying fixes, ensure your changes are solid by running thorough build tests.

Testez les scripts de construction

Une fois les erreurs résolues, validez vos scripts de construction avec ces étapes :

  • Vérification AutomatiqueExécutez les commandes clés pour confirmer que le processus de build fonctionne comme prévu.
npm run build
npx cap sync
npx cap copy
  • Validation de l'environnement: Vérifiez les variables d'environnement manquantes avant de démarrer la construction.
const requiredVars = ['BUILD_ENV', 'KEYSTORE_PATH'];
requiredVars.forEach(varName => {
  if (!process.env[varName]) {
    throw new Error(`Missing required env var: ${varName}`);
  }
});
  • Débogage des scripts de construction: Ajoutez des scripts détaillés pour attraper les problèmes potentiels pendant la construction.
{
  "scripts": {
    "build:debug": "NODE_ENV=development npx cap build --verbose",
    "build:release": "NODE_ENV=production npx cap build --verbose"
  }
}

Conseils supplémentaires pour la mise en œuvre :

  • Utilisez Docker les conteneurs Docker pour isoler les constructions.
  • Vérifiez les fichiers de configuration avant de démarrer le processus.
  • Testez avec plusieurs Node.js versions.
  • Vérifiez que les exigences spécifiques à la plateforme sont remplies.
  • Surveillez les performances de la construction pour potentielles améliorations.

Capgo __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ Interface de tableau de bord

Capgo Live Update Tableau de bord Interface

Capgo améliore considérablement les scripts de build en automatisant la déploiement, augmentant l'efficacité et simplifiant le processus.

Mises à jour rapides d'applications

Le rendement d'actualisation de Capgo est impressionnant :

  • 95% des utilisateurs actifs recevoir des mises à jour dans les 24 heures.
  • 82% de taux de réussite Pour la livraison de mises à jour à l'échelle mondiale.
  • Un temps de réponse moyen de API de 434ms à l'échelle mondiale.

La plateforme utilise des mises à jour partielles, ce qui signifie que seuls les changements sont téléchargés. Cette approche réduit l'utilisation de la bande passante et accélère le processus de mise à jour. De plus, tout le processus de construction est entièrement automatisé, ce qui économise du temps et de l'effort.

Automatisation de la construction

Capgo fonctionne de manière fluide avec les principaux plateformes CI/CD, offrant une variété d'intégrations :

Plateforme CI/CD Fonctionnalités d'intégration Avantages
GitHub Actions Automated builds, Deploy triggers Déploiement continu
GitLab CI Automatisation de pipeline, Contrôle de version Flux de travail simplifié
Jenkins Flux de travail personnalisés, Appels de build Échelle pour les entreprises

La mise en place d'un build automatique coûte généralement autour de $300 par moisce qui est beaucoup plus abordable par rapport aux solutions traditionnelles qui peuvent aller jusqu'à $6 000 par an.

Normes de sécurité

Capgo donne la priorité à la sécurité avec un cadre robuste qui comprend :

  • Chiffrement de bout en bout des packages d'actualisation.
  • Gestion sécurisée des clés.
  • Conformité aux lignes directrices d'Apple et de Google.

Fonctionnalités de contrôle de version

  • Options de rebond instantanées.
  • Suivi de la version de déploiement.
  • Gestion de la chaîne d'actualisation pour les versions étalées.

Ce cadre de sécurité a été rigoureusement testé sur des centaines d'applications d'entreprise. Pour les équipes ayant besoin d'une sécurité supplémentaire, Capgo propose également des solutions auto-hébergées avec des configurations personnalisables.

Le système de canaux de Capgo permet une distribution flexible des mises à jour. Les développeurs peuvent cibler des groupes d'utilisateurs spécifiques avec différentes versions, idéal pour les tests de beta ou les lancements progressifs.

Résumé

Vue d'ensemble des étapes de construction

Les scripts de construction personnalisés permettent des déploiements automatisés et cohérents en exploitant les appels de fonctions de construction, les variables d'environnement et les commandes spécifiques au plateau. Ces processus créent une solide base pour les améliorations de déploiement rendues possibles avec Capgo.

Avantages de Capgo

Capgo simplifie le déploiement, ayant réussi à livrer plus de 23,5 millions d'actualisations sur 750 applications de production [1]. Its partial update system reduces both bandwidth usage and deployment time.

La plateforme fournit des mises à jour rapides, une optimisation de performances mondiale, une encryption de bout en bout pour la sécurité, et un système de distribution basé sur des canaux flexibles. Cette configuration prend en charge les mises à jour ciblées, les tests de beta et le respect des lignes directrices des magasins d'applications tout en maintenant un cadre de sécurité solide.

Continuez de la section "Comment personnaliser les scripts de construction avec Capacitor CLI"

Si vous utilisez Comment personnaliser les scripts de construction avec Capacitor CLI pour planifier l'automatisation CI/CD, connectez-l’avec Capgo CI/CD pour le flux de produit dans Capgo CI/CD, Capgo Builds natifs pour le flux de produit dans Capgo Builds natifs, Capgo Intégrations pour le flux de travail du produit dans Capgo Intégrations, Intégration CI/CD pour les détails d'implémentation dans l'intégration CI/CD, et GitHub Actions Integration pour les détails d'implémentation dans GitHub Actions d'intégration.

Mises à jour en temps réel pour les applications Capacitor

When a web-layer bug is live, ship the fix through Capgo instead of waiting days for app store approval. Users get the update in the background while native changes stay in the normal review path.

Dernières actualités

Capgo vous offre les meilleures informations nécessaires pour créer une application mobile professionnelle de haute qualité.