__CAPGO_KEEP_0__ inicio
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

Desarrollo Continuo para iOS con Codemagic

Requisitos previos

Antes de continuar con el tutorial…

  • Miembro del programa de desarrolladores de iOS.
  • Desear 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 macOS M1 máquina, que se puede ver en la captura de pantalla su precio y límites (precios a la creación del tutorial, podrían sufrir cambios en el futuro)

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

📣 En el post asumimos que tenemos la aplicación creada en iTunes Connect, sí 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. Copiar archivos de Fastlane
  6. Configurar Codemagic

1. Usando App Store Connect API con Codemagic

Desde febrero de 2021, se requiere autenticación en dos factores o verificación en dos pasos para que todos los usuarios puedan 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 ID del emisor.

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

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 — Inicie sesión en App Store Connect.

2 — Seleccione Usuarios y Acceso.

Acceso a usuarios de App Store Connect

3 — Seleccione la pestaña de claves API.

Claves de App Store Connect API

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

Claves de App Store Connect API crean

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

llaves de App Store Connect API crean nombre

6 — Haz clic en Generar.

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

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

Descargar llaves de App Store Connect

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

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

Agregar la llave de App Store Connect API a Codemagic

  1. Abra las configuraciones de equipo de Codemagic, Seleccione las integraciones de equipo Abra equipo Seleccione las identidades de firma code Seleccione las identidades de firma code Y suba el certificado Suba el certificado

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

  3. Introduzca el App Store Connect API key name. Este 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. Introduzca los 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

Certificados

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

Code identidades de firma

Haz clic en Gestiona certificados > + y seleccionar Distribución de Apple.

Distribución de Apple

Entonces puedes crear un nuevo certificado.

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

Hacerlo así, necesitas ir a la llave de cadena, cambiar a la llave de cadena de inicio de sesión y luego la pestaña Certificados de mi Certificados de mi Entonces puedes seleccionar el certificado que deseas descargar. (Busca por la fecha del certificado).

y seleccionar

Distribución de Apple

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

Elegir el formato de archivo Interchange 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 correcto.

Luego crea un nuevo perfil, haciendo clic en +

Crear un nuevo perfil

And selecciona App Store Connect.

Selecciona App Store Connect

Después debes seleccionar la aplicación correcta, ten cuidado, no puedes utilizar wildcards de lo contrario el proceso de firma fallará.

Selecciona 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 Continúa.

Selecciona el certificado correcto

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

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

Genera el perfil

Puede descargar el perfil como un .mobileprovision archivo.

Descargar el perfil

Agregar el certificado de firma Code

Codemagic le permite subir 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 le pedirá que proporcione la contraseña del certificado (si el certificado está protegido 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. Abra la configuración de equipo de Codemagic, vaya a configuración de codemagic.yaml > Code identidades de firma.
  2. Abrir certificados iOS pestaña.
  3. Cargar el archivo de certificado haciendo clic en Seleccionar un archivo .p12 o .pem o arrastrarlo a la caja indicada.
  4. Introduzca la contraseña del certificado y elija un Nombre de referencia.
  5. Hacer clic Agregar certificado

Agregar el perfil de provisión

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

El tipo de perfil, el equipo, el identificador de paquete y la fecha de expiración se muestran para cada perfil agregado a las identidades de firma Code. Además, Codemagic le permitirá saber si existe un certificado de firma code compatible 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

¿Alguna vez te has preguntado de dónde vienen los valores de los

secrets ENV ? Bueno, ya no es un secreto – provienen de los secretos de tu proyecto. 🤦

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 etiquetasi necesitas automatizar la etiqueta, consulta Automatic build and release with GitHub actions acciones

primero.

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

Your App doesn’t need to use Ionic, only Capacitor base is mandatory, it can have old Cordova module, but Capacitor JS plugin should be preferred.

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

Activar el flujo de trabajo

Pushe las nuevas actualizaciones al branch main o development ¿Qué alternativas hay para actualizar en vivo?

Para activar el flujo de trabajo.

Comenzó con el 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 una nueva construcción de la aplicación nativa con Capgo es fácil y rápido. Selecciona la aplicación que deseas construir, luego haz clic en

Entonces selecciona la rama que deseas compilar.

Seleccionar rama

Y haz clic en Iniciar nueva compilación.

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

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

Gracias

This blog is based on the following articles:

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

When a web-layer bug is live, ship the fix through Capgo instead of waiting days for app store approval. Users get the update in the background while native changes stay in the normal review path.

asesoría humana de Martin

Iniciar Ahora

Últimas noticias de nuestro Blog

Capgo te da las mejores herramientas para crear una aplicación móvil profesional