Aller directement au contenu principal

Comment personnaliser les scripts de construction avec Capacitor CLI

Découvrez comment personnaliser vos scripts de construction à l'aide de Capacitor CLI pour des déploiements efficaces et des mises à jour personnalisées sur les plateformes.

Martin Donadieu

Martin Donadieu

Spécialiste du contenu

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: Mettre à jour instantanément sans retard des magasins d'applications.
  • Contrôler 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 buildsConfigurez les paramètres en fonction des besoins spécifiques de la plateforme.

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

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

Capgo, un outil de déploiement, améliore ce processus avec mises à jour automatiques, suivi de version, et optimisation de performances globale. Continuez à lire pour apprendre à configurer et personnaliser vos scripts de build pour une efficacité maximale.

Présentons Capacitor Configurer

Capacitor Documentation du Framework Site Web

Procédure de construction par défaut dans Capacitor

Comprendre comment Capacitor gère sa procédure de construction par défaut est essentiel si vous souhaitez la personnaliser efficacement. En dessous, nous allons décomposer la procédure de construction et les fichiers de configuration clés du Capacitor CLI.

Étapes de construction standard

Capacitor utilise une procédure étape par étape pour transformer votre application web en builds spécifiques aux plateformes. Voici ce qui se passe pendant la procédure de construction par défaut :

PhaseDescriptionSortie
Construction webCompiles les actifs web à l'aide de vos outils de frameworkBundle web optimisé
Copie des actifsDéplace les actifs web vers les dossiers de plateforme nativesRépertoires de ressources spécifiques à la plateforme
Construction nativeExécute des commandes de construction spécifiques à la plateformeBinaires prêts à la mise en production
VérificationVérifie l'intégrité de la construction et des dépendancesStatut et avertissements de construction

Fichiers de configuration principaux

Deux fichiers de configuration clés déterminent comment Capacitor gère vos constructions :

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

{
  "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).
  • plugins: Vous permet de configurer les paramètres spécifiques au plugin, comme les options de SplashScreen.

package.json
Ce fichier inclut les scripts de construction et les 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 leur inclusion dans les builds natifs.
  • Après avoir apporté des modifications à capacitor.config.json, vous devez exécuter cap sync pour vous assurer que vos projets natifs sont mis à jour.

Ensuite, nous allons explorer 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 aux besoins de votre projet. Voici comment procéder :

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.
  • server : Configure le serveur de développement, y compris l'hôte et les permissions de navigation.
  • android/ios : Permet de spécifier les paramètres de construction spécifiques à la plateforme, comme les détails de la clé de stockage pour Android ou les options de provisionnement 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 comme la configuration de l'environnement ou l'envoi de notifications lorsque la construction est terminée.
  • build:platform: Commandes spécifiques à la plateforme pour la construction d'applications Android ou iOS.

Vous pouvez prendre l'automatisation encore plus loin en ajoutant des appels de fonctions de construction.

Configuration des Appels de Fonctions de Construction

Pour un contrôle plus avancé, utilisez les appels de fonctions de construction pour exécuter des commandes personnalisées code à des points spécifiques du processus de construction. Voici un exemple de configuration dans 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 appels de fonctions 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
  • Mettre à jour automatiquement les numéros de version
  • Exécuter des tests automatisés sans heurt

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

Customisation de la Construction Avancée

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

Variables d'Environnement

Configurez les variables d'environnement en créant des fichiers séparés pour chaque environnement : .env Configurez ensuite votre script de construction pour charger le fichier approprié en fonction de l'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'
          }
        }
      }
    }
  }
});

Constructions Spécifiques à la Plateforme

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

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

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

Environment VariablesAndroidiOS
Symboles de débogageProGuard fichiers de cartographiefichiers dSYM
Variants de constructiondébogage, production, étapedébogage, production
Code SignatureGestion de clés de signatureProfils de provisionnement
Gestion des Actifsoptimisation des ressources drawableCatalogues d'actifs

D'autres conseils pour optimiser vos builds incluent :

  • Utilisation d'actualisations partielles pour économiser du temps lors des déploiements
  • Configuration de la traçabilité des erreurs pour identifier rapidement les problèmes
  • Création de systèmes de canaux pour les versions de test bêta
  • Activation de la cryptage de bout en bout pour une distribution sécurisée

