Allez directement au contenu principal

Comment personnaliser les scripts de construction avec Capacitor CLI

Découvrez comment personnaliser vos scripts de construction en utilisant Capacitor CLI pour des déploiements efficaces et des mises à jour d'applications personnalisées sur plusieurs 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: Envoyer des modifications 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 application: Utiliser l'encryption pour protéger les mises à jour.
  • Optimiser les constructions: Ajuster les paramètres pour répondre aux besoins spécifiques des plateformes.

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 construction.
  • Scripts personnalisés: Ajoutez des tâches pré et post-construction pour l'automatisation.
  • Appels de fonctions de construction: Exécutez code lors de certaines étapes du processus de construction.
  • Variables d'environnement: Simplifiez les constructions spécifiques à l'environnement avec .env fichiers.

CapgoOutils de déploiement protégé, améliore ce processus avec mises à jour automatiquessuivi de version, et optimisation de performances mondiales. En savoir plus sur la configuration de vos scripts de construction pour une efficacité maximale.

Présentation Capacitor Configurer

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 et les fichiers de configuration clés de Capacitor CLI

Étapes de construction standard

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

Phase Description Sortie
Build Web Compilation des 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 de plateforme spécifique
Build natif Exécute les commandes de build spécifiques à la plateforme Pré-requis pour la mise en production
Vérification Vérifie l'intégrité de la construction et des dépendances État de la construction et les avertissements

Fichiers de configuration principaux

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: Un identifiant unique pour votre application.
  • appName: Le nom de votre application.
  • webDir: Specifies where Capacitor should look for the web assets (e.g., dist).
  • plugins: Permet de configurer les paramètres spécifiques des plugins, 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 les inclure 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.

Paramètres de scripts de construction

Vous pouvez adapter le processus de construction par défaut de Capacitor pour mieux répondre aux besoins de votre projet. Voici comment :

Paramètres de fichier de configuration

Vous pouvez ajuster le processus de construction en éditant le capacitor.config.json Le fichier suivant est 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 de vos actifs web compilés.
  • server: Configure le serveur de développement, y compris l'hôte et les autorisations de navigation.
  • android/ios: Permet 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 Le fichier suivant est 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 aller encore plus loin dans l'automatisation 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;

Grâce aux 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 les numéros de version automatiquement
  • Exécuter des tests automatisés de manière fluide

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

Personnalisation de Construction Avancée

Lorsque vous travaillez sur des projets plus importants, la fine-tuning 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 Ensuite, configurez votre script de build 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 de plateforme

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

Ces configurations vous permettent de personnaliser les constructions pour chaque plateforme, ce qui facilite les déploiements.

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

Caractéristique

Android iOS Symboles de débogage
Debug Symbols ProGuard fichiers de cartographie fichiers dSYM
Variantes de construction debug, mise en production, étape debug, mise en production
Code Signature Gestion de clés de signature Gestion de profils de provisionnement
Gestion d'actifs optimisation des ressources drawable Catalogues d'actifs

Conseils supplémentaires pour optimiser vos builds incluent :

  • Utiliser des mises à jour partielles pour économiser du temps lors des déploiements
  • Configurer la suivi des erreurs pour identifier rapidement les problèmes
  • Créer des systèmes de canal pour les versions de test bêta
  • Activer la cryptage de bout en bout pour une distribution sécurisée

Lorsqu'il est associé à 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 scripts de build

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

Corriger les erreurs courantes

Beaucoup d'erreurs de scripts de build proviennent de problèmes de configuration de l'environnement ou de dépendances. Voici comment aborder certaines d'entre elles :

Variables d'environnement manquantes

Si vous rencontrez une erreur comme celle-ci :

error: Cannot find environment configuration for BUILD_ENV

You pouvez le corriger en créant un fichier .env.local dans le répertoire racine de votre projet. Voici un exemple :

BUILD_ENV=development
CAPACITOR_PLATFORM=ios
BUILD_TYPE=debug

Échecs de construction spécifiques à la plateforme

Pour les erreurs de signature Android, utilisez cette commande :

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
Type d'erreur Cause commune Solution
Configuration de signature Détails de clé de magasin manquants Fixer KEYSTORE_PATH et les informations d'identification
Environnement de construction __CAPGO_KEEP_0__ variables non définies Créer des configurations spécifiques à la plateforme .env fichiers
Dépendances Incompatibilités de version Mettre à 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 approfondis.

Tester les scripts de construction

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

  • Vérification automatisée: Exécutez les commandes de clavier 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 du script 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 de tests :

Capgo Construire des fonctionnalités

Capgo Tableau de bord d'actualisation en temps réel Interface

Capgo améliore les scripts de construction avec un déploiement automatisé, augmentant l'efficacité et simplifiant le processus.

Mises à jour rapides des applications

Capgo’s performance d'actualisation est impressionnante :

  • 95% des utilisateurs actifs reçoivent des mises à jour dans les 24 heures.
  • Taux de réussite de 82% pour la livraison de mise à jour partout dans le monde.
  • Une moyenne de API de temps de réponse 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 Déploiements automatiques, Déclencheurs de déploiement Déploiement continu
GitLab CI L'automatisation des pipelines, le contrôle de version Flux de travail simplifié
Jenkins Flux de travail personnalisés, Appels de hook de construction Échelle pour les entreprises

La mise en place d'une construction automatisée 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 par an.

Normes de sécurité

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

  • Chiffrement de bout en bout pour les packages de mise à jour.
  • Gestion de clés sécurisée.
  • Conformité aux lignes directrices d'Apple et de Google.

Fonctionnalités de contrôle de version.

  • Options de rollback instantanées.
  • Suivi de la version de déploiement.
  • Gestion de canal d'actualisation pour les lancements étalés.

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.

Capgo’s système de canal permet une distribution flexible des mises à jour. Les développeurs peuvent cibler des groupes d'utilisateurs spécifiques avec différentes versions, parfait 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 hooks 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 la mise en production, ayant réussi à déployer plus de 23,5 millions de mises à jour 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 flexible. 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 intitulée 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-le avec Capgo CI/CD pour le flux de travail du produit dans Capgo CI/CD, Capgo Builds natifs pour le flux de travail du produit dans Capgo Builds natifs, Intégrations Capgo pour le flux de travail du produit dans Intégrations Capgo, Intégration CI/CD pour le détail d'implémentation dans Intégration CI/CD, et Intégration d'actions GitHub pour le détail d'implémentation dans Intégration d'actions GitHub.

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

Lorsqu'un bug du niveau 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 changements natifs 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.