Passer à la navigation principale
CI/CD

Construction automatique d'Capacitor IOS avec Codemagic

Comment configurer une chaîne de CI/CD pour votre application IOS Ionic avec Codemagic et Codemagic en 5 minutes (2024)

Crédits de l'article

Martin Donadieu

Auteur

Valeria

Relecteur

Jordan

Éditeur

Construction automatique d'Capacitor IOS avec Codemagic

Livraison Continue pour iOS à l'aide de Codemagic

Prérequis

Avant de continuer avec le tutoriel…

  • Membre du programme iOS.
  • Désir de lire 😆…

Important sur le prix

Prix de l'action Codemagic

https://codemagic.io/pricing/

Le service est ‘gratuit’ jusqu'à 500 minutes macOS M1 par mois, en fonction de la machine choisie.
Nous allons utiliser un macOS M1 machine, vous pouvez voir dans l'écran d'é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 l'application créée dans iTunes connect, nous avons bien les certificats de l'écosystème Apple, tout sera configuré par Codemagic !

En plongeant dedans 🤿

Étapes à suivre dans l'article

  1. Utilisation de l'App Store Connect API avec Codemagic
  2. Exigences
  3. Création d'une clé App Store Connect API
  4. Utilisation d'une clé App Store Connect API
  5. Copie des fichiers Fastlane
  6. Configuration de Codemagic

1. Utilisation de App Store Connect API avec Codemagic

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

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

Exigences

Pour être en mesure d'utiliser App Store Connect API, Codemagic a besoin de trois identifiant de l'émetteur.

  1. identifiant de clé.
  2. fichier de clé ou contenu de clé.
  3. three

Créer une clé d'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 vers cet article et suivre les instructions suivantes.

1 — Se connecter à App Store Connect.

2 — Sélectionner Utilisateurs et accès.

Accès utilisateur d'App Store Connect

3 — Sélectionner l'onglet Clés API.

Clés d'App Store Connect API

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

Clés d'App Store Connect API créent

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

les clés App Store Connect API créent le nom

6 — Cliquez sur Générer.

Un clé API ne peut pas avoir ses accès limités à des applications spécifiques.

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

Télécharger les clés App Store Connect

Récupérez les trois informations nécessaires ici : <1> L'ID de la demande.
<2> L'ID de la clé.
<3> Cliquez sur « Télécharger la clé API » pour télécharger votre clé privée API. Le lien de téléchargement n'apparaît que si la clé privée n'a pas encore été téléchargée. Apple ne garde pas une copie de la clé privée. Vous pouvez donc la télécharger qu'une seule fois.

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

Ajouter la clé App Store Connect API à Codemagic

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

  2. Cliquez sur le bouton Ajouter la clé bouton.

  3. Entrez le App Store Connect API key name. C'est un nom lisible par l'homme pour la clé qui sera utilisé pour faire référence à la clé ultérieurement dans les paramètres de l'application.

  4. Entrez les Issuer ID et Key ID valeurs.

  5. Cliquez sur Sélectionnez 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.

Maintenant, nous pouvons 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

Créez ensuite un nouveau certificat.

Vous devez ensuite aller dans le cléchain pour télécharger le certificat sous forme de .p12 fichier.

Pour ce faire, vous devez aller dans le cléchain, passer à la cléchain 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).

cléchain

vue

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

__CAPGO_KEEP_0__ __CAPGO_KEEP_0__.

Ce qui téléchargera le certificat sous forme de .p12 __CAPGO_KEEP_0__

__CAPGO_KEEP_1__

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

Ensuite, créez un nouveau profil en cliquant sur +

__CAPGO_KEEP_2__

Et sélectionnez App Store Connect.

Sélectionnez App Store Connect

Sélectionnez ensuite 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électionnez l'application appropriée

Sélectionnez le certificat approprié que vous avez créé avant (cherchez la date d'expiration, elle doit être la même journée et mois que celle d'aujourd'hui) et cliquez sur Continuez.

Sélectionnez le certificat approprié

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

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

Générez le profil

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

Télécharger le profil

Ajouter le certificat de signature Code

Le service 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 nécessaires à son utilisation. Lors de l'upload, Codemagic vous demandera de fournir le mot de passe du certificat (si celui-ci est protégé par mot de passe) ainsi qu'un nom de référence 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 vos paramètres d'équipe Codemagic, allez à paramètres codemagic.yaml > identités de signature Code.
  2. Ouvrir certificats iOS onglet.
  3. Téléchargez le fichier de certificat en cliquant sur Sélectionnez un fichier .p12 ou .pem ou en le traînant dans la zone indiquée.
  4. Entrez le Mot de passe du certificat et choisissez un Nom de référence.
  5. Cliquez Ajoutez un certificat

La mise en place du profil de provisionnement

Le 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.

The profile’s type, team, bundle id, and expiration date are displayed for each profile added to Code signing identities. Furthermore, Codemagic will let you know whether a matching code signing certificate is available in Code signing identities (a green checkmark in the Certificat 3. Configuration du Codemagic

Configurez les secrets du Codemagic

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

Ce n'est plus un secret – c'est votre secret de projet ! 🤦 ENV Adding the provisioning profile

4. Configurez le fichier de flux Codemagic.

Créez un fichier nommé codemagic.yml à la racine de votre projet et ajoutez les éléments suivants.

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

This workflow should be triggered manually or after each GitHub tagsi vous souhaitez automatiser la mise à jour des tags, veuillez vous référer à Automatic build and release with GitHub actions actions

en premier lieu.

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

Your App doesn’t need to use Ionic, only Capacitor base is mandatory, it can have old Cordova module, but Capacitor JS plugin should be preferred.

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

Déclenchez le flux de travail

Envoi des nouveaux commits vers la branche main ou development Déclenchez 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.

Choisissez d'abord l'application que vous souhaitez construire, puis cliquez sur Démarrer un nouveau build.

Sélectionnez l'application

Sélectionnez ensuite la branche que vous souhaitez construire.

Sélectionner la branche

Et cliquez sur Démarrer une nouvelle construction.

Alors allez-vous dans la liste de construction

Liste de construction

Et cliquez sur la construction pour voir le résultat.

Résultat de la construction

Pouvez-vous déployer à partir d'une machine locale

Oui, vous pouvez, et cela est sans effort.

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

Merci

Ce blog est basé sur les articles suivants :

Keep going from Automatic Capacitor IOS build with Codemagic

Si vous utilisez Automatic Capacitor IOS build with Codemagic pour planifier l'automatisation CI/CD, connectez-l’avec 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 Integrations for the product workflow in Capgo Integrations, Intégration CI/CD pour les détails d'implémentation dans Intégration CI/CD, et GitHub Actions Integration for the implementation detail in GitHub Actions Integration.

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

When a web-layer bug is live, ship the fix through Capgo instead of waiting days for app store approval. Users get the update in the background while native changes stay in the normal review path.

assistance humaine de Martin

Commencez dès maintenant

Dernières actualités de notre Blog

Capgo vous offre les meilleures informations nécessaires pour créer une application mobile véritablement professionnelle.