Passer à la navigation principale

Comment personnaliser les scripts de construction avec Capacitor CLI

Apprenez à personnaliser vos scripts de construction à l'aide de 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: Envoyer des modifications instantanément sans retard de l'App Store.
  • Contrôler les déploiements: Annuler des mises à jour ou cibler des groupes d'utilisateurs spécifiques.
  • Sécuriser votre application: Utiliser l'encryption pour protéger les mises à jour.
  • Présentation rapide des fonctionnalités clés :Fichiers de configuration

: Utiliser

  • etFichiers de configuration capacitor.config.json : Utiliser package.json pour gérer les paramètres de construction.
  • Scripts personnalisés: Ajoutez des tâches pré et post-construction pour automatiser.
  • Hooks 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.

Capgo, un outil de déploiement, améliore ce processus avec mises à jour automatiques, suivi de version et optimisation de performances globale. Lisez la suite pour apprendre à configurer et personnaliser 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 de Capacitor CLI et ses fichiers de configuration clés.

Étapes de construction standard

Capacitor utilise un processus étape par étape pour transformer votre application web en builds spécifiques au plateau. Voici ce qui se passe pendant le processus de construction par défaut :

Phase Description Sortie
Build Web Compiles les actifs web en utilisant vos outils de framework Bundle web optimisé
Copier les 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 Binaires prêts à déployer
Vérification Vérifie l'intégrité et les dépendances de la build Statut et avertissements de la build

Configurations de base

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 des scripts de build et des dépendances qui influencent le processus de build :

{
  "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.jsonVous 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.

Modification des scripts de build

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

Paramètres du fichier de configuration

Vous pouvez ajuster le processus de build en éditant 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 où se trouvent vos actifs web compilés.
  • server: Configure le serveur de développement, y compris le nom d'hôte et les autorisations de navigation.
  • android/ios: Permet des 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éer des 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.

On peut aller encore plus loin dans l'automatisation en ajoutant des appels d'API.

Étapes de construction

Pour un contrôle plus avancé, utilisez les appels d'API pour exécuter des scripts code personnalisés à 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;

En utilisant les appels d'API, vous pouvez :

  • Vérifiez les exigences avant le démarrage de la construction
  • Transformez les actifs pendant le processus
  • Déclenchez des notifications aux points clés
  • Mettez à jour les numéros de version automatiquement
  • Exécutez 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.

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 Ensuite, configurez votre script de construction pour charger le fichier approprié en fonction de l'environnement :

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

Vérifiez les exigences avant le démarrage de la construction

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 encore ajuster ces paramètres pour les adapter aux exigences spécifiques de la plateforme.

Constructions de Plateforme

Pour personnaliser les constructions 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 constructions pour chaque plateforme, ce qui facilite les déploiements.

Caractéristique Android iOS
Symboles de Débogage ProGuard fichiers de cartographie fichiers dSYM
Variants de Construction debug, release, étape de test debug, release
Code Signature Gestion des clés de signature Gestion des profils de provisionnement
Gestion des actifs Optimisation de res/drawable Catalogues d'actifs

D'autres conseils pour optimiser vos builds incluent :

  • Utilisation d'updates partiels 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 en bêta
  • Activation de 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 construction

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

Corriger les erreurs courantes

Beaucoup d'erreurs de script de construction 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

Vous pouvez la 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 aux plateformes

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 Définir KEYSTORE_PATH et les informations d'identification
Environnement de construction Variables non définies Créer des fichiers spécifiques à la plateforme .env __CAPGO_KEEP_0__
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 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 détecter 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.
  • Vérifiez les fichiers de configuration avant de démarrer le processus. Testez avec plusieurs versions de Node.js.
  • Vérifiez que les exigences spécifiques au système d'exploitation sont remplies.
  • Surveillez la performance de la construction pour éventuelles améliorations.

Capgo Build Features

Capgo Interface de mise à jour en direct

Capgo améliore les scripts de construction en automatisant la mise en production, ce qui accélère l'efficacité et simplifie le processus.

Actualisations rapides des applications

Capgo offre une performance d'actualisation impressionnante :

  • 95 % des utilisateurs actifs receivent des mises à jour dans les 24 heures.
  • 82 % de taux de réussite pour la livraison de mises à jour dans le monde entier.
  • Un temps de réponse moyen de API de 434 ms à 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 d'actualisation. 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 __CAPGO_KEEP_0__ Actions Constructions automatiques, Déclencheurs de déploiement
Déploiement continu GitLab CI Automatisation de pipeline, Contrôle de version
Flux de travail simplifié : Jenkins Flux de travail personnalisé, Scripts 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 des 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és.
  • Suivi de la version de déploiement.
  • Gestion du canal d'actualisation pour les lancements étalés.

This security framework has been rigorously tested across hundreds of enterprise applications. For teams needing extra security, Capgo also offers self-hosted solutions with customizable configurations.

Capgo’s channel system makes update distribution flexible. Developers can target specific user groups with different versions, perfect for beta testing or gradual rollouts.

Résumé

Vue d'ensemble des étapes de construction

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.

Capgo Benefits

Capgo simplifies deployment, having successfully delivered over 23.5 million updates across 750 production apps [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 performance 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 solide cadre de sécurité.

Continuez de là de 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’à 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, Capgo Intégrations pour le flux de travail du produit dans Capgo Intégrations, Intégrations CI/CD Page/area: Section ou page titre. Role: Titre de section ou page. Voir dans: page integrations.astro. Conservez les termes de produit/marque et les termes de développeur exactement. Clé de message `integrations_title` (Titre des intégrations). Actions d'intégration GitHub pour les détails d'implémentation dans les actions d'intégration GitHub

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.

Lorsqu'un bug de couche web est en direct, expédiez la correction par __CAPGO_KEEP_0__ 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 la voie de revue normale.

Context : Page/zone : Site web de marketing Capgo. Rôle : Description de phrase ou de métadescription de soutien. Vu dans : composant GetStarted.astro. Préservons les termes de produit/marque et les termes de développeur exactement. Message clé `instant_updates_for_capacitor_apps_description` (Description des mises à jour instantanées pour les applications Capacitor).

Support humain de Martin

Capgo gives you the best insights you need to create a truly professional mobile app.