Comment aborder le CI/CD mobile : un guide pratique

React Native est un framework populaire pour développer des applications mobiles multiplateformes à l’aide de JavaScript et de la bibliothèque React. Cet article vous apprendra comment configurer un pipeline CI/CD pour un projet React Native.

L’intégration continue et la livraison/déploiement continus (CI/CD) sont une méthodologie de développement logiciel qui vise à réduire le temps entre l’écriture du code et sa livraison aux utilisateurs. Cela inclut la création, le test et le déploiement automatiques des modifications de code. Cette pratique permet aux développeurs de proposer rapidement et facilement de nouvelles fonctionnalités et des corrections de bogues à leurs utilisateurs sans créer ni déployer manuellement le code.

Vous pouvez configurer un pipeline CI/CD pour votre projet React Native à l’aide de divers outils. Les choix populaires sont :

CercleCI
Jenkins
Travis CI
CI/CD GitLab
Actions GitHub

Dans cet article, nous nous concentrerons uniquement sur CircleCI. Cependant, vous pouvez appliquer tous les principes discutés ici à tout autre outil CI/CD. De plus, nous utiliserons du fil, mais vous pouvez faire la même chose avec npm.

Configurer CircleCI

Vous devez d’abord vous inscrire sur le site Web de CircleCI afin de configurer un pipeline CI/CD à l’aide de CircleCI. Ensuite, vous devez ajouter un fichier config.yml au répertoire circleci que vous venez de créer à la racine de votre application React Native. Les instructions pour construire et tester votre code seront dans ce fichier. Vous pouvez utiliser l’exemple de fichier config.yml suivant comme point de départ.

La tâche de build est la seule définie dans ce fichier config.yml, et elle effectue les actions suivantes :

Tout d’abord, téléchargez le code du référentiel.
Ensuite, utilisez du fil pour installer les exigences du projet.
Troisièmement, utilisez le test de fil pour exécuter la suite de tests.
Enfin, utilisez yarn build pour créer la version de production de l’application.

Ce fichier config.yml peut être modifié.

  jobs:
    build:
      docker:
        -image: circleci/node:12
      steps:
        -checkout
        -run: yarn
        -run: yarn test
        -run: yarn build

Créer, tester et déployer votre application

Chaque fois que vous publiez une modification dans votre référentiel, CircleCI construit et teste automatiquement votre code si votre fichier config.yml est en place. Le tableau de bord CircleCI vous permet d’afficher l’état de la construction et les journaux.

Vous pouvez passer à l’étape suivante de déploiement de votre code si la génération réussit.

Selon le mécanisme de distribution et la plate-forme cible (iOS ou Android), de nombreuses façons existent pour publier une application React Native (App Store, Play Store ou directement aux utilisateurs). Quelques options standards disponibles :

Centre d’application
Voie rapide
Amplifier AWS

Dans cet article, nous utiliserons AppCenter pour publier nos applications iOS et Android sur leurs magasins d’applications respectifs.

Vous devez ouvrir un compte AppCenter, puis suivre les instructions d’installation pour le configurer. Vous devez inclure des détails tels que le nom de l’application, le nom du package et les scripts de génération. De plus, vous devrez télécharger le Keystore pour Android, les profils d’approvisionnement pour iOS et les certificats de signature.

Cela peut être un processus frustrant, c’est pourquoi nous avons élaboré un petit guide étape par étape afin que vous puissiez aller de l’avant et générer les certificats, les profils d’approvisionnement et les magasins de clés nécessaires pour votre application.

Génération de certificats de signature et de profils de provisionnement pour votre application iOS

Pour générer des certificats de signature et des profils de provisionnement pour une application iOS, vous devrez suivre ces étapes :

Tout d’abord, connectez-vous à votre compte développeur Apple sur developer.apple.com/account/.
Accédez à la section « Certificats, identifiants et profils ».
Dans la section « Certificats », cliquez sur le bouton « + » pour créer un nouveau certificat.
Sélectionnez le type de certificat que vous souhaitez créer :
- Développement d’applications iOS : ce certificat vous permet de tester votre application sur un appareil physique et de la soumettre à l’App Store pour examen.
- App Store et Ad Hoc : ce certificat vous permet de distribuer votre application en dehors de l’App Store (par exemple, via TestFlight) et de la soumettre à l’App Store pour examen.
Suivez les invites pour générer votre certificat de signature. Tout d’abord, vous devez télécharger un fichier de demande de signature de certificat (CSR), que vous pouvez générer à l’aide de l’utilitaire Keychain Access sur votre Mac.
Une fois votre certificat émis, téléchargez-le et double-cliquez dessus pour l’installer dans votre trousseau.
Dans la section « Identifiants », créez un nouvel identifiant pour votre application. Tout d’abord, vous devrez sélectionner un identifiant unique pour votre application, tel qu’une chaîne de style DNS inversé (par exemple, com.example.myapp).
Dans la section « Provisioning Profiles », cliquez sur le bouton « + » pour créer un nouveau profil de provisioning.
Sélectionnez le type de profil de provisionnement que vous souhaitez créer :
- Développement : ce profil vous permet de tester votre application sur un appareil physique et de la soumettre à l’App Store pour examen.
- App Store : ce profil vous permet de soumettre votre application à l’App Store pour examen.
- Ad hoc : ce profil vous permet de distribuer votre application en dehors de l’App Store (par exemple, via TestFlight).
Suivez les invites pour générer votre profil d’approvisionnement. Vous devrez sélectionner le certificat de signature que vous avez créé précédemment et l’identifiant d’application que vous avez créé.
Une fois votre profil d’approvisionnement généré, téléchargez-le et double-cliquez dessus pour l’installer dans Xcode.

