Home __CAPGO_KEEP_0__
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 Codemagic in 5 minuti (2024)

Crediti dell'articolo

Martin Donadieu

Autore

Valeria

Revisione

Jordan

Editor

Automatic Capacitor IOS build with Codemagic

Distribuzione Continua per iOS con Codemagic

Requisiti

Prima di continuare con il tutorial…

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

Importante per il prezzo

Prezzo dell'azione Codemagic

https://codemagic.io/pricing/

Il servizio è 'gratuito' fino a 500 minuti macOS M1 al mese /, a seconda della macchina scelta.
Stiamo utilizzando un macOS M1 macchina, potete vedere nello screenshot il suo prezzo e le sue limitazioni (prezzi validi alla creazione del tutorial, potrebbero subire cambiamenti in futuro)

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

📣 In questo post supponiamo di avere già creato l'app in iTunes Connect, abbiamo già le certificazioni dell'ecosistema Apple, tutto sarà configurato da Codemagic!

Vediamo di più 🤿

Passaggi da seguire in questo post

  1. Utilizzare 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. L'uso di App Store Connect API con Codemagic

Iniziando 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.
Dal Sostegno di 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 Codice emittente.

  1. Codice chiave.
  2. File di chiave o contenuto di chiave.
  3. From

Creazione di una chiave App Store Connect API

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

1 — Accedi a App Store Connect.

2 — Seleziona Utenti e accesso a App Store Connect.

Accesso utente a App Store Connect

3 — Seleziona la scheda delle API Chiavi.

Chiavi App Store Connect API

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

Chiavi App Store Connect API creano

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

chiavi App Store Connect API creare nome

6 — Clicca su Genera.

Un'API chiave non può avere accesso limitato a specifiche app.

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

Scarica le chiavi App Store Connect

Raccogli tutte e tre le informazioni necessarie qui: <1> ID della richiesta.
<2> ID chiave.
<3> Clicca su "Scarica API Chiave" per scaricare la tua API chiave privata. Il link di download compare solo se la chiave privata non è stata ancora scaricata. 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 nelle code client-side.

Aggiungi la chiave App Store Connect API a Codemagic

  1. Apri le impostazioni del tuo team 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 il button di aggiunta della chiave Clicca il

  3. tasto Aggiungi chiave App Store Connect API key nameInserisci il nome umano leggibile per la chiave che verrà utilizzato per riferirsi alla chiave in seguito nelle impostazioni dell'applicazione.

  4. Entrare i Issuer ID e Key ID i valori.

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

  6. Cliccare Salva.

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

2. Creare certificati e profili di provisioning

Certificati

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

Code identità di firma

Clicca su Gestisci certificati > + e selezionare Distribuzione Apple.

Distribuzione Apple

Poi puoi creare un nuovo certificato.

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

Per farlo, devi andare al keychain, passare alla keychain di accesso e poi alla scheda I miei certificati.

I miei certificati

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

E poi fare clic con il pulsante destro sul certificato e selezionare Esporta.

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

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

Profili di provisioning

Apri Apple Developer e seleziona l'insieme giusto.

Crea quindi un nuovo profilo, facendo clic su +

Crea un nuovo profilo

Scegli App Store Connect.

Scegli App Store Connect

Seleziona quindi l'app giusta, attenzione, altrimenti il processo di firma fallirà.

Scegli l'app giusta

Scegli il certificato giusto che hai creato prima (controlla la data di scadenza, deve essere la stessa data e mese di oggi) e clicca su Continua.

Scegli 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

Potete scaricare il profilo come un .mobileprovision file.

Scaricate il profilo

Aggiungere il certificato di firma Code

Il Codemagic vi consente di caricare i certificati di firma code come archivi PKCS#12 che contengono sia il certificato che la chiave privata necessari per utilizzarlo. Quando si carica, il Codemagic vi chiederà di fornire la password del certificato (se il certificato è protetto da password) insieme a un nome di riferimento univoco Nome di riferimento, che potete poi utilizzare 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 codemagic.yaml > Code identità di firma.
  2. Apre certificati iOS tabella.
  3. Inserisci il file del certificato cliccando su Scegli un file .p12 o .pem o trascinando esso nella finestra indicata.
  4. Inserisci il Password del certificato e scegli un Nome di riferimento.
  5. Clicca Aggiungi certificato

Aggiunta del profilo di provisioning

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

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

Configura i segreti di Codemagic

Ti sei mai chiesto da dove vengono i valori dei?

Beh, non è più un segreto – vengono dal tuo progetto segreto. 🤦 ENV Aggiungi

4. Configura il file di flusso Codemagic

Creare un file denominato codemagic.yml al livello 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

This workflow should be triggered manually or after each GitHub etichettase hai bisogno di automatizzare l'etichetta, si prega di fare riferimento a Automatic build and release with GitHub actions azioni

per prima cosa.

Poi questo flusso preleverà i tuoi dipendenze NodeJS, li installerà e costruirà il tuo'applicazione 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.

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

Attiva il workflow

Pusha i nuovi commit sul ramo main o development oppure

Attiva il workflow.

Avviato con commit

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

Pannello di Testflight

Avvia manualmente

Puoi avviare il workflow manualmente. Scegli prima l'app che vuoi costruire, quindi clicca su.

Inizia una nuova costruzione dell'applicazione

Scegli quindi il ramo che desideri costruire.

Scegli ramo

E clicca su Avvia nuova costruzione.

Vai quindi alla lista delle costruzioni.

Lista delle costruzioni

E clicca sulle costruzioni per visualizzare il risultato.

Risultato della costruzione

Puoi distribuire dal tuo 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 sui seguenti articoli:

Continua a procedere da Automatic Capacitor build IOS con Codemagic

Se stai utilizzando Automatic Capacitor build IOS con Codemagic per pianificare l'automazione CI/CD, connettilo con Capgo CI/CD per il flusso di lavoro del prodotto in Capgo CI/CD Capgo Build nativi per il flusso di lavoro del prodotto in Capgo Build nativi Capgo Integrazioni per il flusso di lavoro del prodotto in Capgo Integrazioni Integrazione CI/CD per i dettagli di implementazione in Integrazione CI/CD, e GitHub Integrazione Azioni per i dettagli di implementazione in GitHub Integrazione Azioni.

Aggiornamenti in tempo reale per le app 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.

Sostegno umano da parte di Martin

Inizia subito

Ultimi articoli dal nostro Blog

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