Pulsa aquí para ir al contenido principal
CDI

Automatic Capacitor IOS build with Codemagic

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

Créditos del artículo

Martín Donadieu

Escritor

Valeria

Revisor

Jordán

Editor

Construcción automática de IOS con Codemagic Capacitor

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 al mes, dependiendo de la máquina elegida.
Vamos a utilizar una macOS M1 máquina, puedes ver en la captura de pantalla su precio y límites (precios a la creación de este tutorial, pueden cambiar en el futuro)

🔴 Una vez advertidos 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 de 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. Usando una clave de App Store Connect API
  5. Copiar archivos de Fastlane
  6. Configurar Codemagic

1. Usando App Store Connect API con Codemagic

Desde el mes de febrero de 2021, se requiere autenticación en dos factores o verificación en dos pasos para todos los usuarios para iniciar sesión en App Store Connect. Esta capa adicional de seguridad para su ID de Apple ayuda a asegurarse de que solo usted puede acceder a su cuenta.
Desde Soporte de Apple

Para empezar con match, es necesario revocar sus certificados existentes. Pero no se preocupe, tendrá el nuevo directamente.

Requisitos

Para poder usar 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 API de App Store Connect.

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 instrucciones siguientes.

1 — Inicie sesión en App Store Connect.

2 — Seleccione Usuarios y acceso.

Acceso de usuario de App Store Connect

3 — Seleccione la pestaña de claves API.

Claves API de App Store Connect

4 — Haz clic en Generar API o en el botón de agregar (+).

Las claves de App Store Connect API crean

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

App Store Connect API llaves crean nombre

6 — Haga clic en Generar.

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

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

Descargar claves de App Store Connect

Obtenga toda la información necesaria aquí: <1> ID de problema.
<2> ID de clave.
Haga clic en "Descargar la clave API" para descargar su clave API privada. 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 puede descargarla una vez.

🔴 Almacene su clave privada en un lugar seguro. Nunca debe compartir sus claves, almacenar claves en un code repositorio o incluir claves en el lado del cliente code.

Agregar la clave API de App Store Connect a Codemagic

  1. Abra la configuración de su equipo de Codemagic Seleccione las integraciones de equipo Abra el equipo Seleccione las identidades de firma code Seleccione las identidades de firma code Y suba el certificado Suba el certificado

  2. Haga clic en Agregar clave 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 los ajustes 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 App Store Connect API descargada anteriormente.

  6. Haga clic Guardar.

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

2. Crea certificados y perfiles de configuración de proveedor.

Certificados

Abre XCode y ve a Ajustes > Cuentas > ID de Apple > Equipos y selecciona tu equipo.

Code identidades de firma

Haga clic en Gestionar certificados > + y seleccione Distribución de Apple.

Distribución de Apple

Luego puede 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 login y luego la pestaña Mis Certificados.

Mis Certificados

Luego, 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 Intercambio de Información Personal (.p12).

Eso descargará el certificado como un .p12 archivo.

Perfiles de provisión

Abrir Desarrollador de Apple y selecciona el equipo adecuado.

Crear un nuevo perfil, haciendo clic en +

Crear un nuevo perfil

Y selecciona App Store Connect.

Seleccionar App Store Connect

Entonces debes seleccionar la aplicación correcta, ten cuidado, no puedes usar wildcard de lo contrario la firma fallará.

Seleccionar la aplicación correcta

Selecciona el certificado correcto que creaste antes (busca la fecha de vencimiento, debe ser el mismo día y mes que hoy) y haz clic en Continuar.

Seleccionar el certificado correcto

Finalmente ingresa el nombre del perfil y haz clic en Generar.

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

Generar el perfil

Puedes descargar el perfil como un .mobileprovision archivo.

Descargar el perfil

Almacenar la Code certificación de firma

Codemagic te permite subir certificaciones de firma code como archivos PKCS#12 que contienen tanto la certificación como la clave privada necesarias para utilizarla. Cuando subas, Codemagic te pedirá que proporciones la contraseña de la certificación (si la certificación está protegida por contraseña) junto con un nombre de referencia único Nombre de referencia, que luego se puede utilizar en la 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 ajustes de codemagic.yaml > Code identidades de firma.
  2. Abrir certificados iOS sección.
  3. Cargar el archivo de certificado haciendo clic en Elegir un archivo .p12 o .pem o arrastrándolo a la caja indicada.
  4. Ingrese el contraseña de certificado y elija un nombre de referencia.
  5. Haga clic Agregar certificado

Agregar el perfil de configuración

Codemagic le permite subir un perfil de configuración para usar en la aplicación o para obtener un perfil desde el Portal de Desarrolladores de Apple.

El tipo de perfil, equipo, identificador de paquete y fecha de vencimiento 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 compatible en las identidades de firma Code (un signo de verificación verde en el campo) Certificado 3. Configuración de Codemagic

3. Configuración de Codemagic

Configura secretos de Codemagic

¿Dónde se encuentran los valores de los ENV ? Bueno, ya no es un secreto – provienen de la configuración secreta de tu proyecto.

4. Configura 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 etiquetasi necesitas automatizar la etiqueta, consulta Construcción y liberación automáticas con acciones GitHub. acciones

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

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

Su aplicación no necesita utilizar Ionic, solo es necesario la base Capacitor, puede tener un módulo Cordova antiguo, pero el plugin Capacitor de JavaScript debe ser preferido.

5. Activar flujo de trabajo

Activar el flujo de trabajo

Empuja los nuevos commits a la rama main o development desencadenar el flujo de trabajo.

para activar el flujo de trabajo.

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

Panel de control de Testflight

Panel de control de Testflight

Puedes iniciar el flujo de trabajo manualmente.

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

Select app

Luego selecciona la rama que deseas construir.

Selecciona rama

Y haz clic en Comienza una 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 hacerlo, y es sencillo.

Puedes utilizar Xcode para compilar 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

Si estás utilizando Automatic Capacitor IOS build with 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 Construcciones Nativas para el flujo de trabajo del producto en Capgo Construcciones Nativas, Capgo Integraciones para el flujo de trabajo del producto en Capgo Integraciones, Título de Integraciones para el flujo de trabajo del producto en __CAPGO_KEEP_0__ Integraciones, GitHub Integración de Acciones para el detalle de implementación en GitHub Integración de Acciones.

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.

Apoyo humano de Martin

Iniciar Ahora

Últimas noticias de nuestro Blog

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