Zum Hauptinhalt springen
CI/CD

Automatischer 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

Martin Donadieu

Martin Donadieu

Inhaltsmarketer

Automatischer Capacitor IOS-Build mit Codemagic

Kontinuierliche Lieferung für iOS mit Codemagic

Voraussetzungen

Bevor Sie mit der Anleitung fortfahren…

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

Wichtig zum Preis

Preis Codemagic-Aktion

https://codemagic.io/pricing/

Der Service ist ‘frei’ bis zu 500 Minuten macOS M1/Monat, je nach gewählter 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 auf die Anforderungen und Preise hingewiesen haben, wenn Sie möchten, können wir fortfahren…

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

Los geht's 🤿

Schritte, die Sie im Beitrag 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. 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 zweifaktorische 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

Mit der Arbeit an match beginnen zu können, 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 3 Dinge.

  1. Zertifikats-ID.
  2. Zertifikats-ID.
  3. Zertifikatsdatei oder Zertifikatsinhalt.

Erstellung einer App Store Connect API-Zertifikatsdatei

Um Zertifikate 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 Benutzer und Zugriff.

Zugriff auf App Store Connect

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 einen Namen für den Schlüssel ein und wählen Sie ein Zugriffsebene. Wir empfehlen, App Manager Zugriffsrechte, erfahren Sie mehr über die Rollenberechtigungen des Apple-Entwicklerprogramms 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.

App Store Connect-Download-Schlüssel

Hier finden Sie alle drei notwendigen Informationen: <1> Issue-ID.
<2> Schlüssel-ID.
<3> Klicken Sie auf "Download API-Schlüssel" um Ihren API privaten Schlüssel herunterzuladen. 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 einbetten.

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 Select code Signieridentitäten Und laden Sie das Zertifikat hoch Hochladen Sie das Zertifikat

  2. Klicken Sie auf den Hinzufügen Schlüssel

  3. Schlüssel App Store Connect API key nameKlicken Sie auf

  4. Schlüssel Issuer ID Schlüssel Key ID und Werte

  5. Klicken Sie auf Wählen Sie ein .p8-File oder ziehen Sie das Datei hoch, um das App Store Connect API-Schlüssel, das früher heruntergeladen wurde, 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 Provisionierungsprofile

Zertifikate

Öffnen Sie XCode und gehen Sie zu Einstellungen > Rechnungen > 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

Anschließend können Sie ein neues Zertifikat erstellen.

Dann müssen Sie zu Keychain gehen, um das Zertifikat als .p12 Datei herunterzuladen.

Dazu müssen Sie zu Keychain wechseln, auf den Anmeldebereich Anmeldebereich Dann können Sie das gewünschte Zertifikat auswählen. (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).

Zertifikat Zertifikat.

Das wird das Zertifikat als ein .p12 Datei herunterladen.

Provisioning Profile

Ö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 Zertifikat, das 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 das richtige Zertifikat

Abschließen Sie das Zertifikat Abschließen Sie das Profil.

Geben Sie endlich den Namen des Profils ein und klicken Sie auf

Erstellen Sie das Profil

Der Name wird verwendet, um das Profil in Codemagic zu identifizieren. .mobileprovision Erstellen Sie das Profil

Sie können das Profil als Datei herunterladen.

Adding the Code signing certificate

Mit Codemagic kannst du code-Zertifikate als PKCS#12-Archive hochladen, die sowohl das Zertifikat als auch die private Schlüssel enthalten, die zum Einsatz des Zertifikats erforderlich sind. Wenn du hochlädst, wird Codemagic dich auffordern, das Zertifikatspasswort (wenn das Zertifikat mit einem Passwort geschützt ist) sowie eine eindeutige Referenzname, der dann in der codemagic.yaml Konfiguration verwendet werden kann, um die spezifische Datei abzurufen.

  • Hochladen von Zertifikat
  • Neues Zertifikat generieren
  • Von Developer-Portal abrufen
  1. Öffne deine Codemagic-Team-Einstellungen, gehe zu codemagic.yaml-Einstellungen > Code-Zertifikatsidentitäten.
  2. Öffne iOS-Zertifikate Registerkarte.
  3. Laden Sie das Zertifikatsdatei, indem Sie auf Wählen Sie eine .p12- oder .pem-Datei oder indem Sie sie in das angegebene Feld ziehen.
  4. Eingeben Sie das Zertifikatspasswort und wählen Sie einen Referenznamen.
  5. Klicken Sie Zertifikat hinzufügen

Hinzufügen des Provisionierungsprofils

Codemagic ermöglicht Ihnen, ein Verteilungsprofil hochzuladen, das für die Anwendung verwendet werden soll, 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 entsprechendes code Signierzertifikat in den Code Signieridentitäten (ein grünes Häkchen im Feld) oder nicht verfügbar ist. Zertifikat 3. Codemagic einrichten

Codemagic-Secrets konfigurieren

Haben Sie sich jemals gefragt, wo die Werte der

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

Erstellen Sie eine Datei mit dem Namen

im Wurzelverzeichnis Ihres Projekts und fügen Sie folgendes 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 Tag, wenn Sie die Automatisierung von Tags benötigen, beziehen Sie sich auf Automatische Build- und Release-Prozesse mit GitHub-Aktionen erstens.

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

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

Die App benötigt nicht unbedingt Ionic, nur die Capacitor-Basis ist erforderlich, sie kann alte Cordova-Module enthalten, 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 oder auslösen Sie den Workflow

Mit Commit gestartet

Nach wenigen Minuten sollte der 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, die Sie bauen möchten, dann klicken Sie auf Neuen Build starten.

App auswählen

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

Zweig auswählen

Und klicken Sie auf Neuen Build starten.

Dann gehen Sie zur Baualleliste

Baualleliste

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

Buildergebnis

Sie können von Ihrem lokalen Computer bereitstellen

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

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

Danke

Dieser Blog basiert auf den folgenden Artikeln:

Fortsetzung von Automatic Capacitor IOS Build mit Codemagic

Wenn Sie Automatic __CAPGO_KEEP_0__ IOS Build mit Codemagic verwenden Automatic Capacitor IOS Build mit Codemagic um die CI/CD-Automatisierung zu planen, verbinden Sie es mit Capgo CI/CD Capgo CI/CD für das Produktworkflow Capgo Native Builds Capgo Native Builds für das Produktworkflow Capgo Integrations for the product workflow in Capgo Integrations, CI/CD-Integration zur Implementierungsdetail in CI/CD-Integration GitHub Aktionen-Integration zur Implementierungsdetail in GitHub Aktionen-Integration.

Live-Updates für Capacitor-Anwendungen

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

Menschliche Unterstützung von Martin

Loslegen

Neueste Nachrichten aus unserem Blog

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