Compilation automatique de Capacitor iOS avec Codemagic

Voici la traduction en français du texte fourni :

Livraison continue pour iOS avec Codemagic

Prérequis

Avant de continuer le tutoriel…

• Adhésion au programme développeur iOS
• Envie de lire 😆…

Important concernant le prix

https://codemagic.io/pricing/

Le service est ‘gratuit’ jusqu’à 500 minutes macOS M1 / mois, selon la machine choisie
Nous allons utiliser une machine macOS M1, vous pouvez voir sur la capture d’écran son prix et ses limites (prix à la date de création du tutoriel, ils pourraient subir des changements à l’avenir)

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

📣 Dans cet article, nous supposons que nous avons créé l’application dans iTunes Connect, que nous disposons des certificats de l’écosystème Apple, tout sera configuré par Codemagic !

Passons à l’action 🧑🏽‍💻

Étapes à suivre dans l’article

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

1. Utilisation de l’API App Store Connect avec Codemagic

Depuis février 2021, l’authentification à deux facteurs ou la vérification en deux étapes est requise pour tous les utilisateurs pour se connecter à App Store Connect. Cette couche de sécurité supplémentaire pour votre identifiant Apple aide à garantir que vous êtes la seule personne à pouvoir accéder à votre compte.
De Apple Support

Commencer avec match nécessite de révoquer vos certificats existants. Mais ne vous inquiétez pas, vous aurez le nouveau directement.

Exigences

Pour pouvoir utiliser l’API App Store Connect, Codemagic a besoin de trois éléments :

1. ID de l’émetteur
2. ID de la clé
3. Fichier de clé ou contenu de la clé

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

Pour générer des clés, vous devez avoir l’autorisation d’administrateur dans App Store Connect. Si vous n’avez pas cette autorisation, vous pouvez diriger la personne concernée vers cet article et suivre les instructions suivantes.

1 — Connectez-vous à App Store Connect

2 — Sélectionnez Utilisateurs et accès

3 — Sélectionnez l’onglet Clés API

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

5 — Saisissez le nom de la clé et sélectionnez un niveau d’accès. Nous recommandons de choisir les droits d’accès Gestionnaire d'applications, lisez-en plus sur les autorisations des rôles du programme Apple Developer ici

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

Récupérez les trois informations nécessaires ici : <1> ID de l’émetteur
<2> 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 conserve pas de copie de la clé privée. Vous ne pouvez donc la télécharger qu’une seule fois.

🔴 Stockez votre clé privée dans un endroit sûr. Vous ne devez jamais partager vos clés, les stocker dans un référentiel de code ou inclure des clés dans le code côté client.

Ajout de la clé API App Store Connect à Codemagic

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

2. Cliquez sur le bouton Ajouter une clé

3. Saisissez le Nom de la clé API App Store Connect. Il s’agit d’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. Saisissez les valeurs ID de l'émetteur et ID de la clé

5. Cliquez sur **Choisir unVoici la traduction en français :

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

Maintenant, nous pouvons gérer Codemagic avec la clé API App Store Connect, super !

2. Créer les certificats et les profils de provisionnement

Certificats

Ouvrez XCode et allez dans Préférences > Comptes > Apple ID > Équipes et sélectionnez votre équipe

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

Vous pouvez ensuite créer un nouveau certificat

Ensuite, vous devez aller dans le trousseau pour télécharger le certificat sous forme de fichier p12

Pour ce faire, vous devez aller dans le trousseau, passer au trousseau session puis à l’onglet Mes certificats

Vous pouvez alors sélectionner le certificat que vous souhaitez télécharger (regardez la date du certificat)

Puis faites un clic 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 forme de fichier p12

Profils de provisionnement

Ouvrez Apple Developer et sélectionnez la bonne équipe

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

Et sélectionnez App Store Connect

Vous devez ensuite sélectionner la bonne application, attention vous ne pouvez pas utiliser de caractère générique sinon la signature échouera

Sélectionnez le bon certificat que vous avez créé précédemment (recherchez la date d’expiration, elle devrait être le même jour et mois qu’aujourd’hui) et cliquez sur Continuer

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

Le nom sera utilisé pour identifier le profil dans Codemagic

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

Ajout du certificat de signature de code

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

• Télécharger le certificat
• Générer un nouveau certificat
• Récupérer depuis le portail développeur

1. Ouvrez les paramètres de votre équipe Codemagic, allez dans Paramètres codemagic.yml > Identités de signature de code
2. Ouvrez l’onglet Certificats iOS
3. Téléchargez le fichier de certificat en cliquant sur Choisir un fichier p12 ou pem ou en le faisant glisser dans le cadre indiqué
4. Saisissez le Mot de passe du certificat et choisissez un Nom de référence
5. Cliquez sur Ajouter le certificat

Ajout du profil de provisionnement

Codemagic vous permet de télécharger un profil de provisionnement à utiliser pour l’application ou de récupérer un profil depuis le portail développeur Apple

Le type, l’équipe, l’identifiant du bundle et la date d’expiration du profil sont affichés pour chaque profil ajouté aux identités de signature de code. De plus, Codemagic vous indiquera si un certificat de signature de code correspondant est disponible dans les identités de signature de code (une coche verte dans le champ Certificat) ou non.

3. Configuration de Codemagic

Configurer les secrets Codemagic

Vous vous demandez d’où viennent les valeurs des ENV ? Eh bien, ce n’est plus un secret - c’est à partir du secret de votre projet 🤦

4. Configurer le fichier de workflow Codemagic

Créez un fichier nommé codemagic.yml à la racine de votre projet et ajoutez ce qui suit

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

Ce workflow devrait être déclenché manuellement ou après chaque tag GitHub. Si vous avez besoin d’automatiser le tag, veuillez d’abord vous référer à Construction et publication automatiques avec les actions GitHubEnsuite, ce workflow extraira vos dépendances NodeJS, les installera et construira votre application JavaScript

Chaque fois que vous envoyez un nouveau tag, une version sera construite dans TestFlight

Votre application n’a pas besoin d’utiliser Ionic, seule la base Capacitor est obligatoire, elle peut avoir d’anciens modules Cordova, mais les plugins JS Capacitor devraient être préférés

5. Déclencher le workflow

Déclencher le workflow

Poussez les nouveaux commits vers la branche main ou developement pour déclencher le workflow

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

Démarrer manuellement

Vous pouvez démarrer le workflow manuellement

Sélectionnez d’abord l’application que vous voulez construire, puis cliquez sur Démarrer une nouvelle build

Ensuite, sélectionnez la branche que vous voulez construire

Et cliquez sur Démarrer une nouvelle build

Puis allez à la liste des builds

Et cliquez sur la build pour voir le résultat

Peut déployer depuis une machine locale

Oui, vous pouvez, et c’est très simple

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

Remerciements

Ce blog est basé sur les articles suivants :

• Livraison continue pour iOS en utilisant Codemagic et GitHub actions
• Documentation Codemagic
• Ce message GitHub de @mrogunlana