Saltar al contenido principal
CDI

Crear un build IOS automático con Capacitor y Codemagic

¿Cómo configurar una pipeline de CI/CD para tu aplicación IOS Ionic con Codemagic en 5 minutos (2024)

Automático Capacitor de IOS con Codemagic

Entrega continua para IOS utilizando Codemagic

Requisitos previos

Antes de continuar con el tutorial…

  • Miembro del programa de desarrolladores de IOS.
  • Deseo de leer 😆…

Importante sobre el precio

Precio de la acción de Codemagic

https://codemagic.io/precios/

El servicio es ‘gratuito’ hasta 500 minutos de macOS M1/mes, dependiendo de la máquina elegida.
Vamos a utilizar una máquina macOS M1 puedes ver en la captura su precio y límites (precios a la creación del tutorial, pueden cambiar en el futuro)

🔴 Una vez advertido de los requisitos y precios, si te gusta, continuamos…

📣 En el post asumimos que tenemos la aplicación creada en iTunes connect, tenemos los certificados del ecosistema Apple, todo estará configurado por Codemagic!

¡Vamos a sumergirnos!

Pasos a seguir en el post

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

1. Usando App Store Connect API con Codemagic

Starting February 2021, two-factor authentication or two-step verification is required for all users to sign in to App Store Connect. This extra layer of security for your Apple ID helps ensure that you’re the only person who can access your account.
From Soporte de Apple

Comenzar con match requiere revocar tus certificados existentes. No te preocupes, recibirás el nuevo de inmediato.

Requisitos

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

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

Crear una clave de App Store Connect API

Para generar claves, debe tener permiso de administrador en App Store Connect. Si no tiene ese permiso, puede dirigir a la persona relevante a este artículo y seguir las siguientes instrucciones.

1 — Inicie sesión en App Store Connect.

2 — Seleccione Usuarios y Acceso.

Acceso de usuario de App Store Connect

3 — Selecciona la pestaña de API Claves.

Claves de App Store Connect API

4 — Haga clic en Generar API clave o en el botón (+).

Crear claves de App Store Connect API

5 — Ingresa el nombre de la clave y selecciona un nivel de acceso. Recomendamos elegir App Manager permisos de acceso, leer más sobre los permisos del rol de Apple Developer Program aquí

Crear claves de App Store Connect API con nombre

6 — Haz clic en Generar.

El acceso de una clave API no puede limitarse a aplicaciones específicas.

El nombre de la nueva clave, el ID de clave, un enlace de descarga y otra información aparecen en la página.

Descargas de claves de App Store Connect

Obtén aquí toda la información necesaria: <1> ID de la incidencia.
<2> ID de la clave.
<3> Haz clic en "Descargar clave API" para descargar tu clave privada API. El enlace de descarga aparece solo si la clave privada no se ha descargado aún. Apple no almacena una copia de la clave privada. Por lo tanto, solo puedes descargarla una vez.

🔴 Almacena tu clave privada en un lugar seguro. Nunca compartas tus claves, almacena claves en un code repositorio o incluye claves en el lado del cliente code.

Agregar la clave de App Store Connect API a Codemagic

  1. Abre tus ajustes de equipo de Codemagic Selecciona integraciones de equipo Abre equipo Selecciona identidades de firma code Selecciona identidades de firma code Y subir el certificado Subir el certificado

  2. Haga clic en Agregar clave el botón.

  3. Ingrese el App Store Connect API key nameEste es un nombre legible para humanos para la clave que se utilizará para referirse a la clave más tarde en las configuraciones de la aplicación.

  4. Ingrese el Issuer ID y Key ID valores.

  5. Haga clic en Seleccione un archivo .p8 o arrastre el archivo para subir la clave de App Store Connect API descargada anteriormente.

  6. Click Guardar.

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

2. Crea certificados y perfiles de configuración

Certificados

Abra XCode y vaya a Configuración &gt; Cuentas &gt; ID de Apple &gt; Equipos y selecciona tu equipo.

Code identidades de firma

Haz clic en Administrar certificados &gt; + y selecciona Distribución de Apple.

Distribución de Apple

Luego puedes crear un nuevo certificado.

Luego debes ir a la caja de llaves para descargar el certificado como un .p12 archivo.

Para hacerlo, debes ir a la caja de llaves, cambiar a la sección de la login caja de llaves y luego la pestaña mis certificados.

mis certificados

Entonces puedes seleccionar el certificado que deseas descargar. (Busca por la fecha del certificado)

Y luego haz clic derecho en el certificado y selecciona Exportar.

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

Esto descargará el certificado como un .p12 archivo.

Perfiles de provisión

Abrir Desarrollador de Apple y selecciona el equipo correcto.

Luego crea un nuevo perfil, haciendo clic en +

Crear un nuevo perfil

Y selecciona App Store Connect.

Selecciona App Store Connect