Lorsqu'ils sont associés à des outils comme Capgo pour les analyses 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 Script de Construction

Lorsque vous travaillez avec des configurations de construction personnalisées, résoudre les erreurs rapidement est crucial pour maintenir le processus de construction en cours

Corriger les Erreurs Fréquentes

De nombreux problèmes de script de construction proviennent de la configuration de l'environnement ou de problèmes de dépendances. Voici comment résoudre certains problèmes courants :

Variables d'environnement manquantes

Si vous rencontrez une erreur comme celle-ci :

error: Cannot find environment configuration for BUILD_ENV

Vous pouvez la résoudre en créant un fichier dans le répertoire racine de votre projet. Voici un exemple : .env.local Échecs de construction spécifiques à la plateforme

BUILD_ENV=development
CAPACITOR_PLATFORM=ios
BUILD_TYPE=debug

Pour les erreurs de signature Android, utilisez cette commande :

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

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

Type d'erreur

npx cap build ios --configuration=release --type=development
Cause communeSolutionConfiguration de signature
Configuration de signatureDétails de clé de stockage manquantsDéfinir KEYSTORE_PATH et les informations d'identification
Environnement de constructionVariables non définiesCréer des fichiers spécifiques à la plateforme .env Fichiers
DépendancesIncompatibilités de versionMettre à jour package.json et synchroniser

Après avoir appliqué les corrections, assurez-vous que vos modifications sont solides en exécutant des tests de construction exhaustifs.

Testez les scripts de construction

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

  • Vérification automatique: Exécutez des commandes clés pour confirmer que le processus de construction 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 capturer les problèmes potentiels lors de 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 de tests :

  • Utilisez les conteneurs Docker pour isoler les constructions. Utilisez les conteneurs Docker pour isoler les constructions.
  • Vérifiez les fichiers de configuration avant de démarrer le processus.
  • Test avec plusieurs Node.js Versions.
  • Vérifiez que les exigences spécifiques à la plateforme sont remplies.
  • Vérifiez régulièrement les performances de la construction pour des améliorations possibles.

Capgo Construire des fonctionnalités

Interface de tableau de bord de mise à jour en temps réel Capgo

Capgo améliore les scripts de construction en les prenant à un niveau supérieur avec un déploiement automatisé, augmentant l'efficacité et simplifiant le processus.

Mises à jour rapides de l'application

L'Capgo a une performance d'actualisation impressionnante.

  • 95% des utilisateurs actifs recevoir des mises à jour dans les 24 heures.
  • 82% de taux de réussite pour la livraison de mise à jour partout dans le monde.
  • An average API response time of 434ms mondialement.

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 de CI/CDFonctionnalités d'intégrationAvantages
GitHub ActionsDéploiements automatisés, Déclencheurs de déploiementDéploiement continu
GitLab CIAutomatisation de pipeline, Contrôle de versionFlux de travail simplifié
JenkinsFlux de travail personnalisé, Crochets de constructionÉchelle pour les entreprises

La mise en place d'un déploiement automatisé coûte généralement autour de $300 par mois, ce qui est beaucoup plus abordable par rapport aux solutions traditionnelles qui peuvent aller jusqu'à $6,000 annually.

Normes de sécurité

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

  • Chiffrement de bout en bout des packages de mise à jour.
  • 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 des canaux d'actualisation pour les lancements étalés.

Ce cadre de sécurité a été rigoureusement testé dans 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.

Capgo's système de canaux 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 base solide pour les améliorations de déploiement rendues possibles avec Capgo.

Capgo avantages

Capgo simplifie le déploiement, ayant réussi à déployer plus de 23,5 millions d'actualisations sur 750 applications de production [1]Son système d'actualisation partielle réduit à la fois la consommation de bande passante et le temps de déploiement.

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.

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

Lorsqu'un bug de la couche web est en ligne, expédiez la correction à travers Capgo au lieu d'attendre des jours pour l'approbation de la boutique d'applications. Les utilisateurs reçoivent la mise à jour en arrière-plan tandis que les modifications natives restent dans le chemin de revue normal.

Commencez dès maintenant

Dernières actualités de notre blog

Capgo vous offre les meilleures informations nécessaires pour créer une application mobile véritablement professionnelle.