Configuration de la CI/CD pour les applications Capacitor

Voulez-vous des déploiements d'applications plus rapides et sans erreur pour iOS et Android ? Pipelines CI/CD pour Capacitor Les applications automatisent la construction, le test et la mise en production, réduisant les temps de mise en production de jusqu'à 70 % et les erreurs de 60 %. Cette guide couvre tout ce dont vous avez besoin de savoir, de la configuration de votre environnement à l'automatisation des mises à jour en direct avec Capgo.

Rappels clés :

• Pourquoi la CI/CD est-elle importante pour les Capacitor applications : Accélère les builds de 78 % et réduit les rejets de magasin de 60 %.
• Outils essentiels: Xcode, Android Studio, CocoaPods, et plus encore.
• Configuration de pipeline: Automatiser des tâches comme npx cap sync, mise en cache de dépendances et constructions spécifiques au système d'exploitation.
• Mises à jour en direct avec Capgo: Activer les mises à jour après la mise en production avec des déploiements étalés et des garanties de reversion.

Étapes de configuration rapide :

1. Préparer votre environnement: Installer les outils requis pour iOS et Android.
2. Configurer votre projet: Mettre à jour capacitor.config.ts et gérer les variables d'environnement de manière sécurisée.
3. Pipelines de construction: Automate l'installation des dépendances, la construction et les tests pour les deux plateformes.
4. Optimiser les performances: Utilisez le cache, les constructions parallèles et les workflows conditionnels.
5. Ajoutez des mises à jour en temps réel: Intégrez Capgo pour des mises à jour sécurisées, OTA, avec des déploiements étalés.

Avec CI/CD, les applications Capacitor atteignent des lancements plus rapides, plus fluides, tout en minimisant les erreurs et les interventions manuelles. Prêt à optimiser votre flux de travail ? Allons-y !

Intégrez vos pipelines CI/CD existants avec des capacités mobiles

Préparation de votre environnement CI/CD

Une fois que vous avez les bases de CI/CD, l'étape suivante consiste à configurer votre environnement. C'est la base de l'automatisation fiable.

Configuration des outils et du logiciel

Assurez-vous d'avoir ces outils clés installés :

For le développement iOS :

• Xcode 14 ou une version plus récente
• Outils de ligne de commande Xcode
• CocoaPods pour gérer les dépendances

For le développement Android :

• Android Studio
• Android SDK 33 ou une version supérieure
• Kit de développement Java (JDK)

Pour confirmer que vos Outils de ligne de commande Xcode sont installés, utilisez :

xcode-select -p

Créer un Capacitor Projet

Votre projet Capacitor doit être configuré correctement pour les workflows CI/CD. Le capacitor.config.ts Le fichier est au cœur de cette configuration :

const config: CapacitorConfig = {
  appId: 'com.example.app',
  webDir: 'build',
  ios: { 
    scheme: 'MyApp'
  }
}

Ce fichier garantit que votre projet est conforme aux exigences CI/CD.

Configuration des Variables d'Environnement

Gérer les informations d'identification de manière sécurisée constitue une partie clé du lien entre votre configuration d'environnement et la chaîne de pipelines CI/CD.

Variables Clés à Définir :

• BUILD_ENV: Spécifie la phase de déploiement (par exemple, production)
• IOS_SIGNING_IDENTITY: Votre certificat de signature code
• ANDROID_KEYSTORE_PATH: Chemin vers votre keystore Android

Pour les builds Android, générer dynamiquement un local.properties le fichier pendant le processus CI :

echo "sdk.dir=$ANDROID_SDK_ROOT" > android/local.properties

Lorsque vous travaillez avec des builds iOS, assurez-vous que votre plateforme CI prend en charge les agents macOS.

Vérifiez si votre environnement est prêt :

node --version | grep "v16" && xcodebuild -version | grep "Xcode 14" || exit 1

Gérer correctement les clés et les informations d'identification peut considérablement réduire les chances de rejets de l'application sur les magasins, comme le montre les statistiques précédentes [1].

Créer votre pipeline CI/CD

Une fois votre environnement prêt, la prochaine étape consiste à configurer un pipeline CI/CD pour votre Capacitor applicationcontext : Page/zone : Page de marketing des solutions Capgo. Rôle : Étiquette de navigation ou élément de menu court. Voir : page solutions/white-label.astro. Conservez les termes de produit et de marque Capgo ainsi que les termes de développeur exactement. Clé de message `solutions_white_label_visual_cell1_value` (Valeur de la cellule visuelle de la page des solutions White Label).

Ce pipeline doit gérer efficacement les actifs web et les builds de plateformes natives.

Installation et mise à jour des dépendances

npm install --ignore-scripts
npm install @capacitor/cli

