Automatique Capacitor build IOS avec Codemagic

Déploiement continu pour iOS avec Codemagic

Prérequis

Avant de poursuivre avec le tutoriel…

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

Important sur le prix

https://codemagic.io/pricing/

Le service est ‘gratuit’ jusqu'à 500 minutes macOS M1 par mois, en fonction de la machine choisie.
On utilise une machine macOS M1 vous pouvez voir dans l'écran d'attente 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 !

Plongons-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, 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 identifiant Apple vous aide à vous assurer que vous êtes la seule personne qui peut accéder à votre compte.
Depuis Support Apple

Commencez par match nécessite que vous révoquez vos certificats existants. Mais n'ayez crainte, vous obtiendrez le nouveau directement.

Exigences

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

1. identifiant de la clé.
2. fichier de clé ou contenu de la clé.
3. Création d'une clé App Store Connect __CAPGO_KEEP_0__

Creating an App Store Connect API Key

1 — Connectez-vous à

App Store Connect App Store Connect.

2 — Sélectionner Utilisateurs et accès.

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

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 vous recommandons de choisir App Manager les droits d'accès, en savoir plus sur les autorisations du rôle du programme Apple Developer là

6 — Cliquez sur Générer.

Une clé API ne peut pas être limitée à 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 ici les trois informations nécessaires : <1> ID de l'incident.
<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 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.

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 code Et téléchargez le certificat

2. Cliquez sur le Ajoutez une clé bouton.

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

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

5. et 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 Sauvegarder.

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 à Réglages > 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.

Alors, vous devez vous rendre dans la clé de chiffrement pour télécharger le certificat sous forme de .p12 fichier.

Pour ce faire, vous devez vous rendre dans la clé de chiffrement, passer à la clé de chiffrement de connexion et puis la vue clés de connexion clés de connexion Ensuite, vous pouvez sélectionner le certificat que vous souhaitez télécharger. (Recherchez par la date du certificat).

Exporter

Choisissez le format de fichier Informations personnelles d'échange (.p12).

clé de chiffrement vue.

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

Profils de provisionnement

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

Créez ensuite un nouveau profil en cliquant sur +

Et sélectionnez App Store Connect.

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

Sélectionnez le certificat approprié que vous avez créé avant (cherchez la date d'expiration, elle doit correspondre au jour et au mois actuel) et cliquez sur Continuez.

Entrez enfin le nom du profil et cliquez sur Générez.

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

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

Ajoutez 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. Nom de référence, qui peut ensuite être utilisé dans la codemagic.yaml configuration 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 des Développeurs

1. Ouvrez vos paramètres d'équipe Codemagic, allez dans paramètres codemagic.yaml > Identités de signature Code.
2. Ouvrez certificats iOS onglet.
3. Téléchargez le fichier de certificat en cliquant sur Choisissez un fichier .p12 ou .pem ou en le traînant dans la zone indiquée.
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 d'uploader un profil de provisioning à utiliser pour l'application ou de récupérer un profil depuis le [Apple Developer Portal](https://developer.apple.com/).

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 écu vert dans le champ) Certificat 3. Configuration de Codemagic

Configuration des secrets de Codemagic

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

Ce n'est plus un secret – elles proviennent de votre projet secret. ENV 4. Configuration du fichier de workflow de Codemagic

Créez un fichier nommé

à la racine de votre projet et ajoutez les éléments suivants. codemagic.yml Ce workflow 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 tagSi vous avez besoin d'automatiser les tags, veuillez vous référer à Construction automatique et de mise en production avec des actions GitHub premier.

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

Chaque fois que vous envoyez un nouveau tag, 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 les plugins JavaScript Capacitor sont préférés.

5. Déclencher le flux de travail

Déclenchez le flux de travail

Envoi des nouveaux commits vers la branch main ou development contexte : Fragment de texte HTML d'une chaîne de dialogue Capgo plus longue (clé parente `alternatives_cta_questions`). Page/zone : page de comparaison des alternatives de mise à jour en direct de Capacitor. Rôle : Paragraphe marketing ou juridique long. Vu dans : page alternatives.astro. Conservez les termes de produit et de marque Capgo ainsi que les termes de développeur exactement. Clé de message `alternatives_cta_questions` (Questions de CTA alternatives). | Fragment de texte HTML d'une chaîne de dialogue Capgo plus longue (clé parente `appflow_cta_questions`). Page/zone : page de comparaison/migration de Appflow. Rôle : Paragraphe marketing ou juridique long. Vu dans : page ionic-appflow.astro. Conservez les termes de produit et de marque Capgo ainsi que les termes de développeur exactement. Clé de message `appflow_cta_questions` (Questions de CTA Appflow). | Fragment de texte HTML d'une chaîne de dialogue Capgo plus longue (clé parente `capwesome_cta_questions`). Page/zone : page de comparaison de Capawesome. Rôle : Paragraphe marketing ou juridique long. Vu dans : page capwesome.astro. Conservez les termes de produit et de marque Capgo ainsi que les termes de développeur exactement. Clé de message `capwesome_cta_questions` (Questions de CTA Capwesome). | Fragment de texte HTML d'une chaîne de dialogue Capgo plus longue (clé parente `consulting_faq_subtitle`). Page/zone : page de services de consultation. Rôle : Sous-titre ou slogan de section. Vu dans : page consulting.astro. Conservez les termes de produit et de marque Capgo ainsi que les termes de développeur exactement. Clé de message `consulting_faq_subtitle` (Sous-titre FAQ de consultation). | Page/zone : page de comparaison/migration de Appflow. Rôle : Étiquette de navigation ou élément de navigation court. Vu dans : page ionic-appflow.astro, page ionic-enterprise-plugins.astro, page solutions/ionic-enterprise-plugins.astro. Clé de message `appflow_plugins_or` (Appflow Plugins Ou).

Après quelques minutes, la mise à jour 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 Démarrer une nouvelle mise à jour.

Sélectionnez ensuite la branche que vous souhaitez construire.

Et cliquez sur Démarrer une nouvelle mise à jour.

Alors, allez-vous dans la liste de build

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

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 :

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

Continuez de là depuis la mise en œuvre automatique Capacitor IOS avec Codemagic

Si vous utilisez La mise en œuvre automatique Capacitor IOS avec Codemagic pour planifier l'automatisation CI/CD, connectez-l’à Capgo CI/CD pour le flux de workflow du produit dans Capgo CI/CD, Capgo Builds natifs pour le flux de workflow du produit dans Capgo Builds natifs, Capgo Intégrations pour le flux de workflow du produit dans Capgo Intégrations, Intégration CI/CD pour le détail d'implémentation dans Intégration CI/CD, et Actions d'intégration GitHub pour les détails d'implémentation dans les actions d'intégration GitHub