Saltar al contenido principal
Tutorial

Cómo compilar una app Ionic Capacitor en Xcode Cloud

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

Cómo buildear una app de Ionic Capacitor en Xcode Cloud Capgo ilustración de blog

Requisitos

Antes de seguir 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.

Información importante sobre el precio

Precios de Xcode Cloud

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

El servicio es ‘gratis’ hasta 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)

🔴 Tras aclarar requisitos y precios, si te parece, continuamos…

📣 En este post, asumimos que la app ya está creada 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 sin problemas

Script post-clonación

Xcode Cloud ejecutará este script 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

Crear 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.

Procesamiento del build

En Xcode Cloud, se te factura según los minutos has utilizado para ejecutar 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 $0.008/min x 5 min = $0.4, o más, dependiendo de la configuración o dependencias de tu proyecto.

Para proyectos open source, esto no debería ser un problema en absoluto. Ver precios.

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

Si estás usando Cómo compilar una app Ionic Capacitor en Xcode Cloud para planificar la automatización de CI/CD, conéctalo con CI/CD de Capgo para el flujo de trabajo del producto en Capgo CI/CD, Native Builds de Capgo para el flujo de trabajo del producto en Capgo Native Builds, Integraciones de Capgo para el flujo de trabajo del producto en Capgo Integraciones, Integración CI/CD para los detalles de implementación de CI/CD Integration, y Integración con GitHub Actions para los detalles de implementación de GitHub Actions Integration.

Live updates para apps Capacitor

Cuando un bug de la capa web está en producción, publica el fix a través de 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 flujo de revisión habitual.

Lo último de nuestro blog

Capgo te da la información clave que necesitas para crear una app móvil realmente profesional.