Construction automatique de l'Capacitor IOS avec Codemagic

Déploiement continu pour iOS en utilisant Codemagic

Prérequis

Avant de poursuivre avec la tutrice…

adhésion au programme de développeurs iOS.
Envie de lire 😆…

Importants informations sur le prix

Prix de l'action Codemagic

Le service est ‘gratuit’ jusqu'à 500 minutes macOS M1 par mois, en fonction de la machine choisie.
Nous allons utiliser une machine macOS M1 Vous pouvez voir dans l'écran d'aperçu son prix et ses limites (tarifs valables à la création de ce 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 les certificats de l'écosystème Apple, tout sera configuré par Codemagic !

Plongez-y 🤿

Étapes à suivre dans l'article

Utilisation de App Store Connect API avec Codemagic
Exigences
Création d'une clé App Store Connect API
Utilisation d'une clé App Store Connect API
Copier les fichiers Fastlane
Configurer Codemagic

1. Utilisation de App Store Connect API avec Codemagic

À partir de février 2021, l'authentification à deux facteurs ou la vérification à deux étapes est obligatoire 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

Commencez par match nécessite que vous révoquez vos certificats existants. Mais ne vous inquiétez pas, vous obtiendrez le nouveau directement.

Exigences

Pour pouvoir utiliser App Store Connect API, Codemagic a besoin de trois ID émetteur.

ID de clé.
Fichier de clé ou contenu de clé.
Création d'une clé App Store Connect __CAPGO_KEEP_0__

Creating an App Store Connect API Key

1 — Connectez-vous à

App Store Connect three.

2 — Sélectionner Utilisateurs et Accès.

Accès utilisateur App Store Connect

3 — Sélectionnez l'onglet 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 App Store Connect API créent

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

Les clés App Store Connect API créent un nom

6 — Cliquez sur Générer.

Une clé API ne peut pas avoir son accès 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 de clés App Store Connect

Récupérez ici les trois informations nécessaires : 1. L'ID de l'incident.
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 de 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 du code côté client.

L'ajout de la clé App Store Connect API à Codemagic

Ouvrez les paramètres de votre équipe Codemagic Sélectionnez les identités de signature code Et téléchargez ensuite le certificat
Cliquez sur Ajoutez une clé bouton.
Entrez le App Store Connect API key nameCeci est un nom lisible par l'homme pour la clé qui sera utilisé pour référencer la clé ultérieurement dans les paramètres de l'application.
Entrez les Issuer ID et Key ID valeurs.
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.
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 provisioning

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

Distribution Apple

Vous pouvez ensuite créer un nouveau certificat.

Vous devez ensuite aller dans la clé de chaîne pour télécharger le certificat sous forme de .p12 fichier.

Pour ce faire, vous devez aller dans la clé de chaîne, passer à la connexion chaîne d'authentification et puis la vignette 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 de données personnelles (.p12).

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

Profils de provisionnement

Ouvrez 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électionnez App Store Connect

Vous devez ensuite sélectionner l'application appropriée, attention, 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 la date actuelle) et cliquez sur Continuez.

Sélectionnez le certificat approprié

Entrez finalement 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 forme de .mobileprovision fichier.

Télécharger le profil

Ajouter le certificat de signature Code

Codemagic vous permet d'uploader les 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 nom de référence unique , qui peut ensuite être utilisé dans laconfiguration pour récupérer le fichier spécifique. codemagic.yaml Nom de référence

Charger le certificat
Générer un nouveau certificat
Récupérer depuis le Portail des Développeurs

Ouvrir vos paramètres de l'équipe Codemagic, aller à paramètres de codemagic.yaml > Code identités de signature.
Ouvrir certificats iOS onglet.
Charger le fichier de certificat en cliquant sur Sélectionnez un fichier .p12 ou .pem ou en le traînant dans la zone indiquée.
Entrez le Mot de passe du certificat et choisissez un Nom de référence.
Cliquez Ajouter le certificat

Ajout du profil de provisionnement

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

Le type de profil, l'équipe, l'ID 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 étoile verte dans le Champ de certificat Certificat

3. Configurer Codemagic

Configurer les secrets Codemagic

Vous vous demandez peut-être d'où viennent les valeurs de ENV ? Eh bien, ce n'est plus un secret – il s'agit de votre secret de projet. 🤦

4. Configurer 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

Ce flux doit être déclenché manuellement ou après chaque GitHub tagsi vous souhaitez automatiser la mise à jour des tags, veuillez vous référer à Déploiement automatique et de construction avec GitHub actions en premier.

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

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

Votre application n'a pas besoin d'utiliser Ionic, seule la base Capacitor est obligatoire, elle peut avoir un module Cordova ancien, mais le plugin JS Capacitor est préférable.