Saltare al contenuto principale

Configurazione della CI/CD per le App di Capacitor

Impara a semplificare le tue rilasci di app per iOS e Android utilizzando le pipeline CI/CD, migliorando l'efficienza e riducendo gli errori.

Configurazione della CI/CD per le App di Capacitor

Vuoi rilasci di app più veloci e senza errori per iOS e Android? Pipelines CI/CD per Capacitor gli applicazioni automatizzano la costruzione, il testing e la distribuzione, riducendo i tempi di rilascio di fino al 70% e gli errori del 60%. Questa guida copre tutto ciò di cui avete bisogno, dalla configurazione del vostro ambiente all'automazione degli aggiornamenti in tempo reale con Capgo.

Chiavi di ripasso:

  • Perché la CI/CD è importante per Capacitor applicazioni: accelera i build del 78% e riduce le rifiute di store del 60%.
  • Strumenti essenziali: Xcode, Android Studio, CocoaPods, e altro ancora.
  • Configurazione della pipeline: Automatizza compiti come npx cap sync, caching delle dipendenze e costruzioni specifiche per piattaforma.
  • : Abilita aggiornamenti in tempo reale con Capgo: Abilita aggiornamenti post-rilascio con roll-out fasi e salvaguardie di rollback.

Passaggi di configurazione rapida:

  1. Preparazione dell'ambiente: Installa gli strumenti richiesti per iOS e Android.
  2. Configurazione del progetto: Aggiorna capacitor.config.ts e gestisci le variabili di ambiente in modo sicuro.
  3. Pipelines di costruzioneAutomate l'installazione delle dipendenze, la compilazione e i test per entrambe le piattaforme.
  4. Optimizza le prestazioniUtilizza il caching, le compilazioni parallele e i flussi di lavoro condizionali.
  5. Aggiungi aggiornamenti in tempo realeIntegra Capgo per aggiornamenti OTA sicuri con rilasci fasi.

Con CI/CD, le app Capacitor raggiungono rilasci più veloci e lisci, riducendo gli errori e l'intervento manuale. Pronto a ottimizzare il tuo workflow? Entriamo nel vivo!

Integra le tue pipeline CI/CD esistenti con le capacità mobili

Preparazione dell'ambiente CI/CD

Una volta che hai affrontato le basi di CI/CD, il passo successivo è la configurazione dell'ambiente. Questo è il fondamento dell'automazione affidabile.

Configurazione degli strumenti e del software

Assicurati di avere questi strumenti chiave installati:

For lo sviluppo di iOS:

  • Xcode 14 o versione successiva
  • Strumenti di riga di comando di Xcode
  • CocoaPods per la gestione delle dipendenze

For lo sviluppo di Android:

  • Android Studio
  • Android SDK 33 o superiore
  • Sviluppatore Java (JDK)

Per confermare che gli Strumenti di riga di comando di Xcode sono installati, utilizza:

xcode-select -p

Creazione di un Capacitor Progetto

Capacitor Framework Documentazione del Sito Web

Il tuo progetto Capacitor deve essere configurato correttamente per i flussi di lavoro CI/CD. Il capacitor.config.ts Il file è al cuore di questa configurazione:

const config: CapacitorConfig = {
  appId: 'com.example.app',
  webDir: 'build',
  ios: { 
    scheme: 'MyApp'
  }
}

Questo file assicura che il tuo progetto si allinei con le richieste dei flussi di lavoro CI/CD.

Impostazione dell'ambiente

Gestire le credenziali in modo sicuro è una parte chiave del collegamento della tua configurazione dell'ambiente con il flusso di lavoro CI/CD.

Variabili chiave da definire:

  • BUILD_ENV: Specifica la fase di distribuzione (ad esempio, production)
  • IOS_SIGNING_IDENTITY: Il tuo certificato di firma code
  • ANDROID_KEYSTORE_PATH: Percorso del tuo keystore Android

Per le build Android, generare dinamicamente un local.properties il file durante il processo di CI:

echo "sdk.dir=$ANDROID_SDK_ROOT" > android/local.properties

Quando lavori con build iOS, assicurati che la tua piattaforma CI supporti gli agenti macOS.

Per verificare se il tuo ambiente è pronto:

node --version | grep "v16" && xcodebuild -version | grep "Xcode 14" || exit 1

