Zum Hauptinhalt springen
Tutorials

Ionic Capacitor App mit Xcode Cloud bauen

Nutze Xcode Cloud, um deine Capacitor JS-App zu builden und den Bedarf an macOS zu umgehen.

So baust du eine Ionic Capacitor App in Xcode Cloud Capgo Blog-Illustration

Voraussetzungen

Bevor wir mit dem Tutorial fortfahren…

  • Stelle sicher, dass du GitHub verwendest
  • Verwende Capacitor
  • Deine App ist bereits im App Store veröffentlicht
  • Lust zu lesen? 😆…

Ionic ist optional; für Cordova könnte es funktionieren, aber das habe ich nicht getestet.

Wichtige Preisinfos

Xcode Cloud Preise

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

Der Service ist „kostenlos“ bis zum Limit.
Im Screenshot siehst du Preise und Limits (Preise zum Zeitpunkt der Erstellung des Tutorials; Änderungen vorbehalten)

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

📣 In diesem Post gehen wir davon aus, dass die App bereits im App Store erstellt ist

Einleitung

Damit Xcode deine Capacitor App baut, musst du ein paar Dinge einrichten.

Paketvorbereitung

Stelle sicher, dass dein Build-Befehl in deinem package.json Script steht. Füge dann den sync:ios Befehl wie unten gezeigt hinzu.

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

Dieser Schritt sorgt dafür, dass das Post-Script einfach funktioniert

Post-Clone-Script

Dieses Script wird von Xcode Cloud nach dem Clone-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

Speichere diese Datei im Root deines Projekts und nenne sie ios/App/ci_scripts/ci_post_clone.sh

Mache die Datei anschließend mit diesem Befehl ausführbar chmod +x ios/App/ci_scripts/ci_post_clone.sh

Xcode-Workflow erstellen

Xcode öffnen (ja, um Xcode zu entfernen, brauchst du Xcode)

Und gehe zu diesem Tab: Xcode Schritt 1

Klicke auf 'Create Workflow', wähle deine App und klicke dann auf 'Next', wie unten gezeigt.

Xcode Schritt 2

Klicke links auf 'Edit Workflow' Xcode Schritt 2

Gehe zum 'Environments'-Tab, wähle wie unten Mac 12.4 und setze die passende Option Xcode Schritt 3

Wähle deine Startbedingung. Wenn du denselben Build wie wir nutzt, empfehle ich 'Tag' statt 'Branch', um doppelte Builds zu vermeiden.

Setze deine Env-Variable Xcode Schritt 4

Verbinde dein GitHub-Konto Xcode Schritt 5

Xcode Schritt 6

Aktiviere dann den Workflow und commite deine erste Änderung. Du solltest sehen, wie dein Build in Xcode läuft.

Build-Verarbeitung

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

Bei privaten Projekten kann die geschätzte Kosten pro Build bis zu $0,008/min x 5 min = $0,40oder mehr betragen, je nach Konfiguration oder Abhängigkeiten Ihres Projekts.

Bei Open-Source-Projekten sollte das überhaupt kein Problem sein. Siehe Preise.

Weiterlesen: So baust du eine Ionic Capacitor App in Xcode Cloud

Wenn du es nutzt Ionic Capacitor App mit Xcode Cloud bauen 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.

Live-Updates für Capacitor-Apps

Wenn ein Bug im Web-Layer live ist, liefere den Fix über Capgo aus, statt Tage auf die App-Store-Freigabe zu warten. Nutzer bekommen das Update im Hintergrund, während native Änderungen im normalen Review-Prozess bleiben.

Neues aus unserem Blog

Capgo gibt dir die besten Insights, um eine wirklich professionelle Mobile App zu erstellen.