Configurer la CI/CD pour les apps Capacitor

Voulez-vous des releases d’applications iOS et Android plus rapides et sans erreur ? Pipelines CI/CD pour Capacitor les applications automatisent la compilation, les tests et le déploiement, réduisant les temps de release de 70 % et les erreurs de 60 %. Ce guide couvre tout ce qu'il faut savoir, de la configuration de votre environnement à l'automatisation des live updates avec Capgo.

Points clés :

• Pourquoi le CI/CD est essentiel pour apps Capacitor : accélère les builds de 78 % et réduit de 60 % les rejets des stores.
• Outils essentiels: Xcode, Android Studio, CocoaPods, et plus encore.
• Configuration du pipeline : automatisez des tâches comme npx cap sync, le cache des dépendances et les builds spécifiques aux plateformes.
• Live updates avec Capgo: Activez les mises à jour post-release avec déploiements progressifs et rollback.

Étapes de configuration rapide :

1. Préparez votre environnement: Installez les outils requis pour iOS et Android.
2. Configurez votre projet: mettre à jour capacitor.config.ts et gérez les variables d'environnement en toute sécurité.
3. Pipelines de build: Automatisez l'installation des dépendances, les builds et les tests pour les deux plateformes.
4. Optimiser les performances: utilisez le cache, les builds parallèles et les workflows conditionnels.
5. Ajouter des live updates: Intégrez Capgo pour des mises à jour OTA sécurisées avec déploiement progressif.

Grâce à la CI/CD, les apps Capacitor bénéficient de releases plus rapides et fluides tout en minimisant les erreurs et les interventions manuelles. Prêt à optimiser votre workflow ? C'est parti !

Intégrez vos pipelines CI/CD existants aux fonctionnalités mobiles

Préparer votre environnement CI/CD

Une fois les bases du CI/CD acquises, l'étape suivante consiste à configurer votre environnement. C'est le pilier d'une automatisation fiable.

Configuration des outils et logiciels

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

Pour le développement iOS :

• Xcode 14 ou plus récent
• Xcode Command Line Tools
• CocoaPods pour la gestion des dépendances

Pour le développement Android :

• Android Studio
• Android SDK 33 ou supérieur
• Java Development Kit (JDK)

Pour vérifier que les Xcode Command Line Tools sont installées, utilisez :

xcode-select -p

Créer un Capacitor projet

Votre projet Capacitor doit être correctement configuré pour les workflows CI/CD. Le capacitor.config.ts 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 identifiants en toute sécurité est une étape clé pour lier votre configuration d’environnement au pipeline CI/CD.

Variables clés à définir :

• BUILD_ENV: spécifie l’étape de déploiement (par ex. : production)
• IOS_SIGNING_IDENTITY: votre certificat de signature code
• ANDROID_KEYSTORE_PATH: chemin vers votre keystore Android

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

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

Lors de la compilation d’applications iOS, assurez-vous que votre plateforme CI prend en charge les agents macOS.

Pour vérifier que votre environnement est prêt :

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

Une bonne gestion des clés et des identifiants réduit considérablement le risque de rejet par les stores, comme l’indiquent les statistiques précédentes. [1].

Créer votre pipeline CI/CD

Une fois votre environnement prêt, l’étape suivante consiste à configurer un pipeline CI/CD pour votre app Capacitor. Ce pipeline doit gérer efficacement à la fois les assets web et les builds des plateformes natives.

Installer et mettre à jour les dépendances

Dans les environnements CI/CD, la gestion des dépendances exige un contrôle strict des versions. Commencez par un processus d’installation propre :

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

Pour accélérer les builds, utilisez le cache des dépendances. Par exemple, Azure DevOps a constaté une amélioration des temps de build de 40 à 60 % avec cette configuration :

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

Configuration des builds iOS et Android

Voici comment configurer les builds pour les deux plateformes :

Configuration du build 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 du build Android :

cd android
./gradlew bundleRelease

Étapes de test et de déploiement

Lancez les tests des plateformes en parallèl’avec 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 des artefacts par plateforme :

L’utilisation de builds parallèles peut réduire considérablement le temps d’exécution du pipeline lorsqu’ils sont configurés correctement.

Une fois vos builds validés et empaquetés, vous êtes prêt à passer aux live updates avec Capgo (voir la section suivante).

sbb-itb-f9944d2

Ajouter Capgo pour les live updates

L’intégration de Capgo à votre workflow améliore votre processus CI/CD en permettant des mises à jour post-release. Voici comment le configurer :