Gestire correttamente le chiavi e i credenziali può significativamente ridurre le probabilità di rifiuti degli store di app, come evidenziato da statistiche precedenti [1].

Creazione della tua pipeline CI/CD

Una volta che il tuo ambiente è pronto, il passo successivo è configurare un flusso di lavoro CI/CD per il tuo Applicazione CapacitorQuesto pipeline dovrebbe gestire in modo efficiente sia gli asset web che le costruzioni di piattaforme native.

Installazione e Aggiornamento delle Dipendenze

Nelle ambientazioni CI/CD, la gestione delle dipendenze richiede un controllo di versione rigoroso. Inizia con un processo di installazione pulita:

npm install --ignore-scripts
npm install @capacitor/cli

Per accelerare le compilazioni, utilizzare il caching delle dipendenze. Ad esempio, Azure DevOps gli utenti hanno visto migliorare i tempi di build del 40-60% con questo setup:

- task: Cache@2
  inputs:
    key: 'npm | "$(Agent.OS)" | package-lock.json'
    path: |
      node_modules
      android/.gradle
      ios/Pods

Impostazione di build per iOS e Android

Ecco come configurare i build per entrambe le piattaforme:

Configurazione di build per iOS:

steps:
  - task: InstallAppleCertificate@2
    inputs:
      certSecureFile: 'certificate.p12'
      certPwd: $(P12_PASSWORD)
  - script: |
      xcodebuild -workspace ios/App/App.xcworkspace -scheme App -configuration Release -archivePath ios/App/App.xcarchive archive

Configurazione di build per Android:

cd android
./gradlew bundleRelease

Passaggi di testing e distribuzione

Esegui test di piattaforma in parallelo utilizzando una strategia di matrice:

test:
  steps:
    - run: npm run test:unit
    - run: npm run test:e2e
    - name: Run Platform Tests
      matrix:
        platform: [ios, android]
      run: npm run test:${{ matrix.platform }}

Per la distribuzione, impostare il trattamento di artefatti specifici per piattaforma:

Piattaforma Tipo di artefatto Canale di distribuzione
iOS IPA App Store Connect
Android AAB Google Play Console

Utilizzando i build paralleli si può ridurre significativamente il tempo di esecuzione della pipeline quando configurato correttamente.

Una volta che i tuoi build sono stati validati e pacchettizzati, sei pronto a passare alle aggiornamenti in tempo reale con Capgo (discussi nella sezione successiva).

sbb-itb-f9944d2

Aggiungere Capgo Aggiornamenti in Tempo Reale

Capgo Dashboard di Aggiornamento in Tempo Reale

Integrando Capgo nella tua pipeline migliora il tuo processo CI/CD consentendo aggiornamenti post-rilascio. Ecco come impostarlo:

Configurazione della pipeline di Capgo

Prima, installa il Capgo CLI nel tuo ambiente di pipeline:

steps:
  - name: Install Capgo CLI
    run: npm install -g @capgo/cli
  - name: Configure Authentication
    env:
      CAPGO_KEY: ${{ secrets.CAPGO_API_KEY }}

Questa aggiunta estende il tuo ciclo di vita CI/CD incorporando la gestione degli aggiornamenti nel tuo processo di costruzione e distribuzione automatizzato. Successivamente, includi il comando di caricamento dopo i passaggi di costruzione:

Per

- name: Upload Update
  run: |
    capgo upload --api-key $CAPGO_KEY --bundle ./build/app-release.apk
    capgo deploy v${VERSION} --channel production

aggiornamenti sicuri , configura le impostazioni di validazione come segue:]}

{
  "verification": {
    "checksum": "strict",
    "certificatePinning": true,
    "updateTimeout": 500
  }
}

Capgo Caratteristiche di base

