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

Artikelcredits

Martin Donadieu

Autor

Valeria

Rezensent

Jordan

Redakteur

Automatischer Capacitor IOS-Build mit Codemagic

Continuierliche Lieferung für iOS mit Codemagic

Voraussetzungen

Bevor Sie mit dem Tutorial fortfahren…

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

Wichtige Informationen zum Preis

Preis Codemagic Action

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, wie Sie im Screenshot sehen können, sind die Preise und Grenzen (Preise Stand der Erstellung dieses Tutorials, sie könnten sich in Zukunft ändern)

🔴 Warnen wir Sie nun über Anforderungen und Preise, wenn Sie möchten, gehen wir weiter…

📣 In diesem Artikel gehen wir davon aus, dass die App bereits in iTunes Connect erstellt wurde, wir haben die Zertifikate des Apple-Ökosystems und alles wird von Codemagic konfiguriert!

Los geht's!

Schritte, die in diesem Artikel 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. Kopieren von Fastlane-Dateien
  6. Konfiguration von Codemagic

1. App Store Connect API mit Codemagic verwenden

Ab Februar 2021 ist für alle Benutzer eine zweifaktorale Authentifizierung oder eine zweistufige Bestätigung erforderlich, um sich bei App Store Connect anzumelden. Diese zusätzliche Sicherheitsschicht für Ihren Apple-ID 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 mit Codemagic verwenden zu können, benötigt Codemagic drei Dinge.

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

Ein App Store Connect API-Sicherheitszertifikat erstellen

Um Sicherheitszertifikate zu generieren, müssen Sie in App Store Connect Administratorrechte haben. Wenn Sie diese Berechtigung nicht haben, können Sie den relevanten Personen diesen Artikel zukommen lassen und die folgenden Anweisungen befolgen.

1 — Melden Sie sich bei App Store Connect.

2 — Wählen Sie Benutzer und Zugriffsrechte.

Zugriff auf App Store Connect-Benutzer

3 — Wählen Sie die API-Sicherheitszertifikate-Taste.

App Store Connect API-Sicherheitszertifikate

4 — Click Generate API Key or the Add (+) button.

App Store Connect API-Sicherheitszertifikate erstellen

5 — Geben Sie einen Namen für das Zertifikat ein und wählen Sie ein Zugriffsebene aus. Wir empfehlen, die Ebene App Manager Zugriffsrechte, mehr über die Rolle und Berechtigungen des Apple Developer Programms lesen hier

App Store Connect API-Schlüssel erstellen, Name

6 — Klicken Sie auf Generieren.

Eine API-Schlüssel-Zugriffsrechte können nicht auf bestimmte Apps beschränkt werden.

Die neuen Schlüsselname, Schlüssel-ID, ein Download-Link und weitere Informationen erscheinen auf der Seite.

App Store Connect __CAPGO_KEEP_0__-Schlüssel herunterladen

Alle drei notwendigen Informationen finden Sie hier: <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 keine 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-Code einbeziehen.

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 die code-Signierungsidentitäten Wählen Sie die 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 name. Dies ist ein menschenlesbarer Name für den Schlüssel, der später in den Anwendungs-Einstellungen verwendet wird.

  4. Enter die 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, die zuvor heruntergeladen wurden, hochzuladen.

  6. Klicken Sie Speichern.

Jetzt können wir Codemagic mit der 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 Einstellungen für Zertifikate > + Wählen Sie und wählen Sie Apple Distribution.

Apple Distribution

Erstellen Sie dann ein neues Zertifikat.

Sie müssen dann zum Schlüsselkasten gehen, um das Zertifikat als Datei herunterzuladen. .p12 Um dies zu tun, müssen Sie zum Schlüsselkasten gehen, auf die Anmeldekette wechseln und dann auf die Registerkarte

Anmelden Anmelden Meine Zertifikate Meine Zertifikate.

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

Wählen Sie und wählen Sie

Dann klicken Sie mit der rechten Maustaste auf das Zertifikat und wählen Sie __CAPGO_KEEP_0__.

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

Das Zertifikat wird als Datei heruntergeladen. .p12 Zertifizierungsprofile

__CAPGO_KEEP_0__