Luego debes seleccionar la aplicación correcta, ten cuidado, ya que no puedes usar un wildcard de lo contrario el firmado fallará.

Selecciona la aplicación correcta

Seleccione el certificado correcto que creó antes (busque la fecha de vencimiento, debe ser el mismo día y mes que hoy) y haga clic en Continuar.

Seleccione el certificado correcto

Finalmente ingrese el nombre del perfil y haga clic en Generar.

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

Generar el perfil

Podrá descargar el perfil como un .mobileprovision archivo.

Descargar el perfil

Agregar el Code certificado de firma

Codemagic le permite subir certificados de firma code como archivos PKCS#12 que contienen tanto el certificado como la clave privada, que se necesitan para usarlo. Cuando suba, Codemagic le pedirá que proporcione la contraseña del certificado (si el certificado está protegido por contraseña) junto con un identificador Nombre de referencia, que luego se puede utilizar en el codemagic.yaml configuración para obtener el archivo específico.

  • Subir certificado
  • Generar nuevo certificado
  • Obtener desde el Portal de Desarrolladores
  1. Abre tus ajustes de equipo de Codemagic, ve a configuración de codemagic.yaml > Code identidades de firma.
  2. Abre certificados iOS tab.
  3. Subir el archivo de certificado haciendo clic en Elegir un archivo .p12 o .pem o arrastrándolo en la caja indicada.
  4. Introduzca la Contraseña de certificado y elija un Nombre de referencia.
  5. Haga clic en Agregar certificado

Agregar el perfil de provisión

Codemagic le permite subir un perfil de provisión para utilizarlo en la aplicación o recuperar un perfil desde el Portal del Desarrollador de Apple.

El tipo de perfil, equipo, identificador de paquete y fecha de expiración se muestran para cada perfil agregado a las identidades de firma Code. Además, Codemagic le informará si está disponible una certificación de firma code en las identidades de firma Code (un marcador de verificación verde en el campo). Certificado 3. Configuración de Codemagic

Configuración de secretos de Codemagic

Configura secretos de Codemagic

Ever wonder where the values of the ENV ¿De dónde vienen? Bueno, ya no es un secreto – es de tu proyecto secreto.

4. Configura el archivo de flujo de Codemagic

Crear un archivo llamado codemagic.yml en la raíz de tu proyecto y agrega 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

This workflow should be triggered manually or after each GitHub Certificate, si necesita automatizar la etiqueta, consulte Construcción y lanzamiento automáticos con acciones de GitHub primero.

Luego, este flujo de trabajo extraerá sus dependencias de NodeJS, las instalará y construirá su aplicación de JavaScript.

Cada vez que envíe una nueva etiqueta, se construirá una versión de prueba en TestFlight.

No es necesario que su aplicación utilice Ionic, solo es necesario la base de Capacitor , puede tener módulos de Cordova antiguos, pero se recomienda utilizar el plugin de JavaScript Capacitor .

5. Desencadene el flujo de trabajo

Desencadene el flujo de trabajo

Envíe los nuevos commits a la rama main o development Para desencadenar el flujo de trabajo.

Comenzado con el commit

Después de unos minutos, el build debería estar disponible en su panel de control de App Store Connect.

Panel de control de Testflight

Iniciar manualmente

Puedes iniciar el flujo de trabajo manualmente.

Primero selecciona la aplicación que deseas construir, luego haz clic en Iniciar nueva construcción.

Select app

Luego selecciona la rama que deseas construir.

Seleccionar rama

Y haz clic en Iniciar nueva construcción.

Luego ve a la lista de construcciones

Build list

Y haz clic en la construcción para ver el resultado.

Resultado de la construcción

Puedes desplegar desde la máquina local

Sí, puedes, y es sencillo.

Puedes utilizar Xcode para construir y firmar tu aplicación, como siempre.

Gracias

Este blog se basa en los siguientes artículos:

Keep going from Automatic Capacitor IOS build with Codemagic

If estás utilizando Automatico Capacitor IOS build con Codemagic para planificar la automatización de CI/CD, conecta con Capgo CI/CD para el flujo de trabajo del producto en Capgo CI/CD, Capgo Builds Nativos para el flujo de trabajo del producto en Capgo Builds Nativos, Capgo Integraciones para el flujo de trabajo del producto en Capgo Integraciones, Integración de CI/CD para el detalle de implementación en Integración de CI/CD, y GitHub Acciones de Integración para los detalles de implementación en GitHub Acciones de Integración.

Actualizaciones en vivo para aplicaciones Capacitor

Cuando haya un error en la capa web, envíe la corrección a través de Capgo en lugar de esperar días para la aprobación de la tienda de aplicaciones. Los usuarios obtienen la actualización en segundo plano mientras que los cambios nativos siguen en el camino de revisión normal.

Últimas noticias de nuestro Blog

Capgo te da las mejores perspectivas que necesitas para crear una aplicación móvil verdaderamente profesional.