Caratteristica Descrizione
Chiarificazione della crittografia end-to-end context:Pagina/Area: Pagina di marketing delle soluzioni Capgo. Ruolo: Intestazione di sezione o pagina. Visualizzato in: pagina solutions/fintech.astro. Chiave messaggio `solutions_fintech_cert3_title` (Titolo Soluzioni Fintech Cert3). | Pagina/Area: Pagina di marketing delle soluzioni Capgo. Ruolo: Intestazione di sezione o pagina. Visualizzato in: pagina solutions/fintech.astro. Chiave messaggio `solutions_fintech_sol3_title` (Titolo Soluzioni Fintech Sol3). | Pagina/Area: Pagina di marketing delle soluzioni Capgo. Ruolo: Etichetta di UI breve o elemento di navigazione. Visualizzato in: pagina solutions/healthcare.astro. Chiave messaggio `solutions_healthcare_sol3_title` (Titolo Soluzioni Sanitarie Sol3). | Pagina/Area: Pagina di marketing delle soluzioni Capgo. Ruolo: Etichetta di UI breve o elemento di navigazione. Visualizzato in: pagina solutions/fintech.astro. Chiave messaggio `solutions_fintech_badge_e2e` (Bacheca Soluzioni Fintech E2e). | Pagina/Area: Pagina di marketing delle soluzioni Capgo. Ruolo: Etichetta di UI breve o elemento di navigazione. Visualizzato in: pagina solutions/healthcare.astro. Chiave messaggio `solutions_healthcare_badge_e2e` (Bachetta Soluzioni Sanitarie E2e).
Riduce significativamente gli errori di distribuzione. Deploy Channel-Based
Adatta gli aggiornamenti alle specifiche ambientazioni. Deploy Strategia di rilascio graduale

Assicura che gli aggiornamenti siano distribuiti gradualmente.

Linee guida per l'aggiornamento OTA

Rafforza i processi di testing tracciando questi metriche chiave dopo la distribuzione:

Usa un rilascio in fasi per controllare come vengono distribuiti gli aggiornamenti:

- name: Staged Rollout
  run: |
    capgo deploy v1.2.3 --group "beta-users" --rollout 10%
    capgo deploy v1.2.3 --rollout 50%

Monitoraggio degli Aggiornamenti

Tieni d'occhio questi metriche:

  • Tasso di adozione: mira a 40-60% entro le prime 24 ore.
  • Sessioni senza crash: mantieni sopra il 99,5%.
  • Tempo di verifica: assicurati che sia inferiore a 500ms.

Se i crash superano i livelli accettabili, automatizza un rollback:

- name: Rollback Check
  run: |
    if [ $(capgo stats --version v1.2.3 --metric crashes) -gt 2 ]; then
      capgo rollback --channel production
    fi

Miglioramento della Prestazione della Pipeline

Concentrandosi su tre aree chiave può portare a miglioramenti notevoli nella tua pipeline:

Optimizzazione della Velocità di Costruzione

Per modifiche esclusivamente web, utilizzare npx cap sync può risparmiare tempo saltando la ricostruzione nativa completa, riducendo il tempo di ricostruzione di circa il 40%. Ecco come puoi implementare la costruzione condizionale:

- name: Build Strategy
  run: |
    [ "$WEB_ONLY" = true ] && npx cap sync || (./gradlew assembleRelease && xcodebuild ...)

Questa approccio garantisce che solo i componenti necessari vengono ricostruiti, semplificando il processo.

Automazione del Controllo di Versione

L'automazione del controllo di versione può semplificare il tuo workflow. Utilizza lo script seguente per impostare dinamicamente versione e numeri di costruzione:

- name: Set Version
  run: |
    VERSION=$(node -p "require('./package.json').version")
    BUILD_NUMBER=$GITHUB_RUN_NUMBER
    echo "APP_VERSION=${VERSION}" >> $GITHUB_ENV
    echo "BUILD_ID=${BUILD_NUMBER}" >> $GITHUB_ENV

Inoltre, la versione semantica automatizzata può essere configurata con questa impostazione:

{
  "scripts": {
    "version": "standard-version",
    "build:prod": "npm version patch && ionic build --prod"
  }
}

Queste pratiche forniscono un solido framework per il tracciamento e l'ottimizzazione della prestazione della pipeline attraverso metriche come:

  • Tempo di costruzione per fase
  • Efficienza della cache (rapporti di colpo/colpo mancato)
  • Utilizzo massimo di risorse

Configurazione di Ambienti Multipli

Gestire più ambienti può essere semplificato utilizzando configurazioni specifiche per l'ambiente. Ecco un esempio di configurazione:

Ambiente File di configurazione
Sviluppo .env.dev
Stagione .env.staging
Produzione Depositi sicuri

È possibile configurare gli ambienti dinamicamente con questo script:

