Saltar al contenido principal
CI/CD

Automatic Capacitor IOS build with Codemagic

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

Créditos del artículo

Martin Donadieu

Escritor

Valeria

Revisor

Jordan

Editor

Automatic Capacitor IOS build with 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/pricing/

El servicio es ‘gratuito hasta 500 minutos de macOS M1 al mes, dependiendo de la máquina elegida.
Vamos a utilizar un máquina de macOS M1 máquina de macOS M1, puedes ver en la captura su precio y límites (precios a la creación del tutorial, pueden sufrir cambios 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. Usar una clave de App Store Connect API
  5. Copy Archivos Fastlane
  6. Configure Codemagic

1. Usando App Store Connect API con Codemagic

Comenzando en febrero de 2021, la autenticación en dos factores o la verificación en dos pasos es obligatoria 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 del 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 instrucciones siguientes.

1 — Iniciar sesión en App Store Connect.

2 — Seleccionar Usuarios y Acceso.

Acceso de usuario de App Store Connect

3 — Seleccionar la pestaña de claves API.

Claves de App Store Connect API

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

App Store Connect API claves de acceso crean

5 — Introduzca el nombre de la clave y seleccione un nivel de acceso. Recomendamos elegir App Manager permisos de acceso, leer más sobre los permisos del rol del programa de desarrollador de Apple aquí

App Store Connect API claves de acceso crear nombre

6 — Haga clic en Generar.

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

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

App Store Connect descargar claves

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

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

Agregar la clave de App Store Connect API a Codemagic

  1. Abra la configuración de equipo de Codemagic Seleccionar integraciones de equipo Abra equipo Seleccionar identidades de firma code Seleccionar identidades de firma code Y subir el certificado Subir el certificado

  2. Haga clic en el botón de agregar clave botón de agregar clave

  3. Ingresa 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 adelante en las configuraciones de la aplicación.

  4. Ingresa el Issuer ID y Key ID valores.

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

  6. Haz clic Guardar.

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

2. Crea certificados y perfiles de configuración

Certificados

Abra XCode y vaya a Configuración > Cuentas > ID de Apple > Equipos y seleccione su equipo.

Code identidades de firma

Haga clic en Administrar certificados > + y seleccionar Distribución de Apple.

Distribución de Apple

Luego puedes crear un nuevo certificado.

Luego debes ir a la llave de cadena para descargar el certificado como un .p12 archivo.

Para hacer esto, debes ir a la llave de cadena, cambiar a la llave de cadena de inicio de sesión y luego la pestaña Mis certificados login My Certificates.

My Certificados

Una vez que 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).

Esto descargará el certificado como un .p12 archivo.

Perfiles de configuración de proveedor

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.

Seleccionar App Store Connect

Luego debes seleccionar la aplicación correcta, ten cuidado, no puedes usar un 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

Agregar 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, necesarias para utilizarlo. Al subirlo, Codemagic te pedirá que proporciones la contraseña del certificado (si está protegido con 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 pestaña.
  3. Sube el archivo de certificado haciendo clic en Elegir un archivo .p12 o .pem o arrastrándolo en la caja indicada.
  4. Ingresa el Contraseña de certificado y elige un Nombre de referencia.
  5. Hacer clic Agregar certificado

Agregar el perfil de configuración

Codemagic te permite subir un perfil de configuración para usarlo 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 expiración se muestran para cada perfil agregado a las identidades de firma Code. Además, Codemagic te informará si está disponible una certificación de firma code en las identidades de firma Code (un signo de verificación verde en el campo) Certificado 3. Configuración de Codemagic

Configurar secretos de Codemagic

Configuración de Codemagic

¿Alguna vez te has preguntado de dónde vienen los valores de los ENV no es un secreto más – provienen 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 si necesitas automatizar la etiqueta, por favor, consulta Automatic build and release con Automatic build and release with GitHub actions Luego, este flujo 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 de prueba en TestFlight.

5. Configure Codemagic workflow file

Su aplicación no necesita utilizar Ionic, solo el Capacitor base es obligatorio, puede tener el módulo de Cordova antiguo, pero el Capacitor JS plugin se debe preferir.

5. Activar flujo de trabajo

Activar el flujo de trabajo

Envíe los nuevos commits a la rama main o development o bien,

Comience manualmente

Usted puede iniciar el flujo de trabajo manualmente.

Primero seleccione la aplicación que desea compilar, luego haga clic en

La aplicación se compilará automáticamente en su App Store Connect.

Dashboard de Testflight

Después de unos minutos, el build debería estar disponible en su panel de control de App Store Connect. Inicia una nueva compilación.

Selecciona la aplicación

Luego selecciona la rama que deseas compilar.

Selecciona rama

Y haz clic en Inicia una nueva compilación.

Luego ve a la lista de compilaciones

Lista de compilaciones

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

Resultado de la compilación

Puedes desplegar desde la máquina local

Sí, puedes, y es sencillo.

Usted puede utilizar Xcode para compilar y firmar su 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á utilizando Automatic Capacitor IOS build with Codemagic para planificar la automatización de CI/CD, conecte 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 Integración CI/CD para el detalle de implementación en Integración CI/CD, y 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 por 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.

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