Construction automatique de l'Capacitor IOS avec Codemagic

Déploiement continu pour iOS à l'aide de Codemagic

Prérequis

Avant de continuer avec le tutoriel…

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

Informations importantes sur le prix

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 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 cet 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!

Diveons-y !

Étapes à suivre dans cet article

1. Utilisation de 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. Copier les fichiers Fastlane
6. 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.
À partir 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éer une clé d'accès à l'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.

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

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

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

6 — Cliquez sur Générer.

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

Les informations de nom de clé, d'ID de 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> 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 code dépôt, 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 identités de signature code Et téléchargez ensuite le certificat

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

3. Entrez le App Store Connect API key namenom utilisable par l'utilisateur pour la clé qui sera utilisée pour référencer la clé ultérieurement dans les paramètres de l'application.

4. Entrez les Issuer ID et les valeurs. Key ID Cliquez sur

5. Sélectionnez un fichier .p8 ou glissez le fichier pour télécharger la clé App Store Connect __CAPGO_KEEP_0__ téléchargée précédemment. or drag the file to upload the App Store Connect API key downloaded earlier.

6. Enregistrer Maintenant, nous pouvons gérer Codemagic avec la clé App Store Connect __CAPGO_KEEP_0__, c'est génial !.

Now we can manage Codemagic with the App Store Connect API key, great!

Certificats

Ouvrez XCode et allez à

2. Create certificates and provisioning profiles Paramètres > Comptes > Identifiant Apple > Équipes et sélectionnez votre équipe.

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

Ensuite, vous pouvez créer un nouveau certificat.

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

Pour y parvenir, vous devez vous rendre dans la clé de chaîne, passer à la clé de chaîne 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).

Exporter

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

clé de chaîne clé de chaîne de connexion.

Cela téléchargera le certificat sous forme de .p12 fichier.

Profils de provisionnement

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

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

Et sélectionnez App Store Connect.

Ensuite, vous devez sélectionner l'application appropriée, soyez prudent, vous ne pouvez pas utiliser des wildcards sinon la signature échouera.

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 d'aujourd'hui) et cliquez sur Continuer.

Enfin, entrez 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 .mobileprovision fichier.

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 les utiliser. 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 dans paramètres codemagic.yaml > Certificats de signature Code.
2. Ouvrez certificats iOS tab.
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. Entrez le Mot de passe du certificat et choisissez un Nom de référence.
5. Cliquez 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 à 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 De plus, Codemagic vous informera si un certificat de signature __CAPGO_KEEP_1__ correspondant est disponible dans les identités de signature __CAPGO_KEEP_2__ (un signe de vérification verte dans le champ) ou non. 3. Configurer Codemagic

Configurer les secrets de Codemagic

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

Eh bien, ce n'est plus un secret – elles viennent de votre projet secret. 🤦 ENV 4. Configurer le fichier de flux de travail de Codemagic

Créez un fichier nommé

à la racine de votre projet et ajoutez les éléments suivants. codemagic.yml Ce flux de travail doit être déclenché manuellement ou après chaque __CAPGO_KEEP_0__

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 Certificate, si vous devez automatiser les balises, veuillez vous référer à Construction automatique et de mise en production avec des GitHub actions premier.

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

Chaque fois que vous envoyez une nouvelle balise, une mise en production sera créée 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 le plugin Capacitor JavaScript est préférable.

5. Déclencher le workflow

Déclenchez le workflow

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

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

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 Nouvelle construction.

Sélectionnez ensuite la branche que vous souhaitez construire.

Et cliquez sur Nouvelle construction.

Allez ensuite à la liste des constructions

Cliquez ensuite sur la construction pour voir le résultat.

Vous pouvez 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

Cet article est basé sur les articles suivants :

• Déploiement continu pour IOS en utilisant Codemagic et GitHub actions
• Documentation de Codemagic
• Ce GitHub message de @mrogunlana

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-le avec Capgo CI/CD for the product workflow in Capgo CI/CD, Capgo Native Builds for the product workflow in Capgo Native Builds, Capgo Integrations for the product workflow in Capgo Integrations, Intégration CI/CD pour les détails d'implémentation dans l'intégration CI/CD GitHub Actions Integration pour les détails d'implémentation dans GitHub Actions Integration.