Aller directement au contenu principal
CI/CD

Construction automatique de l'Capacitor IOS avec Codemagic

Comment configurer une chaîne de construction continue pour votre application IOS Ionic avec Codemagic en 5 minutes (2024)

Martin Donadieu

Martin Donadieu

Spécialiste du contenu

Construction automatique de l'Capacitor IOS avec Codemagic

Livraison continue pour iOS en utilisant Codemagic

Prérequis

Avant de continuer avec le tutoriel…

  • Membre du programme iOS.
  • Souhait de lire 😆…

Important sur le prix

Prix de l'action Codemagic

https://codemagic.io/pricing/

Le service est ‘gratuit jusqu'à 500 minutes par mois sur macOS M1, en fonction de la machine choisie.
Nous allons utiliser un ordinateur macOS M1 machine, vous pouvez voir dans l'écran son prix et ses limites (tarifs au moment de la création du tutoriel, ils pourraient subir des changements à l'avenir)

🔴 Une fois averti des exigences et des prix, si vous le souhaitez, nous continuons…

📣 Dans l'article, on suppose que nous avons créé l'application dans iTunes connect, nous avons bien les certificats de l'écosystème Apple, tout sera configuré par Codemagic!

Découvrons cela !

Étapes à suivre dans l'article

  1. Utilisation de App Store Connect API avec Codemagic
  2. Exigences
  3. Création d'une clé App Store Connect API
  4. Utiliser une clé App Store Connect API
  5. Copier les fichiers Fastlane
  6. Configurer Codemagic

1. Utiliser App Store Connect API avec Codemagic

À partir de février 2021, la deuxième étape de vérification ou l'authentification à deux facteurs est requise pour tous les utilisateurs pour se connecter à App Store Connect. Cette couche supplémentaire de sécurité pour votre ID Apple vous aide à vous assurer que vous êtes la seule personne qui peut accéder à votre compte.
De Support Apple

Pour commencer avec match, vous devez révoquer vos certificats existants. Mais n'ayez crainte, vous obtiendrez le nouveau directement.

Exigences

Pour pouvoir utiliser App Store Connect API, Codemagic a besoin de trois choses.

  1. Identifiant émetteur.
  2. Identifiant de clé.
  3. Fichier de clé ou contenu de clé.

Création d'une clé App Store Connect API

Pour générer des clés, vous devez avoir les droits d'administrateur dans App Store Connect. Si vous n'avez pas ces droits, vous pouvez diriger la personne concernée à cet article et suivre les instructions suivantes.

1 — Se connecter à App Store Connect.

2 — Sélectionner Utilisateurs et accès.

Accès à l'utilisateur App Store Connect

3 — Sélectionner la rubrique API Clés.

Clés App Store Connect API

4 — Cliquez sur Générer la clé API ou le bouton Ajouter (+).

Les clés API d'App Store Connect créent

5 — Entrez le nom de la clé et sélectionnez un niveau d'accès. Nous recommandons de choisir App Manager les droits d'accès, en savoir plus sur les autorisations du rôle du programme Apple Developer ici

Nom de la clé API d'App Store Connect

6 — Cliquez sur Générer.

L'accès d'une clé API ne peut pas être limité à des applications spécifiques.

Le nom de la nouvelle clé, l'ID de la clé, un lien de téléchargement et d'autres informations apparaissent sur la page.

Téléchargement des clés d'App Store Connect

Récupérez les trois informations nécessaires ici : 1> ID de l'incident.
2> ID de la clé.
Appuyez sur « Télécharger la clé API » pour télécharger votre clé privée API.

🔴 Stockez votre clé privée dans un endroit sûr. Vous ne devriez jamais partager vos clés, stocker les clés dans un code dépôt, ou inclure les clés dans le code côté client code.

Ajouter la clé API d'App Store Connect à Codemagic

  1. Ouvrez les paramètres de votre équipe Codemagic Sélectionnez les intégrations de l'équipe Ouvrez l'équipe Sélectionnez les identités de signature code Sélectionnez les identités de signature code Et téléchargez le certificat Téléchargez le certificat

  2. Cliquez sur « Ajouter la clé » bouton.

  3. Saisissez le App Store Connect API key nameCe nom est lisible par les humains et sera utilisé pour référencer la clé ultérieurement dans les paramètres de l'application.

  4. Saisissez le Issuer ID et Key ID valeurs.

  5. Cliquez sur Choisissez un fichier .p8 ou faites glisser le fichier pour télécharger la clé App Store Connect API téléchargée précédemment.

  6. Cliquez Enregistrer.