- name: Configure Environment
  env:
    API_KEY: ${{ secrets.ENV_SPECIFIC_API_KEY }}
    BUNDLE_ID: ${{ parameters.bundleId }}
  run: |
    echo "ENVIRONMENT=${{ parameters.environment }}" >> $GITHUB_ENV
    echo "API_ENDPOINT=${{ parameters.apiUrl }}" >> $GITHUB_ENV

La combinazione di queste configurazioni con il canale di distribuzione di Capgo consente aggiornamenti precisi e specifici per l'ambiente. Ciò garantisce una distribuzione più fluida e un maggiore controllo sul comportamento dell'applicazione in diversi ambienti.

Riepilogo

Ruolo del CI/CD nel Development

L'utilizzo di pipeline CI/CD per le app di Capacitor aumenta significativamente l'efficienza del workflow. Secondo i dati dell'industria, i team possono raggiungere 50-70% cicli di rilascio più veloci grazie a costruzioni iOS e Android simultanee [3]. L'automazione di compiti come l'installazione delle dipendenze e la sincronizzazione delle piattaforme riduce gli errori di distribuzione a 40-60% [1][2].

Ad esempio, le squadre che utilizzano i flussi di lavoro di Azure DevOps hanno automatizzato processi come i passaggi di costruzione sequenziali e la confezione di Xcode. Utilizzano anche ambienti parametrizzati per lo sviluppo e la produzione. Questa approccio elimina la necessità di operazioni manuali di Gradle e Xcode CLI, garantendo la creazione di artefatti affidabili ogni volta.

Queste migliorie creano le basi per una gestione degli aggiornamenti più fluida quando combinata con Capgo.

Capgo per la Gestione degli Aggiornamenti

Capgo funziona in modo trasparente con i flussi di lavoro CI/CD per fornire aggiornamenti istantanei mentre mantiene la conformità alle politiche delle store di app. Gli aggiornamenti vengono distribuiti solo dopo aver superato le porte di testing automatizzate integrate nel flusso di lavoro.

Combiniendo costruzioni automatizzate con roll-out fasi, le squadre ottengono risultati impressionanti: 80% di copertura degli utenti entro 7 giorni e capacità di rollback in meno di un'ora.

Una strategia comune consiste nell'eseguire tracce di distribuzione parallele. Le costruzioni automatizzate vengono utilizzate per i test interni, mentre i roll-out fasi si concentrano su segmenti di utenti. Ciò garantisce che gli aggiornamenti siano sia veloci che sicuri, supportati da porte di testing automatizzate rigorose [1].

Domande frequenti

How to create a Capacitor app?

Creare un'app Capacitor richiede alcuni passaggi semplici:

  1. Configura il tuo ambiente: Installa Node.js e npm sul tuo sistema. Poi, utilizza l'CLI di Ionic per avviare un nuovo progetto con supporto per Capacitor:

    ionic start myApp tabs --capacitor
  2. Aggiungi il supporto per le piattaforme: Aggiungi le piattaforme che desideri raggiungere, come iOS o Android:

    npx cap add ios
    npx cap add android
  3. Sincronizza il tuo web code: Assicurati che il tuo web code sia allineato con le piattaforme native eseguendo:

    npx cap sync

Lo step di sincronizzazione è cruciale per mantenere l'app coerente su tutte le piattaforme e garantire un funzionamento liscio nelle pipeline CI/CD. Per ulteriori informazioni sulla configurazione del tuo ambiente, consulta la sezione Strumenti.

Continua da Setting Up CI/CD per le app Capacitor

Se stai utilizzando Setting Up CI/CD per le app Capacitor per pianificare l'automazione CI/CD, connettilo con Capgo CI/CD per il flusso di lavoro del prodotto in Capgo CI/CD, Capgo Costruzioni native per il flusso di lavoro del prodotto in Capgo Costruzioni native, Capgo Integrazioni for the product workflow in Capgo Integrations, per il flusso di lavoro del prodotto in __CAPGO_KEEP_0__ Integrazioni, Integrazione CI/CD GitHub Actions Integration for the implementation detail in GitHub Actions Integration.

Aggiornamenti in tempo reale per le app Capacitor

Quando un bug nel 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.

Sostegno umano da parte di Martin

Inizia subito

Ultimi articoli dal nostro Blog

Capgo vi dà le migliori informazioni che avete bisogno per creare un'app mobile davvero professionale.