Build automático de Capacitor para iOS con Codemagic

Continuous Delivery para iOS usando Codemagic

Requisitos

Antes de seguir con el tutorial…

• Membresía del programa de desarrolladores de iOS.
• Ganas de leer 😆…

Información importante sobre el precio

https://codemagic.io/pricing/

El servicio es ‘gratis’ hasta 500 minutos de macOS M1 al mes, según la máquina elegida.
Vamos a utilizar un macOS M1 máquina, en la captura puedes ver su precio y límites (precios vigentes al crear el tutorial, podrían cambiar en el futuro)

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

📣 En el post asumimos que la app ya está en iTunes Connect y que tenemos los certificados de Apple; ¡Codemagic se encargará de todo!

¡Vamos a ello! 🤿

Pasos a seguir en el post

1. Usar App Store Connect API con Codemagic
2. Requisitos
3. Crear una clave API de App Store Connect
4. Usar una clave API de App Store Connect
5. Copiar archivos de Fastlane
6. Configurar Codemagic

1. Usar App Store Connect API con Codemagic

A partir de febrero de 2021, todos los usuarios deben usar la autenticación de dos factores o la verificación en dos pasos para iniciar sesión en App Store Connect. Esta capa adicional de seguridad para tu Apple ID ayuda a garantizar que seas la única persona que pueda acceder a tu cuenta.
Desde Soporte de Apple

Para empezar con match, primero debes revocar tus certificados actuales. Pero no te preocupes, obtendrás los nuevos directamente.

Requisitos

Para poder usar App Store Connect API, Codemagic necesita tres cosas.

1. ID del emisor.
2. ID de la clave.
3. Archivo o contenido de la clave.

Crear una clave API de App Store Connect

Para generar claves, debes tener permiso de Admin en App Store Connect. Si no lo tienes, puedes indicarle a la persona correspondiente que consulte este artículo y seguir estas instrucciones.

1 — Inicia sesión en App Store Connect.

2 — Selecciona Usuarios y acceso.

3 — Selecciona la pestaña API Keys.

4 — Haz clic en Generate API Key o en el botón Add (+).

5 — Introduce el nombre de la clave y elige un nivel de acceso. Recomendamos App Manager derechos de acceso, lee más sobre los permisos de roles del Apple Developer Program aquí

6 — Haz clic en Generate.

El acceso de una clave API no se puede limitar a apps específicas.

En la página aparecerán el nombre de la nueva clave, su ID, un enlace de descarga y más info.

Obtén aquí los tres datos necesarios: <1> Issue ID.
<2> ID de la clave.
<3> Haz clic en “Download API Key” para descargar tu clave privada API. El enlace de descarga solo aparece si aún no se ha descargado la clave privada. Apple no conserva una copia de la clave privada, así que solo podrás descargarla una vez.

🔴 Guarda tu clave privada en un lugar seguro. Nunca compartas tus claves ni las guardes en un repositorio code, ni las incluyas en code del lado del cliente.

Añadir la clave API de App Store Connect a Codemagic

1. Abre la configuración de tu equipo en Codemagic, Selecciona las identidades de firma de code Y subir el certificado

2. Haz clic en Añadir clave botón.

3. Introduce el App Store Connect API key name. Este es un nombre legible para la clave que se usará para referirse a ella más tarde en la configuración de la aplicación.

4. Introduce el Issuer ID y Key ID valores.

5. Haz clic en Elige un archivo .p8 o arrastra el archivo para subir la clave API de App Store Connect descargada anteriormente.

6. Haz clic Guardar.

Ahora podemos gestionar Codemagic con la clave API de App Store Connect, ¡genial!

2. Crear certificados y perfiles de aprovisionamiento

Certificados

Abre Xcode y ve a Configuración > Cuentas > Apple ID > Equipos y selecciona tu equipo.

Haz clic en Gestionar certificados > + y selecciona Distribución de Apple.

Luego puedes crear un nuevo certificado.

Luego tienes que ir al Keychain para descargar el certificado como un .p12 archivo.

Para ello, tienes que ir al Keychain y cambiar al login keychain y luego a la pestaña Mis certificados.

Luego puedes seleccionar el certificado que quieras descargar. (Fíjate en la fecha del certificado)

Luego, haz clic derecho en el certificado y selecciona Exportar.

Elige el formato de archivo Intercambio de información personal (.p12).

Esto descargará el certificado como un .p12 archivo.

Perfiles de aprovisionamiento

Abrir Apple Developer y selecciona el equipo correcto.

Luego crea un nuevo perfil haciendo clic en +

Y selecciona App Store Connect.

Luego debes seleccionar la app correcta; cuidado, no puedes usar wildcard o la firma fallará.

Selecciona el certificado que creaste antes (revisa la fecha de expiración, debe ser el mismo día y mes que hoy) y haz clic en Continuar.

Finalmente, ponle nombre al perfil y haz clic en Generar.

El nombre se usará para identificar el perfil en Codemagic.

Puedes descargar el perfil como un .mobileprovision archivo.

Añadiendo el certificado de firma Code

Codemagic te permite subir certificados de firma code como archivos PKCS#12 que contienen tanto el certificado como la clave privada necesaria para usarlo. Al subirlos, Codemagic te pedirá que proporciones la contraseña del certificado (si está protegido) junto con un nombre de referencia único Nombre de referencia, que luego se puede usar en la codemagic.yaml configuración para obtener el archivo específico.

