Saltar al contenido principal
Tutorial

Cómo compilar una app de Ionic Capacitor en Xcode Cloud

Usa Xcode Cloud para build de tu app JS Capacitor y evita usar MacOS.

Cómo compilar una app de Ionic Capacitor en Xcode Cloud

Requisitos

Antes de continuar con el tutorial…

  • Asegúrate de usar GitHub
  • Usa Capacitor
  • Tu app ya está desplegada en la App Store
  • Ganas de leer 😆…

Usar Ionic es opcional; con Cordova podría funcionar, pero no lo he probado.

Detalles importantes sobre el precio

Precio de Xcode Cloud

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

El servicio es 'gratis' hasta alcanzar el límite.
En la captura de pantalla puedes ver los precios y límites (los precios corresponden a la fecha de creación del tutorial y podrían cambiar en el futuro)

🔴 Aclarados los requisitos y precios, si quieres, seguimos…

📣 En este post, asumimos que la app ya está en la App Store

Intro

Para que Xcode compile tu app Capacitor, debes configurar un par de cosas.

Preparación del paquete

Asegúrate de tener tu comando de build en tu package.json script. Luego añade el sync:ios comando como se muestra abajo.

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

Este paso hará que el post script funcione correctamente

Script post-clonación

Este script lo ejecutará Xcode Cloud tras el paso de 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

Guarda este archivo en la raíz de tu proyecto y llámalo ios/App/ci_scripts/ci_post_clone.sh

Luego haz que el archivo sea ejecutable con este comando chmod +x ios/App/ci_scripts/ci_post_clone.sh

Crea un workflow de Xcode

Abre Xcode (sí, para eliminar Xcode necesitas Xcode)

Y ve a esta pestaña: Xcode paso 1

Haz clic en create workflow, selecciona tu app y pulsa next como se muestra abajo.

Xcode paso 2

Haz clic en Edit workflow a la izquierda Xcode paso 2

Ve a la pestaña de environments, elige Mac 12.4 como abajo y marca la opción correcta Xcode paso 3

Elige tu start condition. Si usas el mismo build que nosotros, sugiero usar Tag en vez de branch para evitar builds dobles.

Configura tu env variable Xcode paso 4

Conecta tu cuenta de GitHub Xcode paso 5

Xcode paso 6

Luego, habilita el workflow y haz commit de tu primer cambio; deberías ver tu build ejecutándose en Xcode.

Procesando build

En Xcode Cloud, se te factura según los minutos que hayas usado en tu workflow de CI/CD. Por experiencia, tarda unos 10–15 minutos antes de que un build pueda procesarse en la App Store.

Para proyectos privados, el coste estimado por build puede llegar a ser de $0.008/min x 5 min = $0.4, o más, dependiendo de la configuración o las dependencias de tu proyecto.

Para proyectos Open-source, esto no debería ser un problema en absoluto. Mira precios.

Continuar desde Cómo buildear una app de Ionic Capacitor en Xcode Cloud

Si estás usando Cómo compilar una app de Ionic Capacitor en Xcode Cloud para planificar la automatización de CI/CD, conéctala con CI/CD de Capgo para el workflow del producto en Capgo CI/CD, Native Builds de Capgo para el workflow del producto en Capgo Native Builds, Integraciones de Capgo para el workflow del producto en las integraciones de Capgo, Integración CI/CD para el detalle de implementación en la integración de CI/CD, y Integración con GitHub Actions por el detalle de implementación en la integración de GitHub Actions.

Live Updates para apps de Capacitor

Si hay un bug en la capa web, publica el fix con Capgo en lugar de esperar días a la aprobación de la app store. Los usuarios reciben la actualización en segundo plano mientras los cambios nativos siguen el proceso de revisión normal.

Lo último de nuestro blog

Capgo te da los mejores insights para crear una app móvil realmente profesional.