Zum Hauptinhalt springen
CI/CD

Automatischer Capacitor IOS-Build mit Codemagic

Wie Sie eine CI/CD-Pipeline für Ihre iOS-Ionic-App mit Codemagic in 5 Minuten (2024) einrichten

Automatischer Capacitor IOS-Build mit Codemagic

Martin Donadieu

Schreiber

Valeria

Rezensent

Jordan

Redakteur

Automatischer Capacitor IOS-Build mit Codemagic

Kontinuierliche Lieferung für iOS mit Codemagic

Voraussetzungen

Bevor Sie mit der Anleitung fortfahren…

  • Mitgliedschaft im iOS-Entwicklerprogramm.
  • Sehnsucht, zu lesen 😆…

Wichtige Hinweise zum Preis

Preis Codemagic-Aktion

https://codemagic.io/preisliste/

Der Dienst ist ‘free’ bis zu 500 Minuten macOS M1 pro Monat, abhängig von der gewählten Maschine.
We are going to use a macOS M1 Nachdem wir auf die Anforderungen und Preise hingewiesen haben, wenn Sie möchten, können wir fortfahren…

🔴 Wenn Sie über Anforderungen und Preise informiert wurden, möchten Sie gerne fortfahren…

📣 In the post we assume that we have the app created in iTunes connect, we do have the certificates of the Apple ecosystem, everything will be setup by Codemagic!

Lassen Sie uns loslegen 🤿

Schritte, die Sie befolgen müssen

  1. Verwendung von App Store Connect API mit Codemagic
  2. Anforderungen
  3. Erstellung eines App Store Connect API-Schlüssels
  4. Verwendung eines App Store Connect API-Schlüssels
  5. Kopieren von Fastlane-Dateien
  6. Konfigurieren Sie Codemagic

1. Verwendung von App Store Connect API mit Codemagic

Starting February 2021, two-factor authentication or two-step verification is required for all users to sign in to App Store Connect. This extra layer of security for your Apple ID helps ensure that you’re the only person who can access your account.
From Apple Support

Um mit match zu beginnen, müssen Sie Ihre bestehenden Zertifikate widerrufen. Keine Sorge, Sie erhalten das neue direkt.

Anforderungen

Um App Store Connect API nutzen zu können, benötigt Codemagic drei Dinge. drei Dinge.

  1. Dienststelle-ID.
  2. Schlüssel-ID.
  3. Schlüsseldatei oder Schlüsselinhalt.

Erstellung einer App Store Connect API-Schlüssel

Um Schlüssel zu generieren, benötigt man die Administratorrechte in App Store Connect. Wenn man diese Rechte nicht hat, kann man den relevanten Personen diesen Artikel zukommen lassen und die folgenden Anweisungen befolgen.

1 — Anmeldung bei App Store Connect.

2 — Auswahl Benutzer und Zugriff.

Zugriff auf App Store Connect

3 — Wählen Sie die API Schlüsseltab.

App Store Connect API Schlüssel

4 — Klicken Sie auf Erstellen API Schlüssel oder die (+) Add-Taste.

App Store Connect API Schlüssel erstellen

5 — Geben Sie dem Schlüssel einen Namen und wählen Sie ein Zugriffsebene. Wir empfehlen, App Manager Zugriffsrechte, erfahren Sie mehr über die Rolle-Berechtigungen des Apple-Entwickler-Programms here

App Store Connect API Schlüssel erstellen

6 — Klicken Sie auf Erstellen.

Ein API-Schlüssel kann nicht auf bestimmte Apps beschränkt werden.

Die neuen Schlüsselnamen, Schlüssel-IDs, ein Download-Link und weitere Informationen erscheinen auf der Seite.

App Store Connect-Download-Schlüssel

Hier finden Sie alle drei notwendigen Informationen: <1> Issue-ID.
<2> Schlüssel-ID.
<3> Klicken Sie auf "Download API-Schlüssel" zum Herunterladen Ihres API privaten Schlüssels. Der Download-Link erscheint nur, wenn der private Schlüssel noch nicht heruntergeladen wurde. Apple hält keinen Kopie des privaten Schlüssels. Sie können ihn daher nur einmal herunterladen.

