Zum Hauptinhalt springen
CI/CD

Automatischer Capacitor IOS-Build mit Codemagic

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

Martin Donadieu

Martin Donadieu

Content-Marketing-Spezialist

Automatischer Capacitor IOS-Build mit Codemagic

Continuous Delivery für iOS mit Codemagic

Voraussetzungen

Bevor Sie mit dem Tutorial fortfahren…

  • Mitgliedschaft im iOS-Entwicklerprogramm.
  • Der Wunsch, etwas zu lesen 😆…

Wichtig ist der Preis

Preis Codemagic Action

https://codemagic.io/pricing/

Der Service ist ‘frei’ bis zu 500 macOS M1 Minuten / Monat, abhängig von der gewählten Maschine.
Wir werden ein macOS M1 Gerät verwenden, Sie können im Screenshot seinen Preis und Grenzen sehen (Preise Stand der Erstellung des Tutorials, sie könnten sich in Zukunft ändern)

🔴 Nachdem wir auf die Anforderungen und Preise hingewiesen haben, wenn Sie möchten, können wir fortfahren…

📣 In dem Artikel nehmen wir an, dass wir die App in iTunes Connect erstellt haben, wir haben die Zertifikate des Apple-Ökosystems, alles wird von Codemagic eingerichtet!

Los geht's 🤿

Schritte im Post

  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. Konfiguration von Codemagic

1. Verwendung von App Store Connect API mit Codemagic

Ab Februar 2021 ist für alle Benutzer eine zweifaktorale Authentifizierung oder eine zweistufige Überprüfung erforderlich, um sich bei App Store Connect anzumelden. Diese zusätzliche Sicherheitsstufe für Ihren Apple-Konto hilft sicherzustellen, dass Sie der einzige sind, der Zugriff auf Ihr Konto hat.
Von 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.

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

Erstellung eines App Store Connect API-Schlüssels

Um Schlüssel zu generieren, benötigen Sie die Admin-Berechtigung in App Store Connect. Wenn Sie diese Berechtigung nicht haben, können Sie den relevanten Personen diesen Artikel zukommen lassen und die folgenden Anweisungen befolgen.

1 — Anmelden bei App Store Connect.

2 — Wählen Sie Benutzer und Zugriff.

Zugriff auf App Store Connect-Benutzer

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

App Store Connect API Schlüssel

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

App Store Connect API Schlüssel erstellen

5 — Geben Sie den Namen für den Schlüssel ein und wählen Sie ein Zugriffsebene aus. Wir empfehlen, App Manager Zugriffsrechte, mehr über die Berechtigungen des Apple-Entwicklerprogramms zu erfahren hier

App Store Connect API Schlüssel erstellen: Name

6 — Klicken Sie auf Erstellen.

An API key’s access cannot be limited to specific apps.

Der Name des neuen Schlüssels, die Schlüssel-ID, ein Download-Link und weitere Informationen erscheinen auf der Seite.

Herunterladen von App Store Connect-Schlüsseln

Hier finden Sie alle drei notwendigen Informationen: <1> Issue-ID.
<2> Schlüssel-ID.
<3> Klicken Sie auf "Herunterladen 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. Daher können Sie ihn 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-Code einbeziehen.

Adding the App Store Connect API key to Codemagic

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

  2. Klicken Sie auf Schlüssel hinzufügen den Button.

  3. Geben Sie den App Store Connect API key name. Dies ist eine menschenlesbare Bezeichnung für den Schlüssel, die später in den Anwendungs-Einstellungen verwendet wird.

  4. Geben Sie den Issuer ID und Key ID Werte ein.

  5. Klicken Sie auf Wählen Sie ein .p8-File oder ziehen Sie das Datei hoch, um das App Store Connect API-Schlüssel heruntergeladen zu haben.

  6. Klicken Sie Speichern.

Jetzt können wir Codemagic mit dem 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; Abrechnungen &gt; Apple ID > Teams und wählen Sie Ihr Team.

Code Signieridentitäten

Klicken Sie auf Zertifikate verwalten > + und wählen Sie Apple Distribution.

Apple Distribution

Dann können Sie ein neues Zertifikat erstellen.

Dann müssen Sie zu Keychain gehen, um das Zertifikat als Datei herunterzuladen. .p12 Um dies zu tun, müssen Sie zu Keychain gehen, auf die Anmelde-

Keychain umschalten und dann die Registerkarte Zertifikate Zertifikate Dann können Sie das Zertifikat auswählen, das Sie herunterladen möchten. (Suchen Sie nach dem Datum des Zertifikats).

Und dann auf das Zertifikat rechtsklicken und "Exportieren" wählen.

Wählen Sie die Dateiformat

Persönliche Informationen austauschen (.p12) Um das Zertifikat herunterzuladen, müssen Sie zu Keychain gehen, um es als Datei herunterzuladen..

Um das Zertifikat herunterzuladen, müssen Sie zu Keychain gehen, um es als Datei herunterzuladen. Um das Zertifikat herunterzuladen, müssen Sie zu Keychain gehen, um es als Datei herunterzuladen..

Das wird das Zertifikat als .p12 Datei herunterladen.

Provisionierungsprofile

Öffnen Apple Developer und das richtige Team auswählen.

