Wie man eine Ionic Capacitor App in Xcode Cloud erstellt

Voraussetzungen

Bevor Sie mit dem Tutorial fortfahren…

Stellen Sie sicher, dass Sie GitHub verwenden
Verwenden Sie Capacitor
Ihre App ist bereits auf dem Apple Store veröffentlicht
Wunsch, etwas zu lesen 😆…

Die Verwendung von Ionic ist optional, für Cordova könnte es funktionieren, aber ich habe es nicht ausprobiert.

Wichtige Informationen zum Preis

Preis Xcode Cloud

https://developer.apple.com/xcode-cloud/

Der Service ist ‘kostenlos’ bis zur Grenze.
Sie können im Screenshot den Preis und die Grenzen (Preise zum Zeitpunkt der Erstellung des Tutorials, sie könnten sich in Zukunft ändern) sehen.

🔴 Wenn Sie gewarnt sind, werden Anforderungen und Preise, wenn Sie möchten, weiter…

📣 In dem Beitrag nehmen wir an, dass wir die App im Apple Store erstellt haben.

Einleitung

Damit Xcode Ihr Capacitor-App baut, müssen Sie einige Dinge einrichten.

Paketvorbereitung

Stellen Sie sicher, dass Ihr Build-Befehl in Ihrem Skript ist. Fügen Sie dann den package.json Befehl wie unten angegeben hinzu. sync:ios Dieser Schritt macht den Post-Skript-Befehl einfach funktionieren.

{
  "scripts": {
    "build": "YOUR BUILD COMMAND",
    "sync:ios": "cap sync ios"
  }
}

Post-Klon-Skript

Post-Clone-Skript

Dieses Skript wird nach dem Klon-Schritt von Xcode Cloud ausgeführt

#!/usr/bin/env bash

set -x

export HOMEBREW_NO_INSTALL_CLEANUP=TRUE
# Install CocoaPods
echo "📦 Install CocoaPods"
brew install cocoapods
brew install node@18
brew link node@18

# Install dependencies
# XCode Cloud is literally broken for 2 months now - https://developer.apple.com/forums/thread/738136?answerId=774510022#774510022
npm config set maxsockets 3
npm ci
# or `pnpm install --frozen-lockfile` or `yarn add --frozen-lockfile` or bun install
npm run build 
# or npm run build
npm run sync:ios

Speichern Sie dieses Datei im Root Ihres Projekts und benennen Sie sie ios/App/ci_scripts/ci_post_clone.sh

Machen Sie diese Datei mit diesem Befehl ausführbar chmod +x ios/App/ci_scripts/ci_post_clone.sh

Erstellen Sie ein Xcode-Workflow

Öffnen Sie Xcode (ja, um Xcode zu entfernen, benötigen Sie Xcode)

Und gehen Sie zu dieser Registerkarte : Xcode Schritt 1

Klicken Sie auf Workflow erstellen, wählen Sie Ihre App aus, klicken Sie auf Weiter wie unten.

Xcode Schritt 2

Klicken Sie auf Workflow bearbeiten auf der linken Seite Xcode Schritt 2

Gehen Sie zur Registerkarte Umgebungen und wählen Sie wie unten Mac 12.4 und überprüfen Sie die richtige Option Xcode Schritt 3

Wählen Sie Ihre Startbedingung. Wenn Sie denselben Build wie wir verwenden, empfehlen wir Ihnen, Tag anstelle von Branch zu verwenden, um doppelte Builds zu vermeiden.

Setzen Sie Ihre Umgebungsvariable Xcode Schritt 4

Verbinden Sie Ihr GitHub-Konto Xcode Schritt 5

Xcode Schritt 6

Aktivieren Sie dann die Workflow- und committen Sie Ihre erste Änderung, Sie sollten Ihren Build in Xcode laufen sehen.

Build-Verarbeitung

In Xcode Cloud, Sie werden auf die Minuten abgerechnet, die Sie für die Ausführung Ihres CI/CD-Workflows verwendet haben. Aus Erfahrung dauert es etwa 10–15 Minuten, bevor ein Build im Apple Store verarbeitet werden kann.

Für private Projekte kann die geschätzte Kosten pro Build bis zu $0.008/min x 5 min = $0.4, oder mehr, je nach Konfiguration oder Abhängigkeiten Ihres Projekts.

Für Open-Source-Projekte sollte das kein Problem sein. Siehe preisliste.

Bleiben Sie bei Wie Sie eine Ionic Capacitor App in Xcode Cloud erstellen

Wenn Sie Wie Sie eine Ionic Capacitor App in Xcode Cloud erstellen zum Planen der CI/CD-Automatisierung verwenden, verbinden Sie es mit Capgo CI/CD für den Produktworkflow in Capgo CI/CD, 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.

Wie man eine Ionic Capacitor-App in Xcode Cloud erstellt