Zum Hauptinhalt springen
CI/CD

Automatische 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

Automatische Capacitor IOS-Build mit Codemagic

Kontinuierliche Lieferung für iOS mit Codemagic

Voraussetzungen

Bevor Sie mit der Anleitung fortfahren…

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

Wichtig zum Preis

Preis Codemagic Action

https://codemagic.io/pricing/

Der Service ist ‘kostenlos’ bis zu 500 Minuten macOS M1 pro Monat, je nach gewählter Maschine.
Wir werden eine macOS M1 Sie können auf dem Bildschirm sehen, den Preis und die Grenzen (Preise Stand der Erstellung dieses Tutorials, sie könnten sich in Zukunft ändern)

🔴 Warnen wir Sie einmal vor Anforderungen und Preisen, wenn Sie möchten, gehen wir weiter…

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

Los geht's!

Schritte, die Sie im Artikel 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. Fastlane-Dateien kopieren
  6. Codemagic konfigurieren

1. App Store Connect API verwenden 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 Sicherheitsschicht für Ihren Apple-Konto hilft sicherzustellen, dass Sie der einzige sind, der Zugriff auf Ihr Konto hat.
Von Apple Support

Mit match zu beginnen erfordert, dass Sie Ihre bestehenden Zertifikate widerrufen. Keine Sorge, Sie erhalten das neue direkt.

Anforderungen

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

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

Ein App Store Connect API-Schlüssel erstellen

Um Schlüssel zu generieren, müssen Sie in App Store Connect die Administratorrechte haben. 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üssel-Taste.

App Store Connect API-Schlüssel

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

App Store Connect API-Schlüssel erstellen

5 — Geben Sie einen Namen für den Schlüssel ein und wählen Sie ein Zugriffsebene aus. Wir empfehlen, die Standardzugriffsebene auszuwählen App Manager Zugriffsrechte, mehr über die Rolle der Apple Developer Program erfahren hier

App Store Connect API-Schlüssel erstellen, Name

6 — Klicken Sie auf Generieren.

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

Der neue Schlüsselname, Schlüssel-ID, ein Download-Link und weitere Informationen erscheinen auf der Seite.

App Store Connect-Download-Schlüssel

Hol dir alle drei notwendigen Informationen hier: 1. Issue-ID.
2. Schlüssel-ID.
3. Klicken Sie auf "Download API-Schlüssel" zum Herunterladen deines API-privaten Schlüssels. Der Download-Link erscheint nur, wenn der private Schlüssel noch nicht heruntergeladen wurde. Apple hält keine Kopie des privaten Schlüssels. Du kannst ihn also nur einmal herunterladen.

🔴 Speichere deinen privaten Schlüssel an einem sicheren Ort. Du solltest deine Schlüssel niemals teilen, Schlüssel in einem code-Repository speichern oder Schlüssel in deinem Client-Side code-Code einbeziehen.

Hinzufügen des App Store Connect API-Schlüssels zu Codemagic

  1. Öffnen Sie Ihre Codemagic-Team-Einstellungen, Wählen Sie Team-Integrationen Öffnen Sie das Team Wählen Sie code-Signierungsidentitäten Wählen Sie code-Signierungsidentitäten Und laden Sie das Zertifikat hoch Hochladen Sie das Zertifikat

  2. Klicken Sie auf den Hinzufügen Schaltfläche.

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

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

  5. Klicken Sie auf Wählen Sie ein .p8-Datei oder ziehen Sie die Datei, um die App Store Connect API-Schlüssel zu laden, die zuvor heruntergeladen wurden.

  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 Provisioning-Profile

Zertifikate

Öffnen Sie XCode und gehen Sie zu Einstellungen > Konten > 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 Dazu müssen Sie zu Keychain wechseln, auf das Login-Keychain und dann auf 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 klicken Sie mit der rechten Maustaste auf das Zertifikat und wählen Sie.

Exportieren

Wählen Sie die Dateiformat

Persönliche Informationen austauschen (.p12) __CAPGO_KEEP_0__.

