Automatischer Capacitor iOS Build mit Codemagic

Continuous Delivery für iOS mit Codemagic

Voraussetzungen

Bevor wir mit dem Tutorial fortfahren…

• Mitgliedschaft im iOS Developer Program.
• Lust zu lesen? 😆…

Wichtige Preisinfos

https://codemagic.io/pricing/

Der Service ist „kostenlos“ bis zu 500 macOS-M1-Minuten pro Monat, je nach gewählter Maschine.
Wir werden eine macOS M1 Maschine nutzen; im Screenshot siehst du den Preis und die Limits (Preise zum Zeitpunkt der Tutorial-Erstellung, Änderungen vorbehalten).

🔴 Nachdem Anforderungen und Preise geklärt sind, machen wir weiter, wenn du möchtest…

📣 Im Beitrag gehen wir davon aus, dass die App in iTunes Connect erstellt wurde und die Apple-Zertifikate vorliegen. Codemagic übernimmt die Einrichtung!

Tauchen wir ein 🤿

Schritte im Beitrag

1. App Store Connect API mit Codemagic nutzen
2. Anforderungen
3. App Store Connect API Key erstellen
4. Einen App Store Connect API Key verwenden
5. Fastlane-Dateien kopieren
6. Codemagic konfigurieren

1. App Store Connect API mit Codemagic nutzen

Seit Februar 2021 ist für alle Nutzer eine Zwei-Faktor-Authentifizierung oder eine Zwei-Schritt-Verifizierung erforderlich, um sich bei App Store Connect anzumelden. Diese zusätzliche Sicherheitsebene für Ihre Apple ID hilft sicherzustellen, dass nur Sie auf Ihr Konto zugreifen können.
Von Apple-Support

Um mit match zu starten, müssen Sie Ihre bestehenden Zertifikate widerrufen. Aber keine Sorge, Sie erhalten direkt neue.

Anforderungen

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

1. Issuer-ID.
2. die Key ID.
3. die Key-Datei oder den Key-Inhalt.

App Store Connect API Key erstellen

Um Keys zu generieren, benötigst du Admin-Rechte in App Store Connect. Falls du sie nicht hast, kannst du die zuständige Person auf diesen Artikel verweisen und die folgenden Anweisungen befolgen.

1 — Anmelden bei App Store Connect.

2 — Auswählen Benutzer und Zugriff.

3 — Wähle den Tab API Keys aus.

4 — Klicke auf Generate API Key oder den Add (+)-Button.

5 — Gib den Namen für den Key ein und wähle eine Zugriffsebene. Wir empfehlen App Manager Zugriffsrechte, mehr zu den Rollenberechtigungen im Apple Developer Program hier

6 — Klicke auf Generate.

Der Zugriff eines API Keys kann nicht auf bestimmte Apps beschränkt werden.

Der Name des neuen Keys, die Key-ID, ein Download-Link und weitere Infos werden auf der Seite angezeigt.

Hier findest du alle drei benötigten Informationen: <1> Issue ID.
<2> Key-ID.
<3> Klicke auf „Download API Key“, um deinen API Private Key herunterzuladen. Der Download-Link erscheint nur, wenn der Private Key noch nicht heruntergeladen wurde. Apple speichert keine Kopie des Private Keys. Du kannst ihn also nur einmal herunterladen.

🔴 Speichere deinen Private Key an einem sicheren Ort. Du solltest deine Keys niemals teilen, sie nicht in einem code-Repository speichern oder in clientseitigem code einbinden.

Den App Store Connect API Key zu Codemagic hinzufügen

1. Öffne deine Codemagic-Team-Einstellungen, Wähle code Signing Identities Und das Hochladen des Zertifikats

2. Klicke auf das Add key Button.

3. Gib die App Store Connect API key name. Dies ist ein menschenlesbarer Name für den Schlüssel, der später in den Anwendungseinstellungen verwendet wird, um sich auf den Schlüssel zu beziehen.

4. Gib die Issuer ID und Key ID Werte.

5. Klicken Sie auf Wähle eine .p8-Datei oder ziehe die zuvor heruntergeladene App Store Connect API Key-Datei hierher, um sie hochzuladen.

6. Klicken Speichern.

Jetzt können wir Codemagic mit dem App Store Connect API Key verwalten, super!

2. Zertifikate und Provisioning Profiles erstellen

Zertifikate

Öffne Xcode und gehe zu Einstellungen > Konten > Apple ID > Teams und wähle dein Team aus.

Klicken Sie auf Zertifikate verwalten > + und wählen Sie Apple Distribution.

Danach können Sie ein neues Zertifikat erstellen.

Dann musst du in die Schlüsselbundverwaltung, um das Zertifikat als .p12 Datei.

Dazu musst du in der Schlüsselbundverwaltung zum Schlüsselbund Anmeldung wechseln und dann zum Tab Meine Zertifikate.

Dann kannst du das Zertifikat auswählen, das du herunterladen möchtest. (Achte auf das Datum des Zertifikats)

