Mise en oeuvre de l'intégration et de la prestation continues (c/cd) pour les applications autochtones réagissent

Qu'est-ce que CI/CD?

L'intégration continue (CI) est la pratique d'intégrer automatiquement les changements de code de plusieurs contributeurs dans un dépôt partagé plusieurs fois par jour. Chaque intégration est vérifiée par une suite de compilation et de test automatisé, en captant les erreurs tôt. La livraison continue (CD) s'appuie sur CI en automatisant l'ensemble du processus de libération de sorte que chaque changement qui passe tous les tests peut être déployé à la production avec la pression d'un bouton.

Dans le contexte de React Native, où les applications doivent fonctionner sur iOS et Android, automatiser chaque étape du pipeline réduit les frais généraux manuels et minimise les incohérences spécifiques à la plate-forme. Sans CI/CD, les équipes comptent souvent sur un seul développeur pour construire, signer et télécharger manuellement les versions — un processus sujet à erreur humaine et à retards.

Pourquoi l'IC/CD importe pour réagir aux Autochtones

React Native présente des défis uniques qui rendent CI/CD particulièrement précieux. La base de code est écrite en JavaScript, mais le produit final est une application native. Cela signifie que vous devez gérer deux systèmes de construction différents (Xcode pour iOS, Gradle pour Android), gérer les dépendances natives qui peuvent nécessiter des configurations spécifiques à la plate-forme, et naviguer les processus d'examen des magasins d'applications.

Loops de rétroaction de grille – Les développeurs obtiennent des résultats immédiats de tests, de lintage et d'analyse statique, souvent en quelques minutes après avoir poussé le code.
Intégrement réduit hell – Les fusions fréquentes avec la vérification automatisée empêchent les fusions importantes et en conflit.
– Les environnements CI sont propres et configurés à partir de zéro, éliminant les problèmes de --works sur ma machine.
Streamlined releases – Automatiser les présentations de stockage d'applications (screen shots, métadonnées, signature) coupe les cycles de libération de jours à heures.
] – Des contrôles automatisés font respecter les normes de codage, les seuils de couverture des essais et les budgets de rendement.

Malgré ces avantages, de nombreuses équipes autochtones de React commencent sans IC/CD parce que la mise en place nécessite une compréhension de l'outillage natif, de la voie rapide et de la signature spécifique à la plateforme.

Composantes essentielles d'un pipeline CI/CD pour les Autochtones réagissent

Chaque pipeline devrait comporter les étapes suivantes, ordonnées le plus rapidement possible et les défaillances au début du pipeline devraient cesser l'exécution pour conserver les ressources.

Version Stratégie de contrôle et de branchement

GitFlow (caractère, développement, sortie, branche hotfix) fonctionne bien pour les plus grandes équipes avec des sorties programmées. Le développement basé sur le réseau (branches à courte durée de vie fusionnant plusieurs fois par jour dans le principal) convient aux équipes visant un déploiement continu.

La plupart des systèmes CI vous permettent de définir des règles par branche – par exemple, en exécutant uniquement des tests unitaires sur les branches de fonctionnalités, mais des tests d'intégration complète et des déploiements bêta sur la branche principale.

Essais automatisés

Pour React Native, une approche en couches est recommandée :

