Zum Hauptinhalt springen
CI/CD

Automatische Capacitor IOS-Build mit Codemagic

Wie man in 5 Minuten (2024) eine CI/CD-Pipeline für seine IOS-Ionic-App mit Codemagic und Codemagic einrichtet

Martin Donadieu

Martin Donadieu

Content Marketer

Automatische Capacitor IOS-Build mit Codemagic

Stromloses Lieferant für iOS mit Codemagic

Voraussetzungen

Bevor Sie mit der Anleitung fortfahren…

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

Wichtig über den Preis

Preis Codemagic Action

https://codemagic.io/pricing/

Die Dienstleistung ist ‘kostenlos’ bis zu 500 Minuten macOS M1 pro Monat, abhängig von der gewählten Maschine.
Wir werden eine macOS M1 Maschine verwenden, Sie können im Screenshot ihren Preis und Grenzen sehen (Preise zum Zeitpunkt der Erstellung des Tutorials, sie könnten sich in Zukunft ändern).

🔴 Nachdem wir über Anforderungen und Preise gewarnt haben, wenn Sie möchten, gehen wir weiter…

📣 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 konfiguriert!

Lassen Sie uns loslegen!

Schritte, die im Artikel folgen

  1. Verwendung von App Store Connect API mit Codemagic
  2. Anforderungen
  3. Ein App Store Connect API-Schlüssel erstellen
  4. Mit einem App Store Connect API-Schlüssel arbeiten
  5. Fastlane-Dateien kopieren
  6. Codemagic konfigurieren

1. App Store Connect API mit Codemagic verwenden

Ab Februar 2021 ist für alle Benutzer eine zweifaktorische Authentifizierung oder eine zweistufige Überprüfung erforderlich, um sich bei App Store Connect anzumelden. Diese zusätzliche Sicherheitsschicht für Ihren Apple-ID 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 den neuen direkt.

Erfordernisse

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

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

Erstellung eines App Store Connect API-Schlüssels

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 — Anmeldung bei App Store Connect.

2 — Auswahl von Benutzer und Zugriff.

Zugriff auf App Store Connect

3 — Auswahl des API-Schlüssel-Tabs.

App Store Connect API Schlüssel

4 — Klicken Sie auf Generate API Key oder auf die Add (+)-Schaltfläche.

App Store Connect API Schlüssel erstellen

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

App Store Connect API Schlüssel erstellen: Name

6 — Klicken Sie auf Generate.

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

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

App Store Connect Schlüssel herunterladen

Greifen Sie hier auf alle drei notwendigen Informationen zu: <1> Issue-ID.
&lt;2&gt; Schlüssel-ID.
&lt;3&gt; Klicken Sie auf &quot;Download API Key&quot; um Ihr API privates Schlüssel herunterzuladen. Der Download-Link erscheint nur, wenn das private Schlüssel noch nicht heruntergeladen wurde. Apple hält keine Kopie des privaten Schlüssels. Daher können Sie es nur einmal herunterladen.

🔴 Speichern Sie Ihr privates 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-Seitigen code einbetten.

Die Hinzufügung des App Store Connect API Schlüssels zu 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 Signierungsidentitäten Und laden Sie das Zertifikat hoch Hochladen Sie das Zertifikat

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

  3. Geben Sie den App Store Connect API key name. Dies ist eine menschenlesbare Bezeichnung für die Taste, die später in der Anwendungseinstellung verwendet wird.

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

  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-Profiles

Zertifikate

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

Code Signieridentitä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 zu Keychain gehen, um das Zertifikat als Datei herunterzuladen. .p12 Dazu müssen Sie zu Keychain gehen und auf das Menü "Zertifikate" klicken, dann auf "Zertifikate im Login-Kontext".

To do so, you need to go to keychain switch to the login Schlüsselkette und dann 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)

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

Das wird das Zertifikat als .p12 Datei herunterladen.

Zertifizierungsprofile

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

Dann erstellen Sie ein neues Profil, indem Sie auf +

Erstellen Sie ein neues Profil

Und wählen Sie App Store Connect.

Wählen Sie App Store Connect

Dann müssen Sie das richtige App auswählen, beachten Sie, dass Sie keine Wildcard verwenden sollten, sonst wird die Signierung fehlschlagen.

Wählen Sie die richtige App

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

Wählen Sie das richtige Zertifikat

Geben Sie schließlich den Namen des Profils ein und klicken Sie auf Erstellen.

Der Name wird zum Identifizieren des Profils in Codemagic verwendet.

Erstellen Sie das Profil

Sie können das Profil als .mobileprovision Datei

herunterladen.

Adding the Code signing certificate

Hinzufügen des code-Signierungszertifikats Codemagic ermöglicht das Hochladen von __CAPGO_KEEP_0__-Signierungszertifikaten als PKCS#12-Archive, 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 eindeutigeReferenzname codemagic.yaml , die dann in der

  • Zertifikat hochladen
  • Neues Zertifikat generieren
  • Von Developer Portal abrufen
  1. Öffnen Sie Ihre Codemagic-Team-Einstellungen, gehen Sie zu codemagic.yaml-Einstellungen > Code Signierungsidentitäten.
  2. Öffnen iOS-Zertifikate Registerkarte.
  3. Hochladen Sie das Zertifikatsdatei, indem Sie auf Wählen Sie eine .p12- oder .pem-Datei oder indem Sie es in die angegebene Rahmeneinlegen.
  4. Geben Sie den Zertifikatspasswort und wählen Sie ein Referenzname.
  5. Klicken Sie Zertifikat hinzufügen

Hinzufügen des Provisionierungsprofils

Codemagic ermöglicht Ihnen, ein Provisionierungsprofil hochzuladen, das für die Anwendung verwendet werden kann, oder ein Profil vom Apple Developer Portal abzurufen.

Der Profiltyp, Team, Bundle-ID und die Ablaufzeit werden für jedes hinzugefügte Profil in den Code Signieridentitäten angezeigt. Darüber hinaus wird Codemagic Ihnen mitteilen, ob ein passendes code Signierzertifikat in den Code Signieridentitäten (ein grüner Haken im Zertifikats Feld) oder nicht verfügbar ist.

3. Setup Codemagic

Codemagic-Secrets konfigurieren

Haben Sie sich je gefragt, wo die Werte von ENV herkommen? Nun, es ist kein Geheimnis mehr – sie kommen aus Ihrem Projekts-Secret.

4. Codemagic-Workflow-Datei konfigurieren

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

This workflow should be triggered manually or after each GitHub Tag ausgelöst werden, wenn Sie die Automatisierung von Tags benötigen, zitieren Sie bitte Automatic build and release with GitHub actions Actions

Dann wird diese Workflow deine NodeJS-Abhängigkeiten ziehen, sie installieren und dein JavaScript-Anwendungsprogramm bauen.

Jedes Mal, wenn du eine neue Tag sendest, wird in TestFlight eine Veröffentlichung erstellt.

Deine App muss nicht Ionic verwenden, nur die Capacitor-Basis ist erforderlich, sie kann alte Cordova-Module haben, aber das Capacitor-JS-Plugin wird bevorzugt.

5. Workflow auslösen

Workflow auslösen

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

Mit Commit gestartet

Nach einigen Minuten sollte die Veröffentlichung in deinem App Store Connect-Dashboard verfügbar sein.

Testflight-Dashboard

Manuell starten

Sie können den Workflow manuell starten.

Zuerst wählen Sie die App, die Sie bauen möchten, dann klicken Sie auf Starte neue Build.

App auswählen

Dann wählen Sie den Branch, den Sie bauen möchten.

Branch auswählen

Und klicken Sie auf Starte neue Build.

Dann gehen Sie zur Build Liste

Build Liste

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

Build Ergebnis

Kann von lokalem Rechner bereitgestellt werden

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

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

Vielen Dank

Dieser Blog basiert auf den folgenden Artikeln:

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

Wenn Sie CI/CD-Automatisierung planen und sie mit Automatische Capacitor-IOS-Build mit Codemagic verbinden, um 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, versenden Sie die Reparatur über Capgo anstatt Tage für die Genehmigung des App-Store zu warten. Die Benutzer erhalten die Aktualisierung im Hintergrund, während native Änderungen im normalen Review-Verfahren bleiben.

Los geht's jetzt

Neueste aus unserem Blog

Capgo bietet Ihnen die besten Einblicke, die Sie benötigen, um ein wirklich professionelles mobiles App zu erstellen.