Gérer les dépendances dans les environnements CI/CD nécessite un contrôle strict des versions. Commencez par un processus d'installation propre : Pour accélérer les builds, utilisez la mise en cache des dépendances. Par exemple, Les utilisateurs ont vu les temps de construction s'améliorer de 40-60% avec ce paramétrage :

- task: Cache@2
  inputs:
    key: 'npm | "$(Agent.OS)" | package-lock.json'
    path: |
      node_modules
      android/.gradle
      ios/Pods

Paramétrage de la construction iOS et Android

Voici comment configurer les constructions pour les deux plateformes :

Configuration de la construction iOS :

steps:
  - task: InstallAppleCertificate@2
    inputs:
      certSecureFile: 'certificate.p12'
      certPwd: $(P12_PASSWORD)
  - script: |
      xcodebuild -workspace ios/App/App.xcworkspace -scheme App -configuration Release -archivePath ios/App/App.xcarchive archive

Configuration de la construction Android :

cd android
./gradlew bundleRelease

Étapes de test et de déploiement

Exécutez les tests de plateforme en parallèl’en utilisant une stratégie de matrice :

test:
  steps:
    - run: npm run test:unit
    - run: npm run test:e2e
    - name: Run Platform Tests
      matrix:
        platform: [ios, android]
      run: npm run test:${{ matrix.platform }}

Pour le déploiement, configurez la gestion d'artefacts spécifique à la plateforme :

En utilisant des constructions parallèles, vous pouvez considérablement réduire le temps d'exécution de votre pipeline lorsque vous configurez correctement.

Une fois vos builds validés et emballés, vous êtes prêt à passer à des mises à jour en direct avec Capgo (discuté dans la section suivante).

sbb-itb-f9944d2

Ajouter Capgo pour les mises à jour en direct

Intégrer le Capgo dans votre flux de travail améliore votre processus CI/CD en permettant les mises à jour après la mise en production. Voici comment le configurer :

Capgo Configuration de pipeline

Tout d'abord, installez le Capgo CLI dans votre environnement de pipeline :

steps:
  - name: Install Capgo CLI
    run: npm install -g @capgo/cli
  - name: Configure Authentication
    env:
      CAPGO_KEY: ${{ secrets.CAPGO_API_KEY }}

Cette addition étend votre cycle de vie CI/CD en incorporant la gestion des mises à jour dans votre processus de construction et de déploiement automatisé. Ensuite, incluez la commande d'upload après vos étapes de construction : Pour les

mises à jour sécurisées

- name: Upload Update
  run: |
    capgo upload --api-key $CAPGO_KEY --bundle ./build/app-release.apk
    capgo deploy v${VERSION} --channel production

, configurez les paramètres de validation comme suit : targetLanguagepagePath

{
  "verification": {
    "checksum": "strict",
    "certificatePinning": true,
    "updateTimeout": 500
  }
}

Capgo Vue d'ensemble des fonctionnalités

Assure que les mises à jour sont distribuées progressivement.

Lignes directrices de mise à jour OTA

Améliorez vos processus de test en suivant ces principaux indicateurs après le déploiement : 

Utilisez un déploiement étalé pour contrôler la façon dont les mises à jour sont distribuées :

- name: Staged Rollout
  run: |
    capgo deploy v1.2.3 --group "beta-users" --rollout 10%
    capgo deploy v1.2.3 --rollout 50%

Suivi des mises à jour

Gardez un œil sur ces indicateurs :

• Taux d'adoption: Visez 40-60 % dans les 24 premières heures.
• Séances sans crash: Maintenez au-dessus de 99,5 %.
• Temps de vérification: Assurez-vous qu'il est inférieur à 500 ms.

Si les crashes dépassent les niveaux acceptables, automatiser un retour en arrière :

- name: Rollback Check
  run: |
    if [ $(capgo stats --version v1.2.3 --metric crashes) -gt 2 ]; then
      capgo rollback --channel production
    fi

Amélioration de la performance de la chaîne d'approvisionnement

Se concentrer sur trois domaines clés peut entraîner des améliorations notables de votre chaîne d'approvisionnement :

Optimisation de la vitesse de construction

Pour les modifications web uniquement, l'utilisation de npx cap sync peut économiser du temps en sautant les reconstructions natives complètes, réduisant le temps de reconstruction d'environ 40 %. Voici comment vous pouvez mettre en œuvre la construction conditionnelle :

- name: Build Strategy
  run: |
    [ "$WEB_ONLY" = true ] && npx cap sync || (./gradlew assembleRelease && xcodebuild ...)

Cette approche garantit que seuls les composants nécessaires sont reconstruits, simplifiant le processus.

Automatisation du Contrôle de Version

L'automatisation du contrôle de version peut simplifier votre flux de travail. Utilisez le script suivant pour définir les numéros de version et de construction dynamiquement :

