Zum Hauptinhalt springen
Anleitung

How to build Ionic Capacitor app in Xcode Cloud

Use Xcode cloud to build your Capacitor JS app and bypass the need of MacOS.

Artikelcredits

Martin Donadieu

Autoren

Valeria

Rezensent

Jordan

Bearbeiter

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
  • Wollen Sie mehr lesen 😆…

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

Wichtige Informationen zur Preisgestaltung

Preis Xcode Cloud

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

Die Dienstleistung ist ‘kostenlos’ bis zum Limit.
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

🔴 Nachdem Sie über Anforderungen und Preise gewarnt wurden, wenn Sie möchten, gehen wir weiter…

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

Einführung

Um Xcode Ihren Capacitor-App zu bauen, müssen Sie ein paar Dinge einrichten.

Vorbereitung der Pakete

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

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

Dieser Schritt macht das Post-Script einfach funktionieren

Post-Clone-Script

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 "Erstellen Sie ein Workflow", wählen Sie Ihr App, klicken Sie auf "Weiter" wie unten

Xcode-Schritt 2

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

Gehe zur Umgebungsseite und wähle wie unten Mac 12.4 und überprüfe die richtige Option Xcode Schritt 3

Wähle deine Startbedingung. Wenn du die gleiche Build wie wir verwendest, empfehlen wir die Verwendung von Tag anstatt von Branch, um doppelte Builds zu vermeiden.

Setze deine Umgebungsvariable 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, dass deine Build in Xcode läuft.

Build Verarbeitung

In Xcode Cloud, Sie werden auf der Grundlage der Minuten abgerechnet, die Sie für die Ausführung Ihres CI/CD-Workflows verwendet haben. Basierend auf der 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 dies kein Problem sein. Siehe Pricing.

Fortsetzen Sie mit How to build Ionic Capacitor app in Xcode Cloud

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 zur Produktworkflow in Capgo CI/CD, Capgo Native Builds zur Produktworkflow in Capgo Native Builds, Capgo Integrations zur Produktworkflow in Capgo Integrations, CI/CD-Integration zur Implementierungsdetail in CI/CD-Integration, und GitHub Actions-Integration zur Implementierungsdetail in GitHub Actions-Integration.

Live-Updates für Capacitor-Apps

Wenn ein Web-Schicht-Bug live ist, versenden Sie die Reparatur über Capgo anstatt Tage für die Genehmigung im App-Store abzuwarten. Die Benutzer erhalten die Aktualisierung im Hintergrund, während native Änderungen im normalen Review-Verfahren bleiben.

Menschliche Unterstützung von Martin

Los geht's jetzt

Neueste von unserem Blog

Capgo gibt Ihnen die besten Einblicke, die Sie benötigen, um eine wirklich professionelle mobile App zu erstellen.