Wie man eine Ionic Capacitor App in Xcode Cloud erstellt

Voraussetzungen

Bevor Sie mit der Anleitung fortfahren…

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

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

Wichtig zu den Kosten

Kosten 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 in Apple Store erstellt haben.

Einleitung

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

Paketvorbereitung

Stellen Sie sicher, dass Sie Ihren Build-Befehl in Ihrem package.json Skript haben. Dann fügen Sie sync:ios den Befehl wie unten hinzufügen.

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

Dieser Schritt macht das Post-Script einfach funktionieren.

Nach dem Klonen des Skripts

This script wird von Xcode Cloud nach dem Klon-Schritt 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 File im Root Ihres Projekts und nennen Sie es ios/App/ci_scripts/ci_post_clone.sh

Dann machen Sie dieses File 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 Tab : Xcode Schritt 1

Klicken Sie auf Create Workflow, wählen Sie Ihre App, klicken Sie auf Next wie unten.

Xcode Schritt 2

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

Gehen Sie zur Umgebungsvariable 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

Erstellen 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, Sie haben für die Ausführung Ihres CI/CD-Workflows verwendet. 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.

Fahren Sie mit How to build Ionic Capacitor app in Xcode Cloud fort.

Wenn Sie How to build Ionic Capacitor app in Xcode Cloud zum Planen der CI/CD-Automatisierung verwenden, verbinden Sie es mit Capgo CI/CD für das Produktworkflow in Capgo CI/CD, Capgo Native Builds für den Produktworkflow in Capgo Native Builds, Capgo Integrations für den 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