- name: Set Version
  run: |
    VERSION=$(node -p "require('./package.json').version")
    BUILD_NUMBER=$GITHUB_RUN_NUMBER
    echo "APP_VERSION=${VERSION}" >> $GITHUB_ENV
    echo "BUILD_ID=${BUILD_NUMBER}" >> $GITHUB_ENV

De plus, la versionnement semantique automatisé peut être configuré avec cette configuration :

{
  "scripts": {
    "version": "standard-version",
    "build:prod": "npm version patch && ionic build --prod"
  }
}

Ces pratiques fournissent un cadre solide pour suivre et améliorer les performances de la pipeline à travers des métriques comme :

• Temps de construction par étape
• Efficacité de la cache (taux de frappes/ratios de manquantes)
• Utilisation maximale des ressources

Configuration de plusieurs environnements

La gestion de plusieurs environnements peut être simplifiée en utilisant des configurations spécifiques à l'environnement. Voici un exemple de configuration :

Vous pouvez configurer les environnements dynamiquement avec ce script :

- name: Configure Environment
  env:
    API_KEY: ${{ secrets.ENV_SPECIFIC_API_KEY }}
    BUNDLE_ID: ${{ parameters.bundleId }}
  run: |
    echo "ENVIRONMENT=${{ parameters.environment }}" >> $GITHUB_ENV
    echo "API_ENDPOINT=${{ parameters.apiUrl }}" >> $GITHUB_ENV

La combinaison de ces configurations avec la mise en production basée sur le canal de Capgo permet des mises à jour précises et spécifiques à l'environnement. Cela garantit des déploiements plus fluides et un meilleur contrôle du comportement de l'application dans différents environnements.

Résumé

Le rôle du CI/CD dans le développement

L'utilisation de pipelines CI/CD pour les applications Capacitor accroît considérablement l'efficacité du flux de travail. Selon les données de l'industrie, les équipes peuvent atteindre 50-70% de cycles de mise à jour accélérés grâce à des builds iOS et Android simultanés [3]. La mise en œuvre d'automatismes comme l'installation de dépendances et la synchronisation de plateformes réduit les erreurs de déploiement par 40-60% [1][2].

Par exemple, les équipes utilisant les pipelines Azure DevOps ont automatisé des processus comme les étapes de build séquentielles et le packaging Xcode. Elles utilisent également des environnements paramétrés pour le développement et la production. Cette approche supprime la nécessité de manipulations manuelles de Gradle et Xcode CLI , garantissant la création de artefacts fiables à chaque fois.

Ces améliorations créent les bases d'une gestion des mises à jour rationalisée lorsqu'elle est associée à Capgo.

Capgo pour la Gestion des Mises à Jour

Capgo fonctionne en parfait accord avec les pipelines CI/CD pour délivrer des mises à jour instantanées tout en restant conforme aux politiques des magasins d'applications. Les mises à jour ne sont déployées qu'après avoir passé les portes de test automatisées intégrées au pipeline.

En combinant les builds automatisés avec les lancements de phase, les équipes atteignent des résultats impressionnants : 80% de couverture utilisateur en 7 jours et des capacités de retrait en moins d'une heure.

Une stratégie courante consiste à lancer des trajectoires de déploiement parallèles. Les builds automatisés sont utilisés pour les tests internes, tandis que les lancements de phase ciblent les segments d'utilisateurs. Cela garantit que les mises à jour sont à la fois rapides et sûres, étayées par des portes de test automatisées rigoureuses [1].

FAQs

How créer une application Capacitor?

La création d'une application Capacitor implique quelques étapes simples :

1. Configurer votre environnement: Installez Node.js et npm sur votre système. Ensuite, utilisez l'CLI Ionic pour démarrer un nouveau projet avec le support de Capacitor :

   ionic start myApp tabs --capacitor

2. Ajouter le support de plateforme: Ajoutez les plateformes que vous souhaitez cibler, telles que iOS ou Android :

   npx cap add ios
   npx cap add android

3. Synchroniser votre web code: Assurez-vous que votre web code est aligné avec les plateformes natives en exécutant :

   npx cap sync

Étape de synchronisation cruciale pour maintenir votre application cohérente sur les plateformes et garantir une opération fluide dans les pipelines CI/CD. Pour plus de détails sur la configuration de votre environnement, consultez la section Outils.

Continuez à partir de la mise en place de CI/CD pour les applications Capacitor

Si vous utilisez Mise en place de CI/CD pour les applications Capacitor pour planifier l'automatisation de 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 for the product workflow in Capgo Integrations, pour le flux de travail du produit dans __CAPGO_KEEP_0__ Intégrations, Intégration CI/CD GitHub Actions Integration for the implementation detail in GitHub Actions Integration.