Saltate a 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)

Martin Donadieu

Martin Donadieu

Gerente de contenido

Automatic Capacitor IOS build with Codemagic

Entrega continua para iOS utilizando Codemagic

Requisitos previos

Antes de continuar con el tutorial...

  • Membresía del programa de desarrolladores de iOS.
  • Deseo 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 una máquina de macOS M1 puedes ver en la captura de pantalla 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 ya 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

A partir 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 tu ID de Apple ayuda a asegurarte de que eres la única persona que puede acceder a tu cuenta.
Desde Soporte de Apple

Para empezar a utilizar match, es necesario revocar los certificados existentes. Pero no se preocupe, obtendrá el nuevo directamente.

Requisitos

Para poder utilizar App Store Connect API, Codemagic necesita tres ID del emisor.

  1. ID de la clave.
  2. Archivo de clave o contenido de la clave.
  3. Crear una clave de App Store Connect __CAPGO_KEEP_0__

Creating an App Store Connect API Key

1 — Inicie sesión en

App Store Connect App Store Connect.

2 — Seleccionar Usuarios y Acceso.

Acceso del usuario de App Store Connect

3 — Seleccionar la pestaña de API Claves.

Claves de App Store Connect API

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

Las claves de App Store Connect API crean

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

App Store Connect API keys create name

7 — The key has been successfully created. You can view the key in the __CAPGO_KEEP_0__ Keys tab.

Una clave de API no puede tener acceso limitado 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.

Descargas de claves de App Store Connect

Obtén aquí la información necesaria: <1> ID de la solicitud.
<2> ID de la clave.
<3> Haz clic en “Descargar clave de API” para descargar tu clave privada de 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, puedes descargarla solo una vez.

🔴 Almacena tu clave privada en un lugar seguro. Nunca debes compartir tus claves, almacenar claves en un repositorio de code o incluir claves en el lado del cliente de code.

Agregar la clave de App Store Connect de API a Codemagic

  1. Abre tus configuraciones de equipo de Codemagic Selecciona integraciones de equipo Abre equipo Selecciona identidades de firma de code Seleccione las identidades de firma protegidas code Y subir el certificado Subir 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 los Issuer ID y Key ID valores.

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

  6. Haga clic Guardar.

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

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

Certificados

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

Code identidades de firma

Haz clic en Administrar certificados > + y selecciona 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 hacerlo, 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.

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

Descargará el certificado como un .p12 archivo.

Perfiles de provisión

Abrir Desarrollador de Apple y seleccionar el equipo correcto.

Luego cree un nuevo perfil, haciendo clic en +

Crear un nuevo perfil

Y seleccionar Conectar con la Tienda de Mac.

Seleccione Conectar con la Tienda de Mac

Luego debe seleccionar la aplicación correcta, ten cuidado, no puede usar wildcard de lo contrario el firmado fallará.

Elige la aplicación correcta

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

Elige 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

Está agregando el certificado de firma Code

Codemagic te permite subir los certificados de firma code como archivos PKCS#12 que contienen tanto el certificado como la clave privada, que es necesario para utilizarlo. Cuando se sube, Codemagic te pedirá que proporciones la contraseña del certificado (si el certificado está protegido con contraseña) junto con un nombre ú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 de iOS pulgar.
  3. Subir el archivo de certificado haciendo clic en Elegir un archivo .p12 o .pem o arrastrarlo a la caja indicada.
  4. Ingrese el Contraseña de certificado y elija un Nombre de referencia.
  5. Hacer clic Agregar certificado

Agregar el perfil de provisión

El Codemagic te permite subir un perfil de provisión para utilizarlo en la aplicación o para 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, el Codemagic te informará si está disponible un certificado de firma code en las identidades de firma Code (un signo de verificación verde en el campo "Certificado") o no. 3. Configura Codemagic Configura secretos de Codemagic

¿Te has preguntado alguna vez de dónde provienen los valores de los "?

Bueno, ya no es un secreto – provienen de tu proyecto secreto.

4. Configura archivo de flujo de trabajo de Codemagic ENV Crear un archivo llamado

en la raíz de tu proyecto y agrega lo siguiente.

Este flujo de trabajo debe ser desencadenado manualmente o después de cada __CAPGO_KEEP_0__ codemagic.yml Certificado

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 etiqueta, si necesitas automatizar la etiqueta, consulta Compilación y lanzamiento automático con GitHub acciones primero.

Luego, este flujo de trabajo extraerá tus dependencias 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.

Tu aplicación no necesita utilizar Ionic, solo es obligatorio el Capacitor base, puede tener módulos de Cordova antiguos, pero se recomienda utilizar el Capacitor plugin de JavaScript.

5. Activar flujo de trabajo

Activar el flujo de trabajo

Envía los nuevos commits a la rama main o development para activar el flujo de trabajo.

Comenzado con commit

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

Iniciar manualmente

Puedes iniciar el flujo de trabajo manualmente.

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

Seleccionar aplicación

Luego selecciona la rama que deseas construir.

Seleccionar rama

Y haz clic en Iniciar nuevo build.

Luego vea la lista de construcción

Lista de construcción

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

Resultado de la construcción

Puede desplegar desde la máquina local

Sí, puedes, y es fácil.

Puede utilizar Xcode para compilar y firmar su aplicación, como siempre.

Gracias

Este blog se basa en los siguientes artículos:

Sigue adelante desde la compilación automática de IOS con Codemagic Capacitor

Si estás utilizando Compilación automática de IOS con Codemagic Capacitor 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 Compilaciones nativas para el flujo de trabajo del producto en Capgo Compilaciones nativas, 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 Acciones de GitHub Integración para los detalles de implementación en Acciones de GitHub 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.

Comienza ahora

Últimas noticias de nuestro Blog

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