Entwickler von Apple und wählen Sie das richtige Team. Erstellen Sie dann ein neues Profil, indem Sie auf

__CAPGO_KEEP_0__ +

Erstellen Sie ein neues Profil

Wählen Sie dann App Store Connect.

Wählen Sie App Store Connect

Wählen Sie das richtige App, beachten Sie, dass Sie keine Wildcard verwenden können, sonst wird die Signierung fehlschlagen.

Wählen Sie das richtige App

Wählen Sie das 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 schließlich den Namen des Profils und klicken Sie auf Erstellen Sie das Profil.

Der Name wird zum Identifizieren des Profils in Codemagic verwendet.

Erstellen Sie das Profil

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

Das Profil herunterladen

Hinzufügen der Code Signierungszertifikat

Codemagic ermöglicht es Ihnen, code Signierungszertifikate als PKCS#12-Archive hochzuladen, 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 Zertifikatszahlen (wenn das Zertifikat mit einem Passwort geschützt ist) sowie eine eindeutige Referenzname, die dann in der codemagic.yaml Konfiguration verwendet werden kann, um das spezifische Datei abzurufen.

  • 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. Hängen Sie das Zertifikat hoch, indem Sie auf Wählen Sie ein .p12- oder .pem-File oder indem Sie es in die angegebene Fensterfläche ziehen.
  4. Eingeben Sie das Zertifikatspasswort und wählen Sie ein Referenzname.
  5. Klicken Hinzufügen Sie ein Zertifikat

Hinzufügen Sie das Provisioning-Profile

Codemagic ermöglicht es Ihnen, ein Provisioning-Profile 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 entsprechendes code Signierzertifikat in den Code Signieridentitäten (ein grünes Häkchen im) Zertifikat 3. Codemagic einrichten

Konfigurieren Sie Codemagic-Secrets

Kennen Sie sich nicht aus, wo die Werte der

herkunfts? Nun, es ist kein Geheimnis mehr – es kommt aus Ihrem Projekts-Secret. ENV Klicken Sie auf den Button, um die Provisioning-Profile hinzuzufügen.

4. Konfiguriere das Codemagic-Workflow-Datei

Erstelle eine Datei mit dem Namen codemagic.yml am Wurzelverzeichnis deines Projekts und füge 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 du die Automatisierung von Tags benötigst, siehe Automatische Build- und Release-Prozesse mit GitHub-Aktionen zuerst.

Dann wird dieses Workflow deine NodeJS-Abhängigkeiten herunterladen, sie installieren und deine JavaScript-Anwendung bauen.

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

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

5. Workflow auslösen

Trigger die Workflow

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

um die Workflow auszulösen

Pushen Sie die neuen Commits auf die Zweig

oder

Starten Sie die Workflow manuell

Sie können die Workflow manuell starten.

Wählen Sie zunächst die App, die Sie bauen möchten, dann klicken Sie auf Starten Sie einen neuen Build.

Wählen Sie die App

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

Wenn Sie einen Zweig auswählen möchten.

Und klicken Sie auf Neue Build starten.

Wählen Sie dann die Liste der Builds.

Build Liste

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

Build Ergebnis

Kann von lokalen Maschine bereitgestellt werden.

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

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

Dank

Dieser Blog basiert auf den folgenden Artikeln:

Keep going from Automatic Capacitor IOS build with Codemagic

Wenn Sie Automatic IOS-Build mit Codemagic verwenden Automatic Capacitor IOS build with Codemagic Capacitor CI/CD Capgo CI/CD for the product workflow in Capgo CI/CD, Capgo Native Builds for the product workflow in Capgo Native Builds, Capgo-Integrations zur Produktionsablauf in Capgo-Integrations CI/CD-Integration zur Implementierungsdetail in CI/CD-Integration, und GitHub-Aktionen-Integration zur Implementierungsdetail in GitHub-Aktionen-Integration.

Live-Updates für Capacitor-Apps

When a web-layer bug is live, ship the fix through Capgo instead of waiting days for app store approval. Users get the update in the background while native changes stay in the normal review path.

Unterstützung von Martin

Loslegen

Neueste aus unserem Blog

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