Configuration du pipeline Capgo

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

Cet ajout étend votre cycle de vie CI/CD en intégrant gestion des mises à jour à votre processus automatisé de build et de déploiement.

Ensuite, incluez la commande d’upload après vos étapes de build :

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

Pour mises à jour sécurisées, configurez les paramètres de validation comme ceci :

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

Aperçu des fonctionnalités Capgo

Directives pour les mises à jour OTA

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

Stratégie de déploiement progressif

Utilisez un déploiement progressif pour contrôler la distribution des mises à jour :

- 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

Surveillez ces métriques :

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

Si les crashs dépassent les seuils acceptables, automatisez un rollback :

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

Améliorer les performances du pipeline

Se concentrer sur trois domaines clés peut apporter des améliorations notables à votre pipeline :

Optimisation de la vitesse de build

Pour les modifications web uniquement, l'utilisation de npx cap sync peut faire gagner du temps en évitant les builds natifs complets, réduisant le temps de build d'environ 40 %. Voici comment mettre en œuvre le build conditionnel :

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

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

Automatisation du contrôle de version

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

- 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, un versionnage sémantique automatisé peut être mis en place avec cette configuration :

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

Ces pratiques offrent un cadre solide pour suivre et améliorer les performances de votre pipeline grâce à des métriques telles que :

• Temps de build par étape
• Efficacité du cache (taux de hit/miss)
• Pic d'utilisation des ressources

Configuration multi-environnements

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

Vous pouvez configurer vos 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

L'association de ces configurations avec le déploiement par canal de Capgo permet des mises à jour précises et spécifiques à chaque environnement. Cela garantit des déploiements progressifs plus fluides et un meilleur contrôle du comportement de l'application selon l'environnement.

Résumé

Le rôle de la CI/CD dans le développement

L'utilisation de pipelines CI/CD pour les applications Capacitor booste considérablement l'efficacité du workflow. Selon les données du secteur, les équipes peuvent obtenir Des cycles de release 50-70 % plus rapides grâce aux builds iOS et Android simultanés [3]. L'automatisation de tâches comme l'installation des dépendances et la synchronisation des plateformes réduit les erreurs de déploiement de 40-60% [1][2].

Par exemple, les équipes utilisant les pipelines Azure DevOps automatisent des processus tels que 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 élimine le besoin d'opérations manuelles Gradle et Xcode CLI, garantissant une création d'artefacts fiable à chaque fois.

Ces améliorations posent les bases d’une gestion des mises à jour simplifiée en combinaison avec Capgo.

Capgo pour la gestion des mises à jour

Capgo s’intègre parfaitement aux pipelines CI/CD pour livrer des mises à jour instantanées tout en restant conforme aux politiques des stores. Les mises à jour ne sont déployées qu’après avoir passé les contrôles de test automatisés intégrés au pipeline.

En combinant builds automatisés et déploiements progressifs, les équipes obtiennent des résultats impressionnants : 80 % de couverture des utilisateurs en 7 jours et des capacités de rollback en moins d’une heure.

Une stratégie courante consiste à mener des déploiements en parallèle. Les builds automatisés servent aux tests internes, tandis que les déploiements progressifs ciblent des segments d’utilisateurs. Les mises à jour sont ainsi à la fois rapides et sûres, appuyées par des contrôles de test automatisés rigoureux [1].

FAQ

Comment créer une application Capacitor ?

Compiler une application Capacitor se fait en quelques étapes simples :

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

   ionic start myApp tabs --capacitor

2. Ajouter le support des plateformes : ajoutez les plateformes que vous souhaitez cibler, comme iOS ou Android :

   npx cap add ios
   npx cap add android

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

   npx cap sync

L’étape de synchronisation est essentielle pour garder votre application cohérente entre les plateformes et garantir un bon fonctionnement dans les pipelines CI/CD. Pour plus de détails sur la configuration de votre environnement, consultez la section Outils.

Continuez avec « Configurer CI/CD pour les applications Capacitor »

Si vous utilisez Configurer la CI/CD pour les apps Capacitor pour planifier l'automatisation CI/CD, et le connecter avec CI/CD Capgo pour le workflow produit dans le CI/CD de Capgo, Capgo Native Build pour le workflow produit dans les Native Builds de Capgo, Intégrations Capgo pour le workflow produit dans les intégrations de Capgo, Intégration CI/CD pour le détail d'implémentation dans l'intégration CI/CD, et Intégration GitHub Actions pour les détails d'implémentation de l'intégration GitHub Actions.