Salta al contenuto principale
Tutorial

Come buildare un'app Ionic Capacitor con Xcode Cloud

Usa Xcode Cloud per fare il build della tua app JS Capacitor senza bisogno di macOS.

Come buildare un'app Ionic Capacitor con Xcode Cloud Capgo

Prerequisiti

Prima di continuare con il tutorial…

  • Assicurati di usare GitHub
  • Usa Capacitor
  • La tua app è già pubblicata su App Store
  • Voglia di leggere 😆…

L'uso di Ionic è opzionale; con Cordova potrebbe funzionare, ma non ho provato.

Da sapere sul prezzo

Prezzi Xcode Cloud

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

Il servizio è ‘gratuito’ fino al limite.
Nello screenshot puoi vedere i prezzi e i limiti (i prezzi si riferiscono al momento della creazione del tutorial e potrebbero subire variazioni in futuro)

🔴 Una volta chiariti requisiti e costi, se vi va, procediamo…

📣 Nel post, assumiamo che l'app sia già presente su App Store

Introduzione

Per far compilare la tua app Capacitor con Xcode, devi configurare alcuni elementi.

Preparazione del pacchetto

Assicurati che il comando di build sia nel tuo package.json script. Poi aggiungi il sync:ios comando come mostrato sotto.

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

Questo passaggio farà funzionare semplicemente lo script post

Script post-clone

Questo script verrà eseguito da Xcode Cloud dopo la fase di clone

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

Salva questo file nella root del progetto e nominalo ios/App/ci_scripts/ci_post_clone.sh

Poi rendi il file eseguibile con questo comando chmod +x ios/App/ci_scripts/ci_post_clone.sh

Crea un workflow Xcode

Apri Xcode (sì, per rimuovere Xcode serve Xcode)

E vai su questa scheda: Xcode passaggio 1

Clicca su create workflow, seleziona la tua app e clicca next come sotto.

Xcode passaggio 2

Clicca su Edit workflow a sinistra Xcode passaggio 2

Vai alla scheda Environments, scegli Mac 12.4 come sotto e seleziona l'opzione corretta Xcode passaggio 3

Scegli la tua condizione di avvio. Se usi la stessa build che usiamo noi, ti suggerisco di usare Tag invece del branch, per evitare build doppie.

Imposta la tua env variable Xcode passaggio 4

Connetti il tuo account GitHub Passaggio 5 di Xcode

Passaggio 6 di Xcode

Poi abilita il workflow e fai il commit della tua prima modifica; dovresti vedere la build in esecuzione su Xcode.

Elaborazione build

In Xcode Cloud, la fatturazione avviene in base ai minuti hai utilizzato per gestire il tuo workflow CI/CD. Per esperienza, occorrono circa 10–15 minuti prima che una build venga elaborata nell'App Store.

Per i progetti privati, il costo stimato per build può arrivare a $0.008/min x 5 min = $0.4, o più, a seconda della configurazione o delle dipendenze del tuo progetto.

Per i progetti Open-source, questo non dovrebbe essere un problema. Vedi prezzi.

Continua da Come buildare un'app Ionic Capacitor in Xcode Cloud

Se stai usando Come buildare un'app Ionic Capacitor con Xcode Cloud per pianificare l'automazione CI/CD e connetterla a CI/CD con Capgo per il workflow del prodotto in Capgo CI/CD, Capgo Native Build per il workflow di prodotto in Capgo Native Builds, Integrazioni Capgo per il workflow di prodotto in Integrazioni Capgo, Integrazione CI/CD per i dettagli implementativi in CI/CD Integration, e Integrazione GitHub Actions per i dettagli implementativi in GitHub Actions Integration.

Live updates per le app Capacitor

Quando un bug nel web-layer è live, rilascia la fix tramite Capgo invece di aspettare giorni l'approvazione degli store. Gli utenti ricevono l'update in background, mentre le modifiche native restano nel normale processo di review.

Ultimi articoli dal blog

Capgo ti offre gli insight migliori che ti servono per creare un'app mobile davvero professionale.