Zum Hauptinhalt springen
CI/CD

Automatische Capacitor IOS-Build mit Codemagic

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

Artikelcredits

Martin Donadieu

Schreiber

Valeria

Rezensent

Jordan

Editor

Automatische Capacitor IOS-Build mit Codemagic

Fortlaufende Lieferung für iOS mit Codemagic

Voraussetzungen

Bevor Sie mit der Anleitung fortfahren…

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

Wichtige Informationen zum Preis

Preis Codemagic Action

https://codemagic.io/pricing/

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

🔴 Nachdem wir auf die Anforderungen und Preise hingewiesen haben, können wir gerne fortfahren…

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

Los geht’s!

Schritte, die in diesem Beitrag beschrieben werden

  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. Dateien von Fastlane kopieren
  6. Codemagic konfigurieren

1. Verwenden Sie ab Februar 2021 App Store Connect API mit Codemagic

Ab Februar 2021 ist für alle Benutzer eine zweifaktor-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 Person sind, die 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 verwenden zu können, benötigt Codemagic drei Dinge

  1. Aussteller-ID
  2. Sicherheits-ID.
  3. Sicherheitsdatei oder Sicherheitsinhalt.

Erstellung eines App Store Connect API-Sicherheitszertifikats

Um Sicherheitszertifikate 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 Zugriffsrechte.

Zugriff auf App Store Connect

3 — Auswahl des API-Sicherheitszertifikate-Tabs.

App Store Connect API-Sicherheitszertifikate

4 — Klicken Sie auf Erstellen von API-Sicherheitszertifikat oder auf die Schaltfläche (+) hinzufügen.

App Store Connect API Schlüssel erstellen

5 — Geben Sie dem Schlüssel einen Namen und wählen Sie ein Zugriffsebene aus. Wir empfehlen, die Zugriffsrechte zu wählen, mehr über die Rollen und Berechtigungen des Apple Developer Programms zu erfahren App Manager hier App Store Connect __CAPGO_KEEP_0__ Schlüssel erstellen: Name

App Store Connect API keys create name

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

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

App Store Connect __CAPGO_KEEP_0__-Schlüssel herunterladen

Holten Sie sich alle drei notwendigen Informationen hier:
<1> Issue-ID.

<2> Schlüssel-ID.
<3> Klicken Sie auf "__CAPGO_KEEP_0__-Schlüssel herunterladen", um Ihren __CAPGO_KEEP_1__ privaten Schlüssel herunterzuladen. Der Download-Link erscheint nur, wenn der private Schlüssel noch nicht heruntergeladen wurde. Apple hält keine Kopie des privaten Schlüssels. Sie können ihn daher nur einmal herunterladen.
<3> Click “Download API Key” to download your API private key. The download link appears only if the private key has not yet been downloaded. Apple does not keep a copy of the private key. So, you can download it only once.

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

Hinzufügen der App Store Connect API-Zertifikatsdatei zu Codemagic

  1. Öffnen Sie die Einstellungen Ihres Codemagic-Teams Wählen Sie Team-Integrationen Öffnen Sie das Team Wählen Sie die code-Signaturidentitäten Wählen Sie die code-Signaturidentitäten Und laden Sie das Zertifikat hoch Hochladen des Zertifikats

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

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

  4. Eingeben Sie das Issuer ID und Key ID Werte.

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

  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 Berechtigungsprofile

Zertifikate

Öffnen Sie XCode und gehen Sie zu Einstellungen > Accounts > 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 zum Schlüsselkasten gehen, um das Zertifikat als Datei herunterzuladen. .p12 Dazu müssen Sie zum Schlüsselkasten gehen, auf den Login-Schlüsselkasten umschalten und dann auf die Registerkarte

Anmeldeschlüsselkasten Login-Schlüsselkasten Meine Zertifikate Meine Zertifikate.

Meine Zertifikate

Wählen Sie dann das Zertifikat aus, das Sie herunterladen möchten. (Suchen Sie nach dem Datum des Zertifikats)

Und klicken Sie dann 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 +

Ein neues Profil erstellen

Und wählen Sie App Store Connect wählen.

App Store Connect wählen

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

Die richtige App auswählen

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

