Home __CAPGO_KEEP_0__
CI/CD

Automatic Capacitor IOS build with Codemagic

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

Automatic Capacitor IOS build with Codemagic

Delivery Continuo per iOS utilizzando Codemagic

Requisiti

Prima di continuare con il tutorial…

  • iscrizione al programma di sviluppo iOS.
  • Desea 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.
Utilizzeremo una macchina macOS M1 la cui prezzo e limiti potete vedere nello screenshot (prezzi validi alla creazione del tutorial, potrebbero subire modifiche in futuro)

🔴 Dopo aver avvertito dei requisiti e dei prezzi, se lo desiderate, continuiamo…

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

Scendiamo in acqua 🤿

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'unica persona che può accedere al tuo account.
Dal Sostegno di Apple

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

Requisiti

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

  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 il permesso di amministratore in App Store Connect. Se non ne avete uno, potete indirizzare la persona competente a questo articolo e seguire le istruzioni seguenti.

1 — Accedere 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 (+).

Sono create le API chiavi di App Store Connect

5 — Inserisci il nome della 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 Apple Developer qui

Scheda API Chiavi di App Store Connect per la creazione del nome

6 — Clicca su Genera.

Una chiave API non può essere limitata ad accessi specifici per app.

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

Download delle chiavi App Store Connect

Ecco dove trovare tutte e tre le informazioni necessarie: <1> ID della richiesta.
<2> ID chiave.
<3> Clicca su "Download 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, archivia le chiavi in un repository code o includile nei codici client-side code.

Aggiungere 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 sul Aggiungi chiave tasto.

  3. Inserisci il App Store Connect API key nameQuesto è un nome leggibile da 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 valori.

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

  6. Clicca Salva.

Siamo pronti ad gestire Codemagic con la chiave App Store Connect API, fantastico!

2. Crea 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 seleziona Distribuzione Apple.

Distribuzione Apple

Poi puoi creare un nuovo certificato.

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

Per farlo, devi andare al keychain, passare alla sezione login keychain e quindi alla scheda Certificati.

Certificati

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

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

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

Scaricherà il certificato come un .p12 file.

Profilo di provisioning

Apre Sviluppatore Apple e seleziona il team giusto.

Poi crea 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 firmato fallirà.

Scegli l'app corretta

Scegli il certificato giusto che hai creato prima (cerca la data di scadenza, dovrebbe essere lo stesso giorno 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

Potrai scaricare il profilo come un .mobileprovision file.

Scarica il profilo

Aggiungi il certificato di firma Code

Codemagic ti consente di caricare i certificati di firma code come archivi PKCS#12 che contengono sia il certificato che la chiave privata necessarie per utilizzarli. Quando si carica, Codemagic ti chiederà di fornire la password del certificato (se il certificato è protetto da password) insieme a un nome di riferimento 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 >> Identità di firma Code.
  2. Apre Certificati iOS tab.
  3. Inviare il file del certificato cliccando su Scegli un file .p12 o .pem o trascinarlo nella finestra indicata.
  4. Inserisci la Password del certificato e scegli un nome di riferimento Clicca.
  5. Aggiungi certificato Aggiunta del profilo di provisioning

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 Code. Inoltre, Codemagic ti informerà se è disponibile un certificato di firma code corrispondente nelle identità di firma Code (un segno di spunta verde nel campo) o meno. 3. Configura Codemagic Configura i segreti di Codemagic

Ever wonder da dove provengono i valori dei segreti di Codemagic? Beh, non è più un segreto – provengono dal segreto del tuo progetto.

4. Configura il file di flusso di lavoro di Codemagic

Creare un file denominato __CAPGO_KEEP_0__ alla radice del tuo progetto e aggiungere il seguente. ENV Questo flusso di lavoro dovrebbe essere attivato manualmente o dopo ogni __CAPGO_KEEP_0__

Certificato

Setup codemagic.yml Configure

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 vuoi automatizzare il tag, si prega di fare riferimento a Costruisci automaticamente e rilascia con azioni GitHub prima.

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

Ogni volta che invii un nuovo tag, 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 si consiglia di utilizzare il plugin JS Capacitor.

5. Attiva il workflow

Attiva il workflow

Inviare i nuovi commit sul ramo main o development se si desidera attivare il workflow, si prega di fare riferimento a

Avviato con commit

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

Pannello Testflight

Inizia manualmente

Puoi avviare manualmente il workflow.

Scegli prima l'app che desideri costruire, quindi clicca su context: Pagina/area: Capgo Builder / prodotto di costruzione cloud nativa. Ruolo: Etichetta di navigazione breve o elemento di navigazione. Messaggio chiave `native_build_builder_credit_first` (Primo credito del costruttore di build nativa)..

Inizia nuovo build

Scegli app

Scegli quindi il ramo che desideri costruire.

Scegli ramo E clicca su.

Quindi vai alla lista di costruzione

Lista di costruzione

E clicca sul costruire per vedere il risultato.

Risultato di costruzione

Si può distribuire dal computer locale

Sì, puoi farlo e non è affatto difficile.

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

Grazie

Questo blog si basa sugli articoli seguenti:

Continua con Automatic Capacitor build IOS con Codemagic

Se stai utilizzando Automatic Capacitor build IOS con Codemagic per pianificare l'automazione CI/CD, connettilo con Capgo automazione CI/CD per il workflow del prodotto in Capgo automazione CI/CD, Capgo costruzioni native per il workflow del prodotto in Capgo costruzioni native, Capgo integrazioni per il workflow del prodotto in Capgo integrazioni, Integrazione CI/CD per il dettaglio di implementazione in Integrazione CI/CD, e GitHub Azioni di integrazione 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.

Quando un bug del layer web è attivo, invia la correzione attraverso __CAPGO_KEEP_0__ 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.

Contesto: Sito web di marketing Capgo. Ruolo: Descrizione di supporto o meta descrizione. Visto in: componente GetStarted.astro. Preservare i termini di prodotto/marca e i termini di sviluppatore esattamente. Chiave del messaggio `instant_updates_for_capacitor_apps_description` (Descrizione degli aggiornamenti istantanei per le app Capacitor).

Sostegno umano da parte di Martin

Capgo gives you the best insights you need to create a truly professional mobile app.