• Subir certificado
• Generar nuevo certificado
• Obtener del Developer Portal

1. Abre la configuración de tu equipo en Codemagic y ve a configuración de codemagic.yaml > identidades de firma de Code.
2. Abrir Certificados de iOS .
3. Sube el archivo del certificado haciendo clic en Selecciona un archivo .p12 o .pem o arrástralo dentro del cuadro indicado.
4. Introduce el Contraseña del certificado y elige un Nombre de referencia.
5. Haz clic Añadir certificado

Añadir el perfil de aprovisionamiento

Codemagic te permite subir un provisioning profile para usarlo en la aplicación o descargar uno directamente desde el Apple Developer Portal.

Para cada perfil añadido a las identidades de firma de Code, se muestran el tipo de perfil, el equipo, el bundle id y la fecha de expiración. Además, Codemagic te indicará si hay un certificado de firma code coincidente en las identidades de firma de Code (un check verde en el Certificado campo) o no.

3. Configurar Codemagic

Configurar los secrets de Codemagic

Ever wonder where the values of the ENV ? Bueno, ya no es un secreto: vienen del secret de tu proyecto. 🤦

4. Configurar el archivo de workflow de Codemagic

Crea un archivo llamado codemagic.yml en la raíz de tu proyecto y añade lo siguiente.

workflows:
  ionic-capacitor-ios-workflow:
    name: Capacitor iOS Workflow
    max_build_duration: 120
    instance_type: mac_mini_m1
    integrations:
      app_store_connect: CodeMagic
    environment:
      ios_signing:
        distribution_type: app_store
        bundle_identifier: YOUR_BUNDLE_IDENTIFIER
      vars:
        XCODE_WORKSPACE: ios/App/App.xcworkspace
        XCODE_SCHEME: App
        APP_STORE_APP_ID: YOUR_APP_STORE_APP_ID
      node: v20.14.0
      xcode: 15.4
      cocoapods: default
    triggering:
      events:
        - tag
      tag_patterns:
        - pattern: '*'
          include: true
    scripts:
      - name: Install dependencies
        script: |
          npm install
      - name: Cocoapods installation
        script: |
          cd ios/App && pod install
      - name: Update dependencies and copy web assets to native project
        script: |
          npm run build
          npx cap sync ios
      - name: Set up code signing settings on Xcode project
        script: |
          xcode-project use-profiles
      - name: Increment build number
        script: |
          cd $CM_BUILD_DIR/ios/App
          LATEST_BUILD_NUMBER=$(app-store-connect get-latest-app-store-build-number "$APP_ID")
          agvtool new-version -all $(($LATEST_BUILD_NUMBER + 1))
      - name: Build ipa for distribution
        script: |
          xcode-project build-ipa \
            --workspace "$XCODE_WORKSPACE" \
            --scheme "$XCODE_SCHEME"
    artifacts:
      - build/ios/ipa/*.ipa
      - /tmp/xcodebuild_logs/*.log
      - $HOME/Library/Developer/Xcode/DerivedData/**/Build/**/*.app
      - $HOME/Library/Developer/Xcode/DerivedData/**/Build/**/*.dSYM
    publishing:
      email:
        recipients:
          - YOUR_EMAIL
        notify:
          success: true # To not receive a notification when a build succeeds
          failure: false # To not receive a notification when a build fails
      app_store_connect:
        auth: integration
        # Configuration related to TestFlight (optional)
        # Note: This action is performed during post-processing.
        submit_to_testflight: true
        # Configuration related to App Store (optional)
        # Note: This action is performed during post-processing.
        submit_to_app_store: false

Este workflow debe ejecutarse manualmente o después de cada GitHub etiqueta, si necesitas automatizar el tag, consulta Build y release automáticos con GitHub actions primero.

Este workflow descargará tus deps de NodeJS, las instalará y hará el build de tu app JS.

Cada vez que envíes un nuevo tag, se generará un release en TestFlight.

Tu app no necesita usar Ionic; solo la base de Capacitor es obligatoria. Puede tener módulos antiguos de Cordova, pero se debería preferir el plugin JS de Capacitor.

5. Ejecutar workflow

Ejecutar el workflow

Haz push de los nuevos commits a la rama main o development para ejecutar el workflow.

En unos minutos, el build debería estar disponible en tu dashboard de App Store Connect.

Iniciar manualmente

Puedes iniciar el workflow manualmente.

Primero selecciona la app que quieras buildear, luego haz clic en Iniciar nuevo build.

Después selecciona la rama que quieras buildear.

Y haz clic en Iniciar nuevo build.

Luego ve a la lista de builds

Y haz clic en el build para ver el resultado.

Se puede desplegar desde la máquina local

Sí, puedes hacerlo sin esfuerzo.

Puedes usar Xcode para compilar y firmar tu app, como siempre.

Gracias

Este blog se basa en los siguientes artículos:

• Continuous delivery para iOS usando Codemagic y las acciones de GitHub
• Documentación de Codemagic
• Este mensaje de GitHub de @mrogunlana

Continuar desde el build automático de Capacitor para iOS con Codemagic

Si estás usando Build automático de Capacitor para iOS con Codemagic 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.