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

Automatischer Capacitor IOS-Build mit Codemagic

Ständige Lieferung für iOS mit Codemagic

Voraussetzungen

Bevor Sie mit dem Tutorial fortfahren...

  • Mitgliedschaft im iOS-Entwicklerprogramm.
  • Wollen Sie das 😆… lesen?

Wichtig zum 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 ein macOS M1 Gerät verwenden, Sie können im Screenshot seinen Preis und Grenzen sehen (Preise Stand der Erstellung des Tutorials, sie könnten sich in Zukunft ändern).

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

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

Los geht's!

Schritte, die im Blogbeitrag zu beachten sind

  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 Sicherheitsstufe 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 loszulegen, 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 drei Zertifikats-ID.

  1. Zertifikats-Schlüssel-ID.
  2. Zertifikatsdatei oder Zertifikatsinhalt.
  3. Erstellung eines App Store Connect __CAPGO_KEEP_0__-Schlüssels

Creating an App Store Connect API Key

1 — Anmelden bei

App Store Connect App Store Connect.

2 — Auswahl Benutzer und Zugriff.

Zugriff auf App Store Connect

3 — Wählen Sie die API Schlüsseltabellen aus.

App Store Connect API Schlüssel

4 — Klicken Sie auf Erstellen von 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, App Manager Zugriffsrechte, mehr über die Rollenberechtigungen des Apple-Entwicklerprogramms zu erfahren hier

App Store Connect API Schlüssel erstellen und Namen

6 — Klicken Sie auf Erzeugen.

Eine API-Schlüsselzugriff kann nicht auf bestimmte Apps beschränkt werden.

Der Name des neuen Schlüssels, die Schlüssel-ID, ein Download-Link und weitere Informationen erscheinen auf der Seite.

Herunterladen von App Store Connect-Schlüsseln

Hier finden Sie alle drei notwendigen Informationen: 1. Issue-ID.
2. Schlüssel-ID.
3. Klicken Sie auf "Herunterladen 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 Kopie des privaten Schlüssels. Sie können ihn daher 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 Signieridentitäten Wählen Sie code Signieridentitä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, der später in den Anwendungs-Einstellungen verwendet wird.

  4. Geben Sie den 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 API-Schlüssel, die zuvor heruntergeladen wurden, hochzuladen.

  6. Klicken 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 > 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 zu Keychain gehen, um das Zertifikat als Datei herunterzuladen. .p12 Dazu müssen Sie zu Keychain gehen, die Schaltfläche umschalten

auf die Zertifikate Anmeldung Dann die Taste mit dem Schlüsselsymbol und dann die Tab-Taste 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.

Provisionierungsprofile

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

Erstellen Sie dann 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, beachten Sie, dass Sie keine Wildcard verwenden können, sonst wird die Signierung fehlschlagen.

Das richtige App auswählen

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

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.

Herunterladen Sie das Profil

Hinzufügen des Code-Signierungszertifikats

Bei Codemagic können Sie code-Signierungszertifikate 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 den Zertifikatspasswort (wenn das Zertifikat mit einem Passwort geschützt ist) sowie um eine eindeutige Referenzname, anfordern, die dann in der codemagic.yaml Konfiguration zum Abrufen der spezifischen Datei.

  • Zertifikat hochladen
  • Neues Zertifikat generieren
  • Von Developer Portal abrufen
  1. Öffnen Sie Ihre Codemagic-Team-Einstellungen, gehen Sie zu Einstellungen für codemagic.yaml > 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 Häkchen in der Zertifikats Feld) oder nicht verfügbar ist.

3. Setup Codemagic

Codemagic-Secrets konfigurieren

Haben Sie sich schon einmal gefragt, woher die Werte von ENV herkommen? Nun, es ist kein Geheimnis mehr – sie kommen aus Ihrem Projektschlüssel.

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

Diese Workflow sollte manuell oder nach jedem GitHub Tag ausgelöst werden, wenn Sie jedoch automatisierte Tags benötigen, zitieren Sie bitte Automatisches Build und Release mit __CAPGO_KEEP_0__ Aktionen Automatic build and release with GitHub actions Automatic build and release with __CAPGO_KEEP_0__ actions

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

Jedes Mal, wenn du eine neue Tag sendest, wird in TestFlight eine Release erstellt.

Deine App muss nicht unbedingt 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 Build in deinem 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 Starte neue Build.

App auswählen

Dann wählen Sie den Branch aus, 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 geht, 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:

Live-Updates für Capacitor-Apps

Wenn ein Web-Schicht-Bug live ist, schicken 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-Path bleiben.

Jetzt loslegen

Neuestes aus unserem Blog

Capgo bietet Ihnen die besten Einblicke, die Sie benötigen, um eine wirklich professionelle Mobilanwendung zu erstellen.