__CAPGO_KEEP_1__ __CAPGO_KEEP_2__.

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.

App Store Connect auswählen

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 Zertifizierung, 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 Zertifizierung

Abschließen Sie das Profil schließlich mit dem Namen und klicken Sie auf Erstellen.

Der Name wird zum Identifizieren des Profils in Codemagic verwendet.

Das Profil erstellen

Sie können das Profil als .mobileprovision Datei

herunterladen.

Adding the Code signing certificate

Lassen Sie code Signierzertifikate als PKCS#12-Archive hochladen, 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 Zertifikats-Passphrase (wenn das Zertifikat durch eine Passphrase geschützt ist) sowie um eine eindeutige Referenzname, codemagic.yaml , die dann in der

  • Konfiguration verwendet werden kann, um die spezifische Datei abzurufen.
  • Hochladen von Zertifikaten
  • Neues Zertifikat generieren
  1. Von Developer Portal abrufen Öffnen Sie Ihre Codemagic-Team-Einstellungen, gehen Sie zu > Code signing identities.
  2. __CAPGO_KEEP_0__ Signieridentitäten Öffnen Sie das Fenster für iOS-Zertifikate tab.
  3. Das Zertifikat-Datei hochladen, indem Sie auf Wählen Sie eine .p12 oder .pem-Datei oder indem Sie sie in den angegebenen Rahmen ziehen.
  4. Eingeben Sie das Zertifikats-Passwort und wählen Sie ein Referenzname.
  5. Klicken Sie Zertifikat hinzufügen

Hinzufügen des Provisioning-Profils

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

The Profile-Typ, Team, Bundle-Id und Ablaufdatum werden für jeden Profil, das Code Signieridentitäten hinzugefügt wird, angezeigt. Darüber hinaus wird Codemagic Ihnen mitteilen, ob ein passendes code Signierzertifikat in Code Signieridentitäten (ein grünes Häkchen im Certificate Feld) oder nicht verfügbar ist.

3. Setup Codemagic

Konfigurieren Sie Codemagic-Secrets

Sie fragen sich vielleicht, wo die Werte der ENV herkommen. Nun, es ist kein Geheimnis mehr – sie kommen aus Ihrem Projekts-Secret.

4. Konfigurieren Sie das Codemagic-Workflow-File

Erstellen Sie eine Datei mit dem Namen codemagic.yml im Wurzelverzeichnis Ihres Projekts und fügen Sie 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

Dieses Workflow sollte manuell oder nach jedem GitHub tagWenn Sie die Automatisierung der Tags benötigen, wenden Sie sich bitte an Automatischer Build und Release mit GitHub Aktionen Zuerst.

Dann wird diese Workflow Ihre NodeJS-Abhängigkeiten ziehen, installieren und Ihr JavaScript-App erstellen.

Jedes Mal, wenn Sie eine neue Tag senden, wird ein Release in TestFlight erstellt.

Ihre App benötigt nicht zwingend Ionic, nur die Capacitor Basis ist erforderlich, sie kann alte Cordova-Module haben, aber 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 Commit gestartet

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 die App aus, die Sie bauen möchten, dann klicken Sie auf Neues Build starten.

App auswählen

Wählen Sie dann die Branch aus, die Sie bauen möchten.

Branch auswählen

Und klicken Sie dann auf Neues Build starten.

Dann gehen Sie zur Build-Liste

Baumusterliste

Klicken Sie auf das Baumuster, um das Ergebnis zu sehen.

Baumusterergebnis

Sie können von Ihrem lokalen Computer aus bereitstellen

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

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

Vielen Dank

Dieser Blog basiert auf den folgenden Artikeln:

Bleiben Sie bei der automatischen Capacitor-IOS-Bau mit Codemagic

Wenn Sie Automatische Capacitor IOS-Build mit Codemagic verwenden 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 Actions-Integration für die Implementierungsdetails in GitHub Actions-Integration.

Live-Updates für Capacitor-Apps

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

Los geht's

Aktuelle Beiträge aus unserem Blog

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