Vous devriez maintenant pouvoir utiliser ces certificats de signature et ces profils d’approvisionnement pour créer et signer votre application iOS.

Création d’un magasin de clés pour votre application Android

Pour créer un Keystore pour une application Android, vous devrez suivre ces étapes :

Tout d’abord, ouvrez un terminal ou une invite de commande sur votre ordinateur de développement.
Ensuite, accédez au répertoire dans lequel vous souhaitez créer votre fichier keystore.
Exécutez la commande suivante pour créer un nouveau fichier Keystore :

keytool -genkey -v -keystore my-keystore.jks -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

Remplacez « my-keystore.jks » par le nom de fichier souhaité de votre keystore et « my-key-alias » par un nom pour la clé dans le Keystore.
Vous serez invité à entrer un mot de passe pour le magasin de clés et la clé. Choisissez un mot de passe fort et notez-le, car vous en aurez besoin à chaque fois que vous signerez votre application.
Vous serez également invité à entrer vos informations personnelles (par exemple, nom, organisation, etc.). Ces informations seront incluses dans le certificat généré pour votre application.
Une fois le magasin de clés créé, vous pouvez signer votre application Android en spécifiant le magasin de clés et l’alias de clé dans votre configuration de build.

Vous devez conserver votre fichier keystore en toute sécurité et faire une copie de sauvegarde au cas où l’original serait perdu ou endommagé. Vous devrez également vous souvenir du mot de passe du magasin de clés, car vous en aurez besoin à chaque fois que vous signerez votre application.

Maintenant que nous avons tout le nécessaire pour continuer, il est temps de continuer à configurer AppCenter afin de télécharger notre version sur les magasins d’applications.

Incluez les instructions ci-dessous dans votre fichier config.yml. Ensuite, après avoir configuré votre application dans AppCenter, vous pouvez l’ajouter à votre pipeline CircleCI :

  - run:
          name: Install AppCenter CLI
          command: |
            npm install -g appcenter-cli
      - run:
          name: Deploy to AppCenter (Android)
          command: |
            appcenter login --token $APPCENTER_TOKEN
            appcenter distribute release -f $CIRCLE_ARTIFACTS/app-release.apk --group "Collaborators" --release-notes "Automatic deployment from CircleCI"
      - run:
          name: Deploy to AppCenter (iOS)
          command: |
            appcenter login --token $APPCENTER_TOKEN
            appcenter distribute release -f $CIRCLE_ARTIFACTS/app-release.ipa --group "Collaborators" --release-notes "Automatic deployment from CircleCI"

Pour déployer les fichiers app-release.apk et app-release.ipa dans cet exemple, nous nous connectons à AppCenter à l’aide de l’AppCenter CLI.

Le tableau de bord CircleCI doit être configuré avec les variables d’environnement $APPCENTER TOKEN et $CIRCLE ARTIFACTS.

La commande de déploiement peut être modifiée pour répondre à vos besoins. Par exemple, pour publier sur l’App Store ou le Play Store plutôt que directement sur les utilisateurs, vous devez fournir un groupe de distribution ou des notes de publication différents.

Conclusion

Cet article explique comment configurer CircleCI et AppCenter pour créer un pipeline CI/CD pour un projet React Native. Par conséquent, vous pouvez économiser du temps et des efforts en automatisant les processus de création, de test et de déploiement, et vous pouvez fournir à vos utilisateurs de nouvelles fonctionnalités et des correctifs plus rapidement et de manière cohérente.

Si vous n’avez pas envie de suivre toutes les étapes, vous pouvez utiliser le package react-native-ci qui automatisera la configuration de CircleCi pour vous. Cependant, nous ne le recommandons pas car il s’agit toujours d’un package expérimental et repose sur la pile d’opinions suivante :

GithubGenericName
CercleCI
Versions de développement, de mise en scène et de production.