Dann erstellen Sie ein neues Profil, indem Sie auf +

Ein neues Profil erstellen

Und wählen Sie App Store Connect.

Wählen Sie App Store Connect

Dann müssen Sie das richtige App auswählen, seien Sie vorsichtig, Sie können keine Wildcard verwenden, sonst wird das Signieren fehlschlagen.

Wählen Sie die richtige App

Wählen Sie die richtige Zertifizung, die Sie vorher erstellt haben (suchen Sie nach dem Datum der Ablaufzeit, es sollte der gleiche Tag und Monat wie heute sein) und klicken Sie auf Fortsetzen.

Wählen Sie die richtige Zertifizung

Abschließen Sie das Profil schließlich mit dem Namen und klicken Sie 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.

Herunterladen Sie das Profil

Die Hinzufügung der Code-Signierungszertifizung

Laden Sie code-Zertifikate als PKCS#12-Archive hoch, die sowohl das Zertifikat als auch die private Schlüssel enthalten, die zum Einsatz des Zertifikats erforderlich sind. Bei der Hochladung wird Codemagic Sie um die Zertifikatszahlen (wenn das Zertifikat mit einem Passwort geschützt ist) sowie um eine eindeutige Referenzname, um den spezifischen Datei in der codemagic.yaml Konfiguration abzurufen.

  • Hochladen von Zertifikaten
  • Neues Zertifikat generieren
  • Von Developer Portal abrufen
  1. Öffnen Sie Ihre Codemagic-Team-Einstellungen, gehen Sie zu Codemagic-YAML-Einstellungen &gt; Code-Zertifikatsidentitäten.
  2. Öffnen iOS-Zertifikate Tab.
  3. Laden Sie das Zertifikatsdatei durch Klicken auf Wählen Sie eine .p12- oder .pem-Datei oder indem Sie sie in das angegebene Feld ziehen.
  4. Geben Sie den Zertifikatspasswort und wählen Sie ein Referenzname.
  5. Klicken Sie auf Zertifikat hinzufügen

Hinzufügen des Provisioning-Profils

Mit Codemagic kannst du ein Bereitstellungsprofil hochladen, das für die Anwendung verwendet werden soll, oder ein Profil vom Apple Developer Portal abrufen.

Für jedes Profil, das in den Code Signierungsidentitäten hinzugefügt wird, werden der Profiltyp, das Team, der Bundle-Id und die Ablaufzeit angezeigt. Darüber hinaus wird Codemagic dir mitteilen, ob ein passendes code Signierungszeugnis in den Code Signierungsidentitäten (ein grünes Häkchen im Zertifikats Feld) oder nicht verfügbar ist.

3. Konfiguration von Codemagic

Konfiguration von Codemagic-Secrets

Findest du dich manchmal fragen, woher die Werte der ENV kommen? Nun, es ist kein Geheimnis mehr – sie stammen aus deinem Projekts-Secret. 🤦

4. Konfiguration des Codemagic-Workflow-Files

Erstelle eine Datei mit dem Namen codemagic.yml in der Wurzel deines Projekts und füge die folgenden Zeilen hinzu.

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

Diese Aktion sollte manuell oder nach jedem GitHub ausgelöst werden. TagWenn Sie die Automatisierung von Tags benötigen, verweisen Sie bitte auf Automatischer Build und Release mit GitHub Aktionen Zuerst.

Dann wird diese Workflow Ihre NodeJS-Abhängigkeiten pullen, sie installieren und Ihr JavaScript-Anwendungsprogramm bauen.

Jedes Mal, wenn Sie einen neuen Tag senden, 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 haben, aber die Capacitor-JS-Plugin wird bevorzugt.

5. Workflow auslösen

Workflow auslösen

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

Mit dem Commit begonnen

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

Testflight-Dashboard

Manuell starten

Sie können den Workflow manuell starten.

Wählen Sie zunächst das zu bauende App, dann klicken Sie auf Neues Build starten.

App auswählen

Wählen Sie dann die zu bauende Branch.

Branch auswählen

Und klicken Sie dann auf Neues Build starten.

Dann gehen Sie zur Baualiste

Baualiste

Und klicken Sie auf den Build, um das Ergebnis zu sehen.

Build-Ergebnis

Kann von lokalem Rechner aus deployen

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

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

Vielen Dank

Dieser Blog basiert auf den folgenden Artikeln:

Bleiben Sie bei der automatischen Capacitor IOS-Build mit Codemagic weitermachen

Wenn Sie " Bleiben Sie bei der automatischen Capacitor IOS-Build mit Codemagic weitermachen um die CI/CD-Automatisierung zu planen, verbinden Sie sie 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 Aktionen Integration GitHub Zur Implementierungsdetail in Aktionen Integration GitHub.

Live-Updates für Capacitor-Apps

Wenn ein Web-Schicht-Bug live ist, liefern Sie die Reparatur über Capgo anstatt Tage auf die App-Store-Zulassung zu warten. Die Benutzer erhalten die Aktualisierung im Hintergrund, während native Änderungen im normalen Review-Verfahren bleiben.

Los geht's jetzt

Neuestes aus unserem Blog

Capgo gibt Ihnen die besten Einblicke, die Sie benötigen, um eine wirklich professionelle mobile App zu erstellen.