Saltare al contenuto principale
CI/CD

Automatic Capacitor IOS build with Codemagic

Come configurare un flusso di lavoro CI/CD per la tua app IOS Ionic utilizzando Codemagic e in 5 minuti (2024)

Martin Donadieu

Martin Donadieu

Content Marketer

Automatic Capacitor IOS build with Codemagic

Distribuzione Continua per iOS con Codemagic

Prerequisiti

Prima di continuare con il tutorial…

  • Iscolarizzazione del programma iOS.
  • Desiderio di leggere 😆…

Nota importante sul prezzo

Prezzo dell'azione Codemagic

https://codemagic.io/pricing/

Il servizio è ‘gratuito fino a 500 minuti al mese per macOS M1, a seconda della macchina scelta.
Stiamo utilizzando una macchina macOS M1 La macchina macOS M1 che stiamo utilizzando, potete vederne il prezzo e i limiti (prezzi validi alla creazione del tutorial, potrebbero subire cambiamenti in futuro)

🔴 Una volta avvertiti dei requisiti e dei prezzi, se lo desiderate, continuiamo…

📣 Nel post si assume che abbiamo già creato l'app in iTunes Connect, abbiamo già le certificazioni dell'ecosistema Apple, tutto sarà configurato da Codemagic!

Iniziamo a esplorare!

Passaggi da seguire nel post

  1. Utilizzare App Store Connect API con Codemagic
  2. Requisiti
  3. Creazione di una chiave App Store Connect API
  4. Usando una chiave App Store Connect API
  5. Copia i file Fastlane
  6. Configura Codemagic

1. Usare 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 strato aggiuntivo di sicurezza per il tuo ID Apple aiuta a garantire che tu sia l'unica persona che può accedere al tuo account.
Da Supporto Apple

Per iniziare con match è necessario revocare i certificati esistenti. Ma non preoccuparti, avrai il nuovo uno direttamente.

Requisiti

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

  1. ID. emittente.
  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 App Store Connect

3 — Seleziona la scheda API Chiavi.

Chiavi App Store Connect API

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

Le chiavi API di App Store Connect creano

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

Il nome della chiave API di App Store Connect

6 — Clicca su Genera.

La chiave API di un'app non può essere limitata a specifiche app.

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

Scarica le chiavi di App Store Connect

Ecco le tre informazioni necessarie: 1. ID della richiesta.
2. ID della chiave.
<3> Clicca su "Scarica chiave privata API" per scaricare la tua chiave privata API.

🔴 Riponi la tua chiave privata in un luogo sicuro. Non condividere mai le tue chiavi, archivia le chiavi in un code repository o includi le chiavi nei codici client-side code.

Aggiungi la chiave API di App Store Connect a Codemagic

  1. Apri le impostazioni del tuo team di Codemagic Seleziona le integrazioni del team Apri il team Seleziona le identità di firma code Seleziona le identità di firma code E caricare il certificato Carica il certificato

  2. Clicca su Aggiungi chiave button.

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

  4. Inserisci il Issuer ID e Key ID valori.

  5. Clicca su Scegli un file .p8 o trascina il file per caricare la chiave App Store Connect API scaricata in precedenza.

  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 > Apple ID > Team e seleziona il tuo team.

Code identità di firma

Clicca su Gestisci certificati > + e seleziona Distribuzione Apple.

Distribuzione Apple

Puoi quindi creare un nuovo certificato.

Devi quindi andare a keychain per scaricare il certificato come .p12 file.

Per farlo, devi andare a keychain, passare alla keychain di accesso e poi alla scheda Certificati.

Certificati

Puoi quindi selezionare il certificato che desideri scaricare. (Cerca per la data del certificato)

E poi fai clic destro sul certificato e seleziona Esporta.

Scegli il formato del file Scambio di informazioni personali (.p12).

Ciò scaricherà il certificato come un .p12 file.

Profili di provisioning

Apri Apple Developer e seleziona il team giusto.

Crea quindi un nuovo profilo, cliccando su +

Crea un nuovo profilo

E seleziona App Store Connect.

Seleziona App Store Connect

Poi devi selezionare l'app giusta, attenzione, altrimenti il firmaggio fallirà.

Seleziona l'app giusta

Seleziona il certificato giusto che hai creato prima (guarda la data di scadenza, dovrebbe essere lo stesso giorno e mese di oggi) e clicca su Continua.

Seleziona il certificato giusto

Infine inserisci il nome del profilo e clicca su Genera.

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

Genera il profilo

Puoi scaricare il profilo come .mobileprovision file.

Scarica il profilo

Aggiungi 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 recuperare il file specifico.

  • Carica certificato
  • Genera nuovo certificato
  • Recupera dal Portale dello Sviluppatore
  1. Apri le impostazioni del tuo team Codemagic, vai a impostazioni di codemagic.yaml > Code identità di firma.
  2. Apri Certificati iOS tab.
  3. Carica il file del certificato cliccando su Scegli un file .p12 o .pem o trascinalo nella finestra indicata.
  4. Inserisci il Password del certificato e scegli un Nome di riferimento.
  5. Clicca 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.

Il tipo di profilo, il team, l'ID bundle e la data di scadenza sono visualizzati per ogni profilo aggiunto alle identità di firma di Code. Inoltre, Codemagic ti informerà se è disponibile un certificato di firma di code corrispondente nelle identità di firma di Code (un segno di spunta verde nel campo) o meno. 3. Configura Codemagic Configura i segreti di Codemagic

Ever wonder dove i valori dei " sono provenienti? Beh, non è più un segreto – provengono dal segreto del tuo progetto.

4. Configura il file di flusso di lavoro di Codemagic

Crea un file denominato ENV Certificato

field

4. Configure Codemagic workflow file codemagic.yml al radice del tuo progetto e aggiungi il seguente.

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

Questa workflow dovrebbe essere attivata manualmente o dopo ogni GitHub etichetta, se hai bisogno di automatizzare l'etichetta, si prega di fare riferimento a Costruzione automatica e rilascio con GitHub azioni in primo luogo.

Quindi questa workflow estrarrà le dipendenze NodeJS, le installerà e costruirà il tuo'applicazione JavaScript.

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

La tua App non ha bisogno di utilizzare Ionic, solo la base Capacitor è obbligatoria, può avere vecchi moduli Cordova, ma è preferibile il plugin Capacitor JS.

5. Attiva la workflow

Attiva la workflow

Inserisci i nuovi commit nella branch main o development per attivare il workflow.

Avviato con il commit

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

Dashboard Testflight

Avvia manualmente

Puoi avviare il workflow manualmente.

Seleziona per primo l'app che desideri costruire, quindi clicca su Avvia nuovo build.

Seleziona app

Seleziona quindi la branch che desideri costruire.

Seleziona branch

E clicca su Avvia nuova costruzione.

Poi vai alla lista delle costruzioni

Lista delle costruzioni

E clicca sul progetto per vedere il risultato.

Risultato della costruzione

Puoi distribuire dal computer locale

Sì, puoi farlo e non è affatto difficile.

Puoi utilizzare Xcode per costruire e firmare il tuo app, come sempre.

Grazie

Questo blog si basa sugli articoli seguenti:

Aggiornamenti in tempo reale per Capacitor applicazioni

Quando un bug del layer web è attivo, invia la correzione attraverso Capgo invece di attendere giorni per l'approvazione della store. Gli utenti ricevono l'aggiornamento in background mentre le modifiche native rimangono nel normale percorso di revisione.

Inizia subito

Ultimi articoli dal nostro Blog

Capgo ti offre le migliori informazioni che ti servono per creare un'app mobile veramente professionale.