– Utilisez Jest (déjà livré avec React Native) pour tester la logique d'affaires, les réducteurs et les fonctions d'utilité. Jest est rapide et peut fonctionner en parallèle.
Tests d'intégration[ – Interactions de test entre les composants et les services.
Tests de bout en bout (E2E)[ – Utilisez Detox (pour mobile) ou Maestro pour simuler des scénarios d'utilisateurs réels sur simulateurs/émulateurs.
Snapshot testing[ – Détecter les changements involontaires de l'interface utilisateur en comparant la sortie rendue aux instantanés stockés. Utilisez avec prudence comme instantanés peuvent devenir lourd de maintenance.

Configurez votre CI pour échouer à la construction si aucun test ne passe. Envisagez de fixer des seuils de couverture pour faire respecter les barrières de qualité.

Construisez l'automatisation

Pour construire une application React Native pour la production, il faut signer et préparer des produits livrables spécifiques à la plateforme (IPA pour iOS, APK/AAB pour Android). fastlane est la norme de facto pour automatiser ces étapes. Il gère la signature de code, les captures d'écran et même le téléchargement dans les magasins d'applications.

(utilise la salle de gym) pour créer un .ipa
(utilise gradue) pour créer un .aab

Pour iOS, vous devez gérer les certificats et les profils de fourniture. Utilisez fastlane , correspondant pour stocker et synchroniser en toute sécurité les actifs de signature parmi les membres de l'équipe et les machines CI.

Qualité et étanchéité du code

Appliquer un style de code cohérent en utilisant ESLint et Prettier. Exécutez-les dans CI le plus tôt possible – ils échouent rapidement et consomment peu de ressources. Pour une analyse plus approfondie, intégrer SonarQube ou CodeClimat pour suivre les odeurs de code, la duplication et les vulnérabilités de sécurité.

Gestion des artéfacts et signature de code

Pour iOS, la signature nécessite des certificats et des profils de fourniture qui expirent et doivent être tournés. Renouvellement automatique en utilisant des touches fastlane et en stockant des clés privées dans des variables secrètes CI.

Plateformes populaires de CI/CD pour agir Native

Plusieurs plateformes offrent un soutien de première classe pour React Native. Votre choix dépend de la taille de l'équipe, du budget et de l'écosystème existant.

GitHub Actions[ – Très bien intégré avec GitHub. Le niveau gratuit comprend 2000 minutes/mois pour les dépôts publics. Grand marché d'actions pour Réact Native, fastlane et signature de code. Meilleur pour les équipes déjà sur GitHub.
GitLab CI/CD – Construit directement dans GitLab. Offre des minutes illimitées pour les projets publics et la parallélisation puissante. Bon pour les équipes préférant une seule plateforme DevOps.
CircleCI – Très personnalisable avec cache et parallélisme. Les constructions iOS nécessitent des coureurs macOS (coût supplémentaire).
Bitrise – Conçu spécifiquement pour le CI/CD mobile. Fournit des étapes préconfigurées pour le déploiement de React Native, fastlane et app store. Niveau gratuit disponible. Excellent pour les équipes nouvellement créées au CI/CD.
Codemagic – Focused on Flutter and React Native. Offre des machines macOS et s'intègre à la propre gestion de signature de Codemagic. Bonne alternative pour les équipes soucieuses du budget.

App Center (Microsoft) était autrefois un choix populaire mais est maintenant en mode de maintenance; envisager de migrer vers des plateformes alternatives.

Étape par étape : mettre en place l'IC/CD avec les actions GitHub

Supposons un projet standard React Native (créé avec ) stocké sur GitHub. L'exemple suivant met en place un pipeline pour tester, construire et déployer à TestFlight et Google Play.

Fichier de flux de travail

Créer . Définir les déclencheurs : pousser vers les branches principales ou les relâcher, et tirer les requêtes.

name: CI/CD Pipeline
on:
 push:
 branches: [main, release/*]
 pull_request:
 branches: [main]

Essais de course

Utilisez un environnement Node.js. Les dépendances de cache pour accélérer les courses suivantes.

jobs:
 test:
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v4
 - uses: actions/setup-node@v4
 with:
 node-version: '20'
 cache: 'npm'
 - run: npm ci
 - run: npm test -- --coverage
 - run: npx eslint .
 - run: npx tsc --noEmit

Si une étape échoue, le travail s'arrête et le pipeline alerte le développeur.

Construction pour iOS et Android

Les constructions iOS nécessitent des coureurs macOS (GitHub offre ou . Les constructions Android peuvent fonctionner sur Ubuntu mais nécessitent le SDK Android. Utilisez des tâches distinctes pour chaque plate-forme pour paralléliser l'exécution.

Android construire un emploi

 build-android:
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v4
 - uses: actions/setup-node@v4
 with: { node-version: '20' }
 - run: npm ci
 - run: |
 cd android && ./gradlew assembleRelease
 env:
 SIGNING_KEYSTORE: ${{ secrets.ANDROID_KEYSTORE }}
 SIGNING_KEY_ALIAS: ${{ secrets.ANDROID_KEY_ALIAS }}
 SIGNING_STORE_PASSWORD: ${{ secrets.ANDROID_STORE_PASSWORD }}
 SIGNING_KEY_PASSWORD: ${{ secrets.ANDROID_KEY_PASSWORD }}
 - uses: actions/upload-artifact@v4
 with:
 name: app-release.aab
 path: android/app/build/outputs/bundle/release/app-release.aab

iOS Construire un emploi

 build-ios:
 runs-on: macos-13
 steps:
 - uses: actions/checkout@v4
 - uses: actions/setup-node@v4
 with: { node-version: '20' }
 - run: npm ci
 - run: bundle install
 - run: bundle exec fastlane ios build
 env:
 MATCH_PASSWORD: ${{ secrets.MATCH_PASSWORD }}
 FASTLANE_APPLE_APPLICATION_SPECIFIC_PASSWORD: ${{ secrets.APP_SPECIFIC_PASSWORD }}
 - uses: actions/upload-artifact@v4
 with:
 name: app.ipa
 path: build/ios/App.ipa

Note : iOS nécessite des outils de ligne de commande Xcode, préinstallés sur les coureurs GitHub macOS. fastlane doit être configuré avec un qui gère la signature via match et construit avec la salle de gymnastique.

Déployer vers les App Stores

Après la construction, exécutez des travaux de déploiement qui dépendent des travaux de construction. Utilisez Fastlane pilote[ pour TestFlight et Fastlane approvisionnement[ pour Google Play.

 deploy-testflight:
 needs: [build-ios, test]
 runs-on: macos-13
 steps:
 - uses: actions/checkout@v4
 - run: bundle install
 - run: bundle exec fastlane ios upload_to_testflight
 env:
 FASTLANE_APPLE_APPLICATION_SPECIFIC_PASSWORD: ${{ secrets.APP_SPECIFIC }}

 deploy-playstore:
 needs: [build-android, test]
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v4
 - run: bundle install
 - run: bundle exec fastlane android deploy_to_playstore
 env:
 PLAY_STORE_JSON_KEY: ${{ secrets.PLAY_STORE_JSON_KEY }}

Pour les rejets de production, ajouter une étape d'approbation manuelle ou seulement un déclencheur sur les étiquettes.

Pratiques exemplaires pour réagir aux maladies infectieuses et aux maladies infectieuses

Cache agressivement – Cache node modules, CocoaPods, caches Gradle et paquets Homebrew. Les stocker sur la base d'un hash de fichiers verrouillables. Cela peut couper les temps de construction de 50% ou plus.
Utilisez des variables d'environnement et des secrets – Ne jamais coder dur les clés API, les identifiants de signature ou les jetons.
Parameterize builds – Utiliser des variables d'environnement pour différencier les constructions de mise en scène et de production (p. ex., les paramètres d'API, les identifiants de faisceaux).
– Essais de rodage en parallèle – Suites de test fractionnées sur plusieurs emplois ou utilisation de rodage de test (supporté par Jest avec et .
Soignez soigneusement les dépendances natives – Si vous utilisez des bibliothèques avec du code natif (p. ex., réact-native-camera), assurez-vous que votre IC a les dépendances système requises (p. ex. OpenCV) préinstallées.
– Si vous utilisez un monorepo (Nx, Turborepo), configurez CI pour détecter les paquets modifiés et ne construire/test que ceux qui sont affectés.
Enregistrement et alerte – Surveillance de la durée de construction, des taux de défaillance et des tendances de couverture des essais.

Pièges courants et comment les éviter

Long build times – Optimisez en cachant et en parallélisant les tâches. Utilisez les coureurs macOS uniquement pour les constructions iOS; utilisez Linux pour Android et testez.
Tests en mouvement – Surtout les tests E2E sur CI. Utilisez des mécanismes de ré-essai ou marquez-les comme non-bloquant. Préférez la ré-essai intégrée Detox. Assurez-vous que les simulateurs/émulateurs sont propres.
Exemption du certificat et de la fourniture du profil[ – Utiliser fastlane match avec une repo Git ou un stockage en nuage. Définir des rappels de calendrier pour faire pivoter les certificats avant l'expiration.
iOS problèmes de signature dans CI – Pièges communs: mauvais profil de provisionnement, inadéquation entre l'identificateur de paquet et le profil, clé privée expirée. Double-vérifiez la configuration de la correspondance et assurez-vous que tous les secrets sont corrects.
La perte de keystore Android – Gardez les sauvegardes de votre keystore de libération. Si vous avez perdu, vous ne pouvez pas mettre à jour l'application. Utilisez les secrets de CI pour le stocker, mais aussi garder une sauvegarde locale dans un endroit sécurisé.
Les erreurs de correspondance de la version de la dependency – Pin versions dans et . Utilisez les fichiers de verrouillage et les commit. CI devrait toujours installer à partir des fichiers de verrouillage (] au lieu de .

Mesurer le succès

Suivez les mesures suivantes pour évaluer votre pipeline :

Temps de construction – Temps total de la mise en route à l'artefact. Visez moins de 30 minutes pour un pipeline complet.
Fréquence de déploiement – Combien de fois relâchez-vous? Un bon pipeline CI/CD devrait permettre au moins des sorties hebdomadaires pour les applications mobiles.
Taux d'échec – Pourcentage de constructions qui échouent. Étudier les échecs récurrents pour améliorer la stabilité.
Temps de rétroaction – Combien de temps faut-il pour qu'un développeur voie les résultats de l'IC ? Moins de 10 minutes pour les tests unitaires est excellent.
Couverture des tests – Surveiller les tendances, pas les nombres absolus. Une chute soudaine indique un nouveau code non testé.

Utilisez ces mesures pour identifier les goulets d'étranglement et itérer sur votre pipeline. Par exemple, si iOS construit prend 45 minutes, envisager de mettre en cache les CocoaPods et utiliser macOS M1 coureurs pour une compilation plus rapide.

Conclusion

La mise en œuvre de CI/CD pour les applications React Native ne se limite pas à l'automatisation, mais à la création d'un processus de livraison fiable et reproductible qui s'adapte à votre équipe. En intégrant les tests, la construction, la signature et le déploiement dans un seul pipeline, vous réduisez les risques, accélèrez les rejets et les développeurs libres pour vous concentrer sur les fonctionnalités.

Les outils et les modèles décrits ici — GitHub Actions, fastlane, Detox et caching approprié — sont testés en production par des équipes qui expédient des millions de téléchargements. Les adopter transformera votre workflow de développement de versions manuelles, sujettes aux erreurs en un flux continu et en douceur de mises à jour de haute qualité.

Pour plus de renseignements, consultez React Native , document officiel de CI/CD et le Guide CircleCI pour Réact Native.