Vai al contenuto principale
CD/Build

Automatic Capacitor IOS build with Codemagic

Come configurare una pipeline CI/CD per il tuo app IOS Ionic con Codemagic e Codemagic in 5 minuti (2024)

Crediti dell'articolo

Martin Donadieu

Autore

Valeria

Recensore

Jordan

Curatore

Costruzione automatica Capacitor IOS con Codemagic

Delivery Continuo per iOS utilizzando Codemagic

Prerequisites

Prima di continuare con la guida…

  • Iscrizione al programma di sviluppo iOS.
  • Desiderio di leggere 😆…

Importante per il prezzo

Prezzo dell'azione Codemagic

https://codemagic.io/prezzi/

La servizio è ‘gratuito’ fino a 500 minuti di macOS M1 al mese /, a seconda della macchina scelta.
Utilizzeremo un macOS M1 macchina, potete vedere nello screenshot il suo prezzo e limiti (prezzi validi alla creazione del tutorial, potrebbero subire modifiche in futuro)

🔴 Una volta avvertiti dei requisiti e dei prezzi, se vi piace, continuiamo…

📣 Nel post supponiamo di avere l'app creata in iTunes connect, abbiamo i certificati dell'ecosistema Apple, tutto sarà configurato da Codemagic!

Scendiamo a nuoto 🤿

Passaggi da seguire nel post

  1. Utilizzo di App Store Connect API con Codemagic
  2. Requisiti
  3. Creazione di una chiave App Store Connect API
  4. Utilizzo di una chiave App Store Connect API
  5. Copia dei file Fastlane
  6. Configurazione di Codemagic

1. Utilizzo di App Store Connect API con Codemagic

A partire da febbraio 2021, l'autenticazione a due fattori o la verifica a due passaggi è richiesta per tutti gli utenti per accedere a App Store Connect. Questo ulteriore strato di sicurezza per il tuo ID Apple aiuta a garantire che tu sia l'unico a poter accedere al tuo account.
Dal Sostegno di Apple

Iniziare con match richiede di revocare i certificati esistenti. Non preoccuparti, riceverai il nuovo direttamente.

Requisiti

Per poter utilizzare App Store Connect API, Codemagic ha bisogno di tre cose.

  1. ID rilasciatore.
  2. ID chiave.
  3. File di chiave o contenuto di chiave.

Creazione di una chiave App Store Connect API

Per generare le chiavi, è necessario avere le autorizzazioni di amministratore in App Store Connect. Se non si hanno queste autorizzazioni, si può indirizzare la persona competente a questo articolo e seguire le istruzioni seguenti.

1 — Accedi a App Store Connect.

2 — Seleziona Utenti e accessi.

Accesso all'utente di App Store Connect

3 — Seleziona la scheda API Chiavi.

Scheda API Chiavi di App Store Connect

4 — Clicca su Genera API Chiave o sul pulsante Aggiungi (+).

Scheda API Chiavi di App Store Connect crea

5 — Inserisci il nome per la chiave e seleziona un livello di accesso. Consigliamo di scegliere App Manager diritti di accesso, leggi di più sulle autorizzazioni del ruolo del programma sviluppatore Apple qui

Scheda API Chiavi di App Store Connect crea nome

6 — Clicca su Genera.

Un token API non può essere limitato all'accesso a specifiche app.

Il nome della chiave, l'ID della chiave, un collegamento di download e altre informazioni vengono visualizzati sulla pagina.

Download delle chiavi App Store Connect

Ecco le informazioni necessarie: 1. ID del problema.
<2> ID della chiave.
<3> Clicca su "Download la chiave API" per scaricare la tua chiave privata API. Il link di download compare solo se la chiave privata non è stata scaricata ancora. Apple non conserva una copia della chiave privata. Pertanto, puoi scaricarla solo una volta.

🔴 Conserva la tua chiave privata in un luogo sicuro. Non condividere mai le tue chiavi, conserva le chiavi in un code repository o includile nei codici code del lato client.

Aggiunta della chiave di App Store Connect API a Codemagic

  1. Apri le impostazioni del tuo Team Codemagic, Scegli le integrazioni del Team Apre il team Scegli le identità di firma code Scegli le identità di firma code e caricare il certificato Caricare il certificato

  2. Clicca il Aggiungi chiave tasto.

  3. Inserisci il App Store Connect API key name. Questo è un nome leggibile dall'uomo per la chiave che verrà utilizzato per fare riferimento alla chiave in seguito negli impostazioni dell'applicazione.

  4. Inserisci il Issuer ID e Key ID values.

  5. valori. Scegli un file .p8 o trascina il file per caricare la chiave App Store Connect API scaricata precedentemente.

  6. Clicca Salva.

Ora possiamo gestire Codemagic con la chiave App Store Connect API, fantastico!

2. Crea certificati e profili di provisioning

Certificati

Apri XCode e vai a Impostazioni > Conti > ID Apple > Team e seleziona il tuo team.

Code identità di firma

Clicca su Gestisci certificati > + e seleziona Distribuzione Apple.

Distribuzione Apple

Poi puoi creare un nuovo certificato.

Poi devi andare al keychain per scaricare il certificato come un .p12 file.

