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.

Artikelcredits

Martin Donadieu

Autor

Valeria

Rezensent

Jordan

Redakteur

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
  • Wollen Sie gerne 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 ‘frei 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, was die Anforderungen und Preise angeht, können wir gerne fortfahren…

📣 In diesem Artikel gehen wir davon aus, dass die App bereits im Apple Store erstellt wurde.

Einleitung

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

Paketvorbereitung

Stellen Sie sicher, dass Sie Ihren Build-Befehl in Ihrem Skript haben. package.json Fügen Sie dann den folgenden Befehl hinzu. sync:ios Dieser Schritt macht das Post-Skript einfach funktionieren.

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

Post-Klon-Skript

bis zur Grenze.

Dieses Skript wird nach dem Klonvorgang 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 Wurzelverzeichnis 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 einen 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, wählen Sie Ihre App aus, klicken Sie auf Weiter wie unten.

Xcode-Schritt 2

Klicken Sie auf Bearbeiten Workflow 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 Werden Sie Schritt 3 in 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. Werden Sie Schritt 4 in Xcode.

Verbinden Sie Ihr GitHub-Konto. Werden Sie Schritt 5 in Xcode.

Werden Sie Schritt 6 in Xcode.

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

Build-Prozess

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

For private Projekten 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 Preise.

Fortsetzen Sie von 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 im Produktworkflow in Capgo CI/CD, Capgo Native Builds zur Produktworkflow in Capgo Native Builds, Capgo Integrations Kontext: Seite/Bereich: Integrations-Marketingbereich. Rolle: Abschnitts- oder Seitenüberschrift. Gesehen in: Seite integrations.astro. Capgo Produkt/Markenname und Entwicklertermen bleiben genau erhalten. zur Produktworkflow in __CAPGO_KEEP_0__ Integrations, CI/CD-Integration GitHub Actions Integration for the implementation detail in GitHub Actions Integration.

Live-Updates für Capacitor-Apps

Wenn ein Web-Schicht-Bug aktiv ist, schicken Sie die Reparatur über Capgo anstatt Tage für die Genehmigung des App-Stores zu warten. Die Benutzer erhalten die Aktualisierung im Hintergrund, während native Änderungen im normalen Review-Prozess 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 ein wirklich professionelles Mobilgerät zu erstellen.