🔴 Speichern Sie Ihren privaten Schlüssel an einem sicheren Ort. Sie sollten Ihre Schlüssel niemals teilen, Schlüssel in einem code-Repository speichern oder Schlüssel in Client-Seiten code einbinden.

Hinzufügen der App Store Connect API-Schlüssel zu Codemagic

  1. Öffnen Sie die Einstellungen Ihres Codemagic-Teams Wählen Sie Team-Integrationen Öffne Team Wählen Sie code-Signierungsidentitäten Wählen Sie code-Signierungsidentitäten Und laden Sie das Zertifikat hoch. Das Zertifikat hochladen.

  2. Klicken Sie auf Add key button.

  3. Eingeben des App Store Connect API key nameDies ist ein menschenlesbarer Name für die Schlüssel, der später in der Anwendungseinstellung verwendet wird.

  4. Eingeben des Issuer ID and Key ID und

  5. Werte. Klicken Sie auf or drag the file to upload the App Store Connect API key downloaded earlier.

  6. Klicken Speichern.

Jetzt können wir Codemagic mit der App Store Connect API-Schlüssel verwalten, großartig!

2. Erstellen Sie Zertifikate und Provisionierungsprofile

Zertifikate

Öffnen Sie XCode und gehen Sie zu Einstellungen &gt; Konten &gt; Apple-ID &gt; Teams und wählen Sie Ihr Team.

Code Signierungsidentitäten

Klicken Sie auf Zertifikate verwalten &gt; + und wählen Sie Apple Distribution.

Apple Distribution

Dann können Sie ein neues Zertifikat erstellen.

Dann müssen Sie zum Schlüsselkasten gehen, um das Zertifikat als .p12 Datei.

Um dies zu tun, müssen Sie zu den Schlüsselkarten wechseln, auf die login Schlüsselkarten und dann auf die Registerkarte Meine Zertifikate.

Meine Zertifikate

Dann können Sie das Zertifikat auswählen, das Sie herunterladen möchten. (Suchen Sie nach dem Datum des Zertifikats)

And then right-click on the certificate and select Exportieren.

Wählen Sie die Dateiformat Persönliche Informationen austauschen (.p12).

Das wird das Zertifikat als .p12 Datei.

Zertifikatsprofile

Öffnen Apple Developer und wählen Sie das richtige Team.

Erstellen Sie dann ein neues Profil, indem Sie auf +

Ein neues Profil erstellen

Und wählen Sie App Store Connect.

App Store Connect auswählen

Wählen Sie dann das richtige App, seien Sie vorsichtig, Sie können keine Wildcard verwenden, sonst wird das Signieren fehlschlagen.

Das richtige App auswählen

Wählen Sie das richtige Zertifikat, das Sie vorher erstellt haben (suchen Sie nach dem Ablaufdatum, es sollte der gleiche Tag und Monat wie heute sein), und klicken Sie auf Weiter.

Wählen Sie das richtige Zertifikat

Schließlich geben Sie den Namen des Profils ein und klicken auf Erstellen.

Der Name wird verwendet, um das Profil in Codemagic zu identifizieren.

Erstellen Sie das Profil

Sie können das Profil als .mobileprovision Datei.

Herunterladen des Profils

Hinzufügen der Code Zertifizierung für die Signatur

Codemagic ermöglicht Ihnen, code Signierzertifikate als PKCS#12-Archive hochzuladen, die sowohl das Zertifikat als auch die private Schlüssel enthalten, die zum Einsatz des Zertifikats erforderlich sind. Wenn Sie hochladen, wird Codemagic Sie um die Zertifikats-Passphrase (wenn das Zertifikat mit einer Passphrase geschützt ist) sowie um eine eindeutige Referenznamedie dann für die Verwendung in der codemagic.yaml Konfiguration, um die spezifische Datei abzurufen.

  • Zertifikat hochladen
  • Neues Zertifikat generieren
  • Von Developer-Portal abrufen
  1. Öffnen Sie Ihre Codemagic-Team-Einstellungen, gehen Sie zu codemagic.yaml-Einstellungen &gt; Code Signierungsidentitäten.
  2. Öffnen iOS-Zertifikate Tab.
  3. Laden Sie das Zertifikatsdatei, indem Sie auf Wählen Sie eine .p12 oder .pem-Datei oder indem Sie sie in das angegebene Feld ziehen.
  4. Geben Sie das Zertifikatspasswort und wählen Sie einen Referenznamen.
  5. Click Zertifikat hinzufügen