Klicke dann mit der rechten Maustaste auf das Zertifikat und wähle Exportieren.

Wähle das Dateiformat Austausch persönlicher Informationen (.p12).

Damit wird das Zertifikat als .p12 Datei.

Provisioning-Profile

Öffne Apple Developer und wähle das richtige Team aus.

Erstelle dann ein neues Profil, indem du auf +

Und wähle App Store Connect.

Wähle dann die richtige App aus; achte darauf, keine Wildcards zu verwenden, da sonst das Signing fehlschlägt.

Wähle das zuvor erstellte, passende Zertifikat aus (achte auf das Ablaufdatum; es sollte den gleichen Tag und Monat wie heute haben) und klicke auf Weiter.

Gib abschließend den Namen des Profils ein und klicke auf Generieren.

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

Sie können das Profil als .mobileprovision Datei.

Code Signing-Zertifikat hinzufügen

Mit Codemagic kannst du code Signing-Zertifikate als PKCS#12-Archive hochladen, die sowohl das Zertifikat als auch den benötigten privaten Schlüssel enthalten. Beim Upload fragt Codemagic nach dem Zertifikatspasswort (falls es passwortgeschützt ist) sowie einem eindeutigen Referenzname, die anschließend in der codemagic.yaml Konfiguration zum Abrufen der spezifischen Datei.

• Zertifikat hochladen
• Neues Zertifikat erstellen
• Vom Developer Portal abrufen

1. Öffne deine Codemagic-Team-Einstellungen und gehe zu codemagic.yaml-Einstellungen > Code Signing-Identitäten.
2. Öffne iOS-Zertifikate .
3. Klicke zum Hochladen der Zertifikatsdatei auf Wähle eine .p12- oder .pem-Datei oder ziehe sie in den markierten Bereich.
4. Gib die Zertifikatspasswort und wähle eine Referenzname.
5. Klicken Zertifikat hinzufügen

Das Provisioning Profile hinzufügen

Mit Codemagic kannst du ein Provisioning Profile für die App hochladen oder ein Profil direkt aus dem Apple Developer Portal abrufen.

Typ, Team, Bundle ID und Ablaufdatum werden für jedes Profil in den Code Signing Identities angezeigt. Zudem zeigt dir Codemagic, ob ein passendes code Signing Certificate in den Code Signing Identities verfügbar ist (ein grüner Haken im Zertifikat Feld) oder nicht.

3. Codemagic einrichten

Codemagic Secrets konfigurieren

Hast du dich schon mal gefragt, woher die Werte von ENV kommen? Kein Geheimnis mehr – sie stammen aus dem Secret deines Projekts. 🤦

4. Codemagic Workflow-Datei konfigurieren

Erstelle eine Datei namens codemagic.yml im Root-Verzeichnis 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

Dieser Workflow sollte manuell oder nach jedem GitHub ausgelöst werden. Tag, falls du das Tagging automatisieren möchtest, schau bitte in Automatischer Build und Release mit GitHub Actions zuerst.

Anschließend lädt dieser Workflow deine NodeJS-Abhängigkeiten herunter, installiert sie und baut deine JavaScript-App.

Jedes Mal, wenn du einen neuen Tag pushst, wird ein Release in TestFlight gebaut.

Deine App muss Ionic nicht verwenden, nur die Capacitor-Basis ist Pflicht; sie kann alte Cordova-Module enthalten, aber Capacitor JS-Plugins sollten bevorzugt werden.

5. Workflow triggern

Workflow auslösen

Neue Commits in den Branch pushen main oder development um den Workflow auszulösen.

Nach wenigen Minuten sollte der Build in deinem App Store Connect Dashboard verfügbar sein.

Manuell starten

Du kannst den Workflow manuell starten.

Wähle zuerst die App aus, die du bauen möchtest, und klicke dann auf Neuen Build starten.

Wähle dann den Branch aus, den du bauen möchtest.

Und klicken auf Neuen Build starten.

Gehe dann zur Build-Liste

Klicke auf den Build, um das Ergebnis zu sehen.

Deployment vom lokalen Rechner möglich?

Ja, das geht und ist absolut mühelos.

Du kannst wie gewohnt Xcode zum Builden und Signieren deiner App nutzen.

Danke

Dieser Blogpost basiert auf folgenden Artikeln:

• Continuous Delivery für iOS mit Codemagic und GitHub Actions
• Codemagic-Dokumentation
• Diese GitHub Nachricht von @mrogunlana

Weiter mit: Automatischer Capacitor iOS Build mit Codemagic

Wenn du es nutzt Automatischer Capacitor iOS Build mit Codemagic um CI/CD-Automatisierung zu planen, verbinde es mit Capgo CI/CD für den Produkt-Workflow in Capgo CI/CD, Capgo Native Builds optimieren für den Produkt-Workflow in Capgo Native Builds, Capgo Integrationen für den Produkt-Workflow in Capgo Integrations, CI/CD-Integration für die Implementierungsdetails in der CI/CD-Integration und GitHub Actions-Integration für die Implementierungsdetails in der GitHub Actions-Integration.