Zum Hauptinhalt springen
Anleitung

Wie man eine Ionic Capacitor-App in Xcode Cloud erstellt

Verwenden Sie Xcode Cloud, um Ihre Capacitor-JS-Anwendung zu erstellen und die Notwendigkeit eines MacOS-Systems zu umgehen.

Martin Donadieu

Martin Donadieu

Inhaltsmarketer

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
  • Deine App ist bereits auf dem Apple Store veröffentlicht
  • Wollen Sie weiterlesen 😆…

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

Wichtig ist die Preisinformation

Preis Xcode Cloud

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

Der Service ist ‘bis zur Grenze kostenlos Sie können dies im Screenshot sehen, Preise und Grenzen (Preise zum Zeitpunkt der Erstellung des Tutorials, sie könnten sich in Zukunft ändern)
Nachdem Sie über Anforderungen und Preise informiert wurden, wenn Sie möchten, können wir fortfahren…

🔴 Bei der Veröffentlichung der App nehmen wir an, dass die App bereits in Apple Store erstellt wurde

📣 Xcode Cloud

Einleitung

Um Xcode Ihr Capacitor-Anwendungsprojekt zu bauen, müssen Sie einige Dinge einrichten.

Package-Vorbereitung

Stellen Sie sicher, dass Ihre Build-Befehle in Ihrem Skript enthalten sind. package.json Dann fügen Sie den folgenden Befehl hinzu. sync:ios Dieser Schritt macht den Post-Script-Befehl einfach ausführen.

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

Post-Klon-Skript

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

Speichern Sie dieses Skript im Root Ihres Projekts und nennen Sie es

#!/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

Dann machen Sie dieses Skript mit diesem Befehl ausführbar. ios/App/ci_scripts/ci_post_clone.sh

Erstellen Sie ein Xcode-Workflow chmod +x ios/App/ci_scripts/ci_post_clone.sh

Erstellen Sie ein Xcode-Workflow

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

Und gehen Sie zu dieser Registerkarte : Schritt 1 Xcode

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

Schritt 2 Xcode

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

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

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

Setzen Sie Ihre Umgebungsvariable Schritt 4 Xcode

Verbinden Sie Ihr GitHub-Konto Schritt 5 in Xcode

Schritt 6 in Xcode

Aktivieren Sie dann die Workflow- und Ihre erste Änderung übermitteln, 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 Pricing.

Keep going from How to build Ionic Capacitor app in Xcode Cloud

Wenn Sie Ionic Apps in Xcode Cloud verwenden How to build Ionic Capacitor app in Xcode Cloud um die CI/CD-Automatisierung zu planen, verbinden Sie es mit Capgo CI/CD for the product workflow in Capgo CI/CD, Capgo Native Builds for the product workflow in Capgo Native Builds, Capgo Integrations for the product workflow in Capgo Integrations, CI/CD-Integration zur Implementierungsdetail in CI/CD-Integration und GitHub Aktionen-Integration zur Implementierungsdetail in GitHub Aktionen-Integration.

Live-Updates für Capacitor-Apps

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

Unterstützung durch 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.