Die richtige Zertifizierung auswählen

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

Der Name wird zum Identifizieren des Profils in Codemagic verwendet.

Profil generieren

Sie können das Profil als .mobileprovision Datei herunterladen.

Profil herunterladen

Hinzufügen des Code Signierzertifikats

Bei Codemagic können 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. Wenn Sie hochladen, wird Codemagic Sie um die Zertifikats-Passphrase (wenn das Zertifikat mit einer Passphrase geschützt ist) sowie um eine eindeutige Referenzname, der dann in der codemagic.yaml Konfiguration verwendet werden kann, um das spezifische Datei zu laden.

  • Zertifikat hochladen
  • Neues Zertifikat generieren
  • Von Entwickler-Portal abrufen
  1. Öffnen Sie Ihre Codemagic-Team-Einstellungen, gehen Sie zu codemagic.yaml-Einstellungen > Code Signierungsidentitäten.
  2. Öffnen iOS-Zertifikate Registerkarte.
  3. Laden Sie das Zertifikat-File, indem Sie auf Wählen Sie ein .p12 oder .pem-File oder indem Sie es in die angegebene Fensterfläche ziehen.
  4. Geben Sie die 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-Profil hochladen, das für die Anwendung verwendet werden soll, oder ein Profil vom Apple Developer Portal abrufen.

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 entsprechendes code Signierzertifikat in den Code Signieridentitäten (ein grünes Häkchen im) Zertifikat Zertifikat

3. Codemagic einrichten

Codemagic-Secrets konfigurieren

Manchmal fragt man sich, woher die Werte der ENV kommen. Nun, es ist kein Geheimnis mehr – sie stammen aus Ihrem Projektschlüssel. 🤦

4. Konfigurieren Sie das Codemagic-Workflow-File

Erstellen Sie ein File namens 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

Dieses Workflow sollte manuell oder nach jedem GitHub Tagausgelöst werden, wenn Sie die Automatisierung von Tags benötigen, zitieren Sie bitte zuerst Automatic build and release with GitHub actions erstmal.

Dann wird das Workflow Ihr NodeJS-Abhängigkeiten pullen, sie installieren und Ihr JavaScript-App bauen.

Jedes Mal, wenn Sie einen neuen Tag senden, wird eine Release in TestFlight erstellt.

Deine App benötigt nicht zwingend Ionic, nur Capacitor Basis ist erforderlich, sie kann alte Cordova-Module haben, aber Capacitor JS-Plugin sollte bevorzugt werden.

5. Workflow auslösen

Workflow auslösen

Pushen Sie die neuen Commits in die Zweig main oder development oder

Sie können den Workflow manuell starten.

Zuerst wählen Sie die App, die Sie bauen möchten, dann klicken Sie auf

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

Testflug-Dashboard

Manuell starten

Sie können den Workflow manuell starten. Neue Build starten.

App auswählen

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

Zweig auswählen

Und klicken Sie auf Neue Build starten.

Gehe dann zur Build Liste

Build Liste

Und klicken Sie auf die 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 erstellen und zu signieren, wie immer.

Vielen Dank

Dieser Blog basiert auf den folgenden Artikeln:

Bleiben Sie bei der automatischen Capacitor-Erstellung von IOS-Apps mit Codemagic

Wenn Sie __CAPGO_KEEP_0__-Erstellung von IOS-Apps mit Codemagic verwenden Automatic Capacitor IOS build with Codemagic __CAPGO_KEEP_0__-CI/CD für den Produktworkflow in Capgo-CI/CD Wenn Sie Capgo-CI/CD verwenden Capgo Native Builds für das Produktworkflow in Capgo Native Builds Capgo Integrations für das 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 Fehler im Weblayer live ist, schicken Sie die Reparatur über Capgo anstatt Tage für die Genehmigung des App-Stores zu warten. Die Benutzer erhalten die Aktualisierung im Hintergrund, während native Änderungen im normalen Review-Prozess bleiben.

Menschliche Unterstützung von Martin

Los geht's jetzt

Neueste aus unserem Blog

Capgo gibt Ihnen die besten Einblicke, die Sie benötigen, um ein wirklich professionelles Mobiltelefon-App zu erstellen.