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

Ständige Lieferung für iOS mit Codemagic

Voraussetzungen

Bevor Sie mit der Anleitung fortfahren…

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

Wichtig über den Preis

Preis Codemagic Action

https://codemagic.io/pricing/

Der Service ist ‘kostenlos’ bis zu 500 Minuten macOS M1/Monat, abhängig von der gewählten Maschine.
Wir werden eine macOS M1 Sie können auf der Screenshot die Preise und Einschränkungen (Preise Stand der Erstellung des Tutorials, sie könnten sich in Zukunft ändern) sehen.

🔴 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!

Lassen Sie uns loslegen!

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. Übernehmen von Fastlane-Dateien
  6. Konfiguration von Codemagic

1. Mit App Store Connect API bei Codemagic verwenden

Ab Februar 2021 ist für alle Benutzer eine zweifaktorische Authentifizierung oder eine zweistufige Verifizierung 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 der Verwendung von match müssen Sie Ihre bestehenden Zertifikate widerrufen. Keine Sorge, Sie erhalten das neue direkt.

Anforderungen

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

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

Eine 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 Sie einen API-Schlüssel oder auf 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 Ebene App Manager Zugriffsrechte, mehr über die Rolleberechtigungen des Apple Developer Programms lesen 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, die Schlüssel-ID, ein Download-Link und weitere Informationen erscheinen auf der Seite.

App Store Connect-Downloads von Schlüsseln

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 Kopien des privaten Schlüssels. Sie können ihn also 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 einbinden.

Die Hinzufügung 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 Schlüssel hinzufügen Button.

  3. Geben Sie den App Store Connect API key nameDies ist ein menschenlesbarer Name für den Schlüssel, der später in den Anwendungs-Einstellungen verwendet wird.

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

  5. Klicken Sie auf Wählen Sie ein .p8-Datei aus oder ziehen Sie die Datei, um die App Store Connect __CAPGO_KEEP_0__-Schlüssel, die zuvor heruntergeladen wurden, hochzuladen. or drag the file to upload the App Store Connect API key downloaded earlier.

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

Now we can manage Codemagic with the App Store Connect API key, great!

Zertifikate

Öffnen Sie XCode und gehen Sie zu

Werte Einstellungen > Konten > Apple-ID > Teams und wählen Sie Ihr Team.

Code Signierungsidentitä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 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 rechtsklicken Sie auf das Zertifikat und wählen Sie

Exportieren

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

Um dies zu tun, müssen Sie zu Keychain gehen, auf die Anmelde- Meine Zertifikate.

Das wird das Zertifikat als Datei herunterladen. .p12 Datei.

Provisionierungsprofile

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

Erstellen Sie dann 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, 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 Weiter.

Wählen Sie die richtige Zertifizierung

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

Codemagic ermöglicht Ihnen, code-Zertifikate als PKCS#12-Archive hochzuladen, 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 Zertifikatszurücksetzung (wenn das Zertifikat verschlüsselt ist) sowie um eine eindeutige Referenzname, codemagic.yaml die dann in der

  • Konfiguration verwendet werden kann, um das spezifische Datei zu laden.
  • Zertifikat hochladen
  • Neues Zertifikat generieren
  1. Aus dem Developer Portal herunterladen Öffnen Sie Ihre Codemagic-Team-Einstellungen, gehen Sie zu > Code signing identities.
  2. __CAPGO_KEEP_0__-Signaturidentitäten Öffnen Sie Registerkarte.
  3. Laden Sie das Zertifikatsdatei, indem Sie auf Wählen Sie eine .p12- oder .pem-Datei oder ziehen Sie sie in das angegebene Feld.
  4. Eingeben Sie das Zertifikatspasswort und wählen Sie ein Referenzname.
  5. Klicken Sie Zertifikat hinzufügen

Hinzufügen des Provisioning-Profils

Mit Codemagic können Sie ein Provisioning-Profils hochladen, das für die Anwendung verwendet werden kann, 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 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ünes Häkchen im "Zertifikat"-Feld) oder nicht verfügbar ist. Zertifikat 3. Codemagic einrichten

Codemagic-Secrets einrichten

Haben Sie sich je gefragt, wo die Werte der "

herkommen? Nun, es ist kein Geheimnis mehr – sie stammen aus Ihrem Projekts-Secret. ENV 4. Codemagic-Workflow-Datei konfigurieren

Erstellen Sie eine Datei mit dem Namen

im Wurzelverzeichnis Ihres Projekts und fügen Sie die folgenden Zeilen hinzu. codemagic.yml Diese Workflow 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

This workflow should be triggered manually or after each GitHub Zertifikat, wenn Sie die Automatisierung von Tags benötigen, beziehen Sie sich auf Automatisierte Erstellung und Veröffentlichung mit GitHub Aktionen erst.

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

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 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 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, und klicken Sie dann auf Neues Build starten.

App auswählen

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

Zweig auswählen

Und klicken Sie dann auf Neues Build starten.

Gehen Sie dann zur Build-Liste

Baumliste

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

Baustellenergebnis

Kann von lokalem Computer aus 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-Baustelle mit Codemagic

Wenn Sie __CAPGO_KEEP_0__ verwenden Automatischer 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 GitHub Actions-Integration für die Implementierungsdetails in GitHub Aktionen-Integration.

Live-Updates für Capacitor-Apps

Wenn ein Fehler im Weblayer live ist, liefern Sie die Reparatur über Capgo und nicht durch Warten auf Tage für die Genehmigung des App-Stores. Die Benutzer erhalten die Aktualisierung im Hintergrund, während native Änderungen im normalen Review-Verfahren bleiben.

Los geht's

Aktuelle Beiträge aus unserem Blog

Capgo bietet Ihnen die besten Einblicke, um eine wirklich professionelle mobile App zu erstellen.