Per fare ciò, devi andare a keychain e spostarti sul login keychain e poi sul tab Certificati.

Certificati

Poi puoi selezionare il certificato che desideri scaricare. (Cerca per la data del certificato)

E poi clicca con il tasto destro sul certificato e seleziona Esporta.

Scegli il formato del file Informazioni personali (.p12).

Questo scaricherà il certificato come un .p12 file.

Profili di provisioning

Apre Sviluppatore Apple e seleziona il team giusto.

Quindi crea un nuovo profilo, cliccando su +

Crea un nuovo profilo

E seleziona App Store Connect.

Scegli App Store Connect

Poi devi selezionare l'app giusta, attenzione, altrimenti non potrai utilizzare caratteri jolly e la firma fallirà.

Scegli l'app giusta

Selezionare il certificato giusto che avete creato prima (cerca la data di scadenza, dovrebbe essere lo stesso giorno e mese di oggi) e clicca su Continue.

Scegli il certificato

Infine inserisci il nome del profilo e clicca su Genera.

Il nome verrà utilizzato per identificare il profilo in Codemagic.

Genera il profilo

Potrai scaricare il profilo come .mobileprovision file.

Scarica il profilo

Aggiungere il certificato di firma Code

Codemagic consente di caricare i certificati di firma code come archivi PKCS#12 che contengono sia il certificato che la chiave privata necessarie per utilizzarlo. Quando si carica, Codemagic ti chiederà di fornire la password del certificato (se il certificato è protetto da password) insieme a un codice univoco Nome di riferimento, che può essere poi utilizzato nella codemagic.yaml configurazione per estrarre il file specifico.

  • Carica certificato
  • Genera nuovo certificato
  • Estrai dal Portale dello Sviluppatore
  1. Apre le impostazioni del tuo team Codemagic, vai a impostazioni codemagic.yaml > Code identità di firma.
  2. Apre certificati iOS tab.
  3. Carica il file del certificato cliccando su Scegli un file .p12 o .pem o trascinando il file nella finestra indicata.
  4. Inserisci la Password del certificato e scegli un Nome di riferimento.
  5. Clicca su Aggiungi certificato

Aggiunta del profilo di provisioning

Codemagic consente di caricare un profilo di provisioning da utilizzare per l'applicazione o di recuperare un profilo dal Portale dello Sviluppatore Apple.

The profile’s type, team, bundle id, and expiration date are displayed for each profile added to Code signing identities. Furthermore, Codemagic will let you know whether a matching code signing certificate is available in Code signing identities (a green checkmark in the Certificato 3. Configura Codemagic

Configura i segreti di Codemagic

Configura i segreti di Codemagic

Sai mai dove sono i valori dei ENV Sono provenienti da dove? Beh, non è più un segreto – vengono dal tuo progetto segreto.

4. Configura il file di flusso Codemagic

Crea un file chiamato codemagic.yml Aggiungi il seguente al root del tuo progetto.

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 tagSe hai bisogno di automatizzare la creazione di tag, consulta Costruisci e rilascia automaticamente con GitHub azioni prima.

Poi questo workflow caricherà i tuoi dipendenze NodeJS, li installerà e costruirà il tuo'applicazione JavaScript.

Ogni volta che invii una nuova tag, verrà costruito un rilascio in TestFlight.

La tua App non deve utilizzare Ionic, solo Capacitor base è obbligatoria, può avere vecchi moduli Cordova, ma Capacitor plugin JS dovrebbe essere preferito.

5. Attiva il workflow

Attiva il workflow

Inviare i nuovi commit sul ramo main o development attivare il flusso di lavoro.

per attivare il workflow.

Dopo pochi minuti, il build dovrebbe essere disponibile nel tuo dashboard App Store Connect.

Dashborde di Testflight

Inizia manualmente

Inizia manualmente il workflow.

Scegli per primo l'app che desideri costruire, quindi clicca su Avvia nuova costruzione.

Inizia nuovo build

Seleziona quindi il ramo che desideri costruire.

Seleziona ramo

Scegli ramo Avvia nuova costruzione.

Vai quindi alla lista di costruzione

Build list

E clicca sul costrutto per vedere il risultato.

Risultato della costruzione

Si può distribuire dalla macchina locale

Sì, puoi farlo e non è affatto difficile.

Puoi utilizzare Xcode per costruire e firmare l'app, come sempre.

Grazie

Questo blog si basa sugli articoli seguenti:

Continua dall'elaborazione Automatica Capacitor build IOS con Codemagic

If sei stai utilizzando Automatico Capacitor build IOS con Codemagic per pianificare l'automazione CI/CD, collega Capgo CI/CD per il workflow del prodotto in Capgo automazione CI/CD, Capgo build nativi per il workflow del prodotto in Capgo build nativi, Capgo integrazioni per il workflow del prodotto in Capgo integrazioni, Integrazioni per i dettagli di implementazione nella integrazione CI/CD, e Integrazione di GitHub Azioni per i dettagli di implementazione in GitHub Azioni di integrazione.

Aggiornamenti in tempo reale per le Capacitor app

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.

Ultimi dagli articoli del nostro Blog

Capgo vi offre le migliori informazioni per creare un'app mobile di livello professionale