Nous pouvons maintenant gérer Codemagic avec la clé App Store Connect API, c'est génial !

2. Créez des certificats et des profils de provisionnement

Certificats

Ouvrez XCode et allez à Paramètres > Comptes > Identifiant Apple > Équipes et sélectionnez votre équipe.

Code identités de signature

Cliquez sur Gérer les certificats > + et sélectionnez Distribution d'Apple.

Distribution d'Apple

Vous pouvez ensuite créer un nouveau certificat.

Vous devez alors aller dans la clé de chiffrement pour télécharger le certificat sous forme de .p12 fichier.

Pour ce faire, vous devez aller dans la clé de chiffrement passer à la clé de chiffrement de connexion et puis la vue Mes Certificats.

Mes Certificats

Vous pouvez ensuite sélectionner le certificat que vous souhaitez télécharger. (Recherchez par la date du certificat)

Et puis cliquez avec le bouton droit sur le certificat et sélectionnez Exporter.

Choisissez le format de fichier Échange d'informations personnelles (.p12).

Cela téléchargera le certificat sous la forme d'un .p12 fichier.

Profils de mise en ligne

Ouvrir Apple Developer et sélectionnez l'équipe appropriée.

Créez ensuite un nouveau profil, en cliquant sur +

Créer un nouveau profil

Et sélectionnez App Store Connect.

Sélectionner App Store Connect

Vous devez ensuite sélectionner l'application appropriée, soyez prudent car vous ne pouvez pas utiliser des caractères génériques sinon la signature ne fonctionnera pas.

Sélectionner l'application appropriée

Sélectionnez le bon certificat que vous avez créé avant (cherchez la date d'expiration, elle doit être le même jour et mois que la date actuelle) et cliquez sur Continuer.

Sélectionnez le bon certificat

Enfin, entrez le nom du profil et cliquez sur Générer.

Le nom sera utilisé pour identifier le profil dans Codemagic.

Générer le profil

Vous pouvez télécharger le profil sous la forme .mobileprovision fichier.

Téléchargez le profil

Ajoutez le certificat de signature Code

Codemagic vous permet d'uploader des certificats de signature code sous forme d'archives PKCS#12 contenant à la fois le certificat et la clé privée qui est nécessaire pour l'utiliser. Lors de l'upload, Codemagic vous demandera de fournir le mot de passe du certificat (si le certificat est protégé par mot de passe) ainsi qu'un identifiant unique Nom de référence, qui peut ensuite être utilisé dans la codemagic.yaml configuration pour récupérer le fichier spécifique.

  • Uploader le certificat
  • Générer un nouveau certificat
  • Récupérer depuis le Portail des Développeurs
  1. Ouvrez les paramètres de votre équipe Codemagic, allez dans paramètres codemagic.yaml > Code identités de signature.
  2. Ouvrir certificats iOS Onglet.
  3. Téléchargez le fichier de certificat en cliquant sur Choisissez un fichier .p12 ou .pem ou en le faisant glisser dans la zone indiquée.
  4. Saisir le Mot de passe de certificat et choisissez un Nom de référence.
  5. Cliquez Ajouter le certificat

Ajout de la configuration de profil de provisionnement

Codemagic vous permet d'uploader un profil de provisionnement à utiliser pour l'application ou de récupérer un profil à partir du Portail du développeur Apple.

Le type de profil, l'équipe, l'identifiant de l'application et la date d'expiration sont affichés pour chaque profil ajouté aux identités de signature Code. De plus, Codemagic vous informera si un certificat de signature code correspondant est disponible dans les identités de signature Code (un écu vert dans le champ) ou non. 3. Configuration de Codemagic Configurer les secrets de Codemagic

Vous vous demandez peut-être où viennent les valeurs des

? Eh bien, ce n'est plus un secret – c'est de votre secret de projet. 🤦

4. Configuration du fichier de flux de travail de Codemagic ENV Créer un fichier nommé

3. Paramètres de Codemagic

Paramètres de Codemagic codemagic.yml à la racine de votre projet et ajoutez les lignes suivantes.

workflows:
  ionic-capacitor-ios-workflow:
    name: Capacitor iOS Workflow
    max_build_duration: 120
    instance_type: mac_mini_m1
    integrations:
      app_store_connect: CodeMagic
    environment:
      ios_signing:
        distribution_type: app_store
        bundle_identifier: YOUR_BUNDLE_IDENTIFIER
      vars:
        XCODE_WORKSPACE: ios/App/App.xcworkspace
        XCODE_SCHEME: App
        APP_STORE_APP_ID: YOUR_APP_STORE_APP_ID
      node: v20.14.0
      xcode: 15.4
      cocoapods: default
    triggering:
      events:
        - tag
      tag_patterns:
        - pattern: '*'
          include: true
    scripts:
      - name: Install dependencies
        script: |
          npm install
      - name: Cocoapods installation
        script: |
          cd ios/App && pod install
      - name: Update dependencies and copy web assets to native project
        script: |
          npm run build
          npx cap sync ios
      - name: Set up code signing settings on Xcode project
        script: |
          xcode-project use-profiles
      - name: Increment build number
        script: |
          cd $CM_BUILD_DIR/ios/App
          LATEST_BUILD_NUMBER=$(app-store-connect get-latest-app-store-build-number "$APP_ID")
          agvtool new-version -all $(($LATEST_BUILD_NUMBER + 1))
      - name: Build ipa for distribution
        script: |
          xcode-project build-ipa \
            --workspace "$XCODE_WORKSPACE" \
            --scheme "$XCODE_SCHEME"
    artifacts:
      - build/ios/ipa/*.ipa
      - /tmp/xcodebuild_logs/*.log
      - $HOME/Library/Developer/Xcode/DerivedData/**/Build/**/*.app
      - $HOME/Library/Developer/Xcode/DerivedData/**/Build/**/*.dSYM
    publishing:
      email:
        recipients:
          - YOUR_EMAIL
        notify:
          success: true # To not receive a notification when a build succeeds
          failure: false # To not receive a notification when a build fails
      app_store_connect:
        auth: integration
        # Configuration related to TestFlight (optional)
        # Note: This action is performed during post-processing.
        submit_to_testflight: true
        # Configuration related to App Store (optional)
        # Note: This action is performed during post-processing.
        submit_to_app_store: false

Cette workflow devrait être déclenchée manuellement ou après chaque GitHub tag, si vous avez besoin d'automatiser le tag, veuillez vous référer à Déploiement automatique et de libération avec GitHub actions tout d'abord.

Ensuite, cette workflow tirera vos dépendances NodeJS, les installera et construira votre application JavaScript.

Chaque fois que vous envoyez un nouveau tag, une mise à jour sera construite dans TestFlight.

Votre application n'a pas besoin d'utiliser Ionic, seule la base Capacitor est obligatoire, elle peut avoir des anciens modules Cordova, mais les plugins Capacitor JS sont préférés.

5. Déclencher la workflow

Déclenchez la workflow

Poussez les nouveaux commits vers la branch main ou development pour déclencher le flux de travail.

Démarré avec le commit

Après quelques minutes, le build devrait être disponible dans votre tableau de bord App Store Connect.

Tableau de bord Testflight

Démarrer manuellement

Vous pouvez démarrer le flux de travail manuellement.

Sélectionnez d'abord l'application que vous souhaitez construire, puis cliquez sur Démarrer une nouvelle build.

Sélectionner l'application

Sélectionnez ensuite la branche que vous souhaitez construire.

Sélectionner la branche

Et cliquez sur Démarrer une nouvelle build.

Alors allez-vous dans la liste des builds

Liste des builds

Et cliquez sur le build pour voir le résultat.

Résultat de la build

Vous pouvez déployer depuis votre machine locale

Oui, vous pouvez, et cela est sans effort.

Vous pouvez utiliser Xcode pour construire et signer votre application, comme toujours.

Merci

Cet article est basé sur les articles suivants :

Mises à jour en temps réel pour les applications Capacitor

Lorsqu'un bug de la couche web est en ligne, expédiez la correction par Capgo au lieu d'attendre des jours pour l'approbation de la boutique.

Démarrer Maintenant

Dernières actualités de notre Blog

Capgo vous donne les meilleures informations dont vous avez besoin pour créer une application mobile vraiment professionnelle.