Hinzufügen des Provisioning-Profils

Mit Codemagic können Sie ein Provisioning-Profile hochladen, das für die Anwendung verwendet werden soll, oder ein Profil vom Apple Developer Portal abrufen.

Die Profilart, das Team, der Bundle-Id und die Ablaufzeit werden für jedes Profil angezeigt, das zu den Code Signieridentitäten hinzugefügt wird. Darüber hinaus wird Codemagic Ihnen mitteilen, ob ein passendes code Signierzertifikat in den Code Signieridentitäten (ein grüner Haken im Feld) oder nicht verfügbar ist. Zertifikat 3. Einrichten von Codemagic

Konfigurieren Sie Codemagic-Secrets

Konfigurieren Sie Codemagic-Schlüssel

Automatische Capacitor iOS-Builds mit Codemagic ENV Kommen sie aus wem? Nun, das ist kein Geheimnis mehr – sie kommen aus Ihrem Projektschlüssel.

Erstellen Sie eine Datei mit dem Namen

Erstellen Sie ein Datei mit dem Namen codemagic.yml Diese Workflow-Aktion sollte manuell oder nach jedem __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

Dieses Workflow sollte manuell ausgelöst oder nach jedem GitHub ausgelöst werden. tag, wenn Sie die Automatisierung von Tags benötigen, beziehen Sie sich auf Automatische Build- und Release-Prozesse mit GitHub-Aktionen erstens.

Zuerst wird dieser Workflow Ihre NodeJS-Abhängigkeiten ziehen, installieren und Ihre JavaScript-Anwendung bauen.

Jedes Mal, wenn Sie eine neue Version veröffentlichen, wird ein Release in TestFlight erstellt.

Für Ihre App ist es nicht erforderlich, Ionic zu verwenden, nur die Capacitor-Basis ist erforderlich, sie kann alte Cordova-Module enthalten, aber Capacitor-JavaScript-Plugins werden bevorzugt.

5. Workflow auslösen

Workflow auslösen

Pushen Sie die neuen Commits in die Zweig main oder development den Workflow auszulösen.

um den Workflow auszulösen.

Nach wenigen Minuten sollte der Build in Ihrem App Store Connect-Dashboard verfügbar sein.

Testflug-Dashboard

Manuell starten

Sie können den Workflow manuell starten.

Wählen Sie zunächst die App, die Sie bauen möchten, und klicken Sie dann auf Neuen Build starten.

App auswählen

Wählen Sie dann die Zweig, den Sie bauen möchten.

Zweig auswählen

Und klicken Sie dann auf Neuen Build starten.

Gehe dann zur Build-Liste

Baumliste

Und klicken Sie auf die Baustelle, um das Ergebnis zu sehen.

Baustellenergebnis

Kann von lokalem Rechner aus bereitgestellt werden

Ja, das können Sie, und es ist unkompliziert.

Sie können Xcode verwenden, um Ihre App zu erstellen und zu signieren, wie immer.

Danke

Dieser Blog basiert auf den folgenden Artikeln:

Fahren Sie weiter mit der automatischen Capacitor IOS-Baustelle mit Codemagic

Wenn Sie __CAPGO_KEEP_0__ verwenden Automatisches Capacitor-IOS-Build mit Codemagic um die CI/CD-Automatisierung zu planen, verbinden Sie es mit Capgo CI/CD für den Produktworkflow in Capgo CI/CD Capgo Native Builds für den Produktworkflow in Capgo Native Builds Capgo Integrations für den Produktworkflow in Capgo Integrations CI/CD-Integration für die Implementierungsdetails in CI/CD-Integration und GitHub Aktionen-Integration für die Implementierungsdetails in GitHub Actions-Integration.

Live-Updates für Capacitor-Apps

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.

Neueste von unserem Blog

Capgo bietet Ihnen die besten Einblicke, die Sie benötigen, um eine wirklich professionelle Mobilanwendung zu erstellen.