Saltare al contenuto principale

Come personalizzare i script di build con Capacitor CLI

Impara a personalizzare i tuoi script di build utilizzando Capacitor CLI per deployment efficienti e aggiornamenti di app personalizzati su piattaforme diverse.

Martin Donadieu

Martin Donadieu

Content Marketer

Come personalizzare i script di build con Capacitor CLI

Capacitor CLI consente di personalizzare il processo di build dell'applicazione per le piattaforme iOS, Android e web. Modificando i script di build, puoi:

  • Accelerare gli aggiornamentiPush le modifiche istantaneamente senza ritardi degli store di app.
  • Controllare le distribuzioniRipristinare gli aggiornamenti o target specifiche gruppi di utenti.
  • Sicurezza dell'appUtilizzare l'encryption per proteggere gli aggiornamenti.
  • Optimizzare i buildRegolare le impostazioni per le esigenze specifiche delle piattaforme.

Panoramica Rapida delle Caratteristiche Chiave:

  • File di Configurazione: Utilizza capacitor.config.json e package.json per gestire le impostazioni di costruzione.
  • Script Personalizzati: Aggiungi compiti prebuild e postbuild per l'automazione.
  • Hook di Costruzione: Esegui code durante le fasi specifiche del processo di costruzione.
  • Variabili di Ambiente: Semplifica i costruzioni specifiche dell'ambiente con .env file.

Capgostrumento di distribuzione protetto, migliora questo processo con aggiornamenti automatici, tracciamento delle versioni e ottimizzazione della prestazione globale. Continua a leggere per imparare a configurare i tuoi script di costruzione per massimizzare l'efficienza.

Introduzione Capacitor Configura

Capacitor Framework Documentazione Sito Web

Processo di costruzione predefinito in Capacitor

Capire come Capacitor gestisce il suo processo di costruzione predefinito è fondamentale se desideri personalizzarlo efficacemente. Di seguito, ci occuperemo di analizzare il processo di costruzione e i file di configurazione chiave del Capacitor CLI

Passaggi di costruzione standard

Capacitor utilizza un processo passo dopo passo per trasformare la tua app web in costruzioni specifiche per piattaforma. Ecco cosa succede durante il processo di costruzione predefinito:

Fase Descrizione Output
Costruzione Web Compila gli asset web utilizzando gli strumenti dei tuoi framework Bundle web ottimizzato
Copia Assets Muove gli asset web nelle cartelle delle piattaforme native Directory degli asset delle piattaforme specifiche
Costruzione Nativa Esegue i comandi di costruzione specifici per piattaforma File binari pronti per la distribuzione
Verifica Controlla l'integrità e le dipendenze del build Stato e avvisi del build

File di configurazione principali

Il tuo progetto Capacitor è guidato da due file di configurazione fondamentali:

capacitor.config.json
Questo è il file di configurazione principale per il tuo progetto Capacitor. Imposta parametri importanti per i tuoi build:

{
  "appId": "com.example.app",
  "appName": "MyApp",
  "webDir": "dist",
  "bundledWebRuntime": false,
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 3000
    }
  }
}
  • appId: Un identificatore univoco per la tua app.
  • appName: Il nome della tua app.
  • webDir: Specifica dove Capacitor deve cercare i file di risorse web (ad esempio, dist).
  • plugins: Consenti di configurare impostazioni specifiche per i plugin, come ad esempio le opzioni per lo schermo di benvenuto.

package.json
Questo file include i script di costruzione e le dipendenze che influenzano il processo di costruzione:

{
  "scripts": {
    "build": "npm run build:web && cap sync",
    "build:web": "vite build",
    "cap:build": "cap build"
  }
}
  • Il webDir impostazione in capacitor.config.json insegna a Capacitor dove trovare i tuoi asset web compilati per l'inclusione nei build nativi.
  • Dopo aver fatto modifiche a capacitor.config.json, è necessario eseguire cap sync per assicurare che i progetti nativi siano aggiornati.

Proseguendo, esploreremo come puoi modificare queste impostazioni per personalizzare ulteriormente i tuoi build.

Modificare i Script di Costruzione

Puoi modificare il processo di costruzione predefinito di Capacitor per adattarlo meglio alle tue esigenze di progetto. Ecco come:

Impostazioni del File di Configurazione

You potresti regolare il processo di costruzione modificando il capacitor.config.json file. Ecco un esempio di configurazione:

{
  "appId": "com.example.app",
  "webDir": "www",
  "server": {
    "hostname": "localhost",
    "androidScheme": "https",
    "iosScheme": "https",
    "allowNavigation": ["*.example.com"]
  },
  "android": {
    "buildOptions": {
      "keystorePath": "release.keystore",
      "keystorePassword": "mypassword",
      "keystoreAlias": "release",
      "keystoreAliasPassword": "mypassword"
    }
  },
  "ios": {
    "scheme": "App",
    "automaticProvisioning": true
  }
}

Ecco alcune impostazioni chiave che puoi modificare:

  • webDir: Specifica dove sono ubicati i tuoi asset web compilati.
  • server: Configura il server di sviluppo, incluso il nome host e le autorizzazioni di navigazione.
  • android/ios: Consente impostazioni di costruzione specifiche per piattaforma, come ad esempio i dettagli della chiave di sicurezza per Android o le opzioni di provisioning per iOS.

Creazione di NPM Scripts

Per semplificare il tuo workflow, aggiungi script personalizzati NPM al package.json file. Ecco un esempio:

{
  "scripts": {
    "prebuild": "node ./scripts/prepare-env.js",
    "build": "npm run build:web && cap sync",
    "build:web": "vite build",
    "build:ios": "cap build ios --release",
    "build:android": "cap build android --release",
    "postbuild": "node ./scripts/notify-completion.js"
  }
}
  • prebuild e postbuild: Utilizza questi per compiti come l'installazione dell'ambiente o la notifica quando il build è completato.
  • build:platform: Comandi specifici per piattaforma per la costruzione di app Android o iOS.

Puoi portare l'automazione ancora più lontano aggiungendo gli hook di costruzione.

Impostazione degli Hook di Costruzione

Per un controllo più avanzato, utilizza gli hook di costruzione per eseguire code personalizzati in punti specifici del processo di costruzione. Ecco un esempio di impostazione in capacitor.config.ts:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  plugins: {
    CapacitorHooks: {
      beforeBuild: async () => {
        console.log('Running pre-build tasks...');
        // Add your pre-build tasks here
      },
      afterBuild: async () => {
        console.log('Running post-build tasks...');
        // Add your post-build tasks here
      }
    }
  }
};

export default config;

Con gli hook di costruzione, puoi:

  • Verifica le richieste prima che il costruzione inizi
  • Trasforma gli asset durante il processo
  • Attiva le notifiche in punti chiave
  • Aggiorna i numeri di versione automaticamente
  • Esegui test automatici senza problemi

Questa approccio ti dà una maggiore flessibilità e controllo sul ciclo di vita di costruzione intero.

Personalizzazione di Costruzione Avanzata

Lavorando su progetti più grandi, l'ottimizzazione del processo di costruzione può fare una grande differenza. Ecco come gestire le costruzioni specifiche dell'ambiente e le personalizzazioni delle piattaforme in modo efficace.

Variabili di Ambiente

Configura le variabili di ambiente creando file separati per ogni ambiente: .env Quindi, configura lo script di build per caricare il file appropriato in base all'ambiente:

  • .env.development
  • .env.staging
  • .env.production

Puoi ulteriormente regolare questi impostazioni per adattarle alle esigenze specifiche della piattaforma.

import { defineConfig } from '@capacitor/cli';

export default defineConfig({
  ios: {
    buildConfig: {
      environment: process.env.BUILD_ENV || 'development',
      configurations: {
        development: {
          signing: {
            debug: true,
            automaticProvisioning: true
          }
        },
        production: {
          signing: {
            release: true,
            provisioningProfile: 'dist/profile.mobileprovision'
          }
        }
      }
    }
  }
});

Costruzioni Specifiche della Piattaforma

Per personalizzare le costruzioni per Android e iOS, utilizza la seguente struttura:

Queste configurazioni ti consentono di personalizzare le costruzioni per ogni piattaforma, garantendo una maggiore fluidità delle distribuzioni.

const platformConfig = {
  android: {
    buildType: process.env.BUILD_TYPE || 'debug',
    keystoreConfig: {
      path: process.env.KEYSTORE_PATH,
      password: process.env.KEYSTORE_PASSWORD,
      alias: process.env.KEYSTORE_ALIAS
    }
  },
  ios: {
    scheme: process.env.APP_SCHEME || 'App',
    xcodePreferences: {
      automaticSigning: false,
      developmentTeam: process.env.DEVELOPMENT_TEAM
    }
  }
};

Caratteristica

Android IOS Simboli di Debug
Simboli di Debugging Protezione ProGuard file di mapping file dSYM
Varianti di costruzione debug, release, staging debug, release
Code Firma Gestione del keystore Profili di provisioning
Gestione degli asset ottimizzazione di res/drawable cataloghi di asset

Consigli aggiuntivi per l'ottimizzazione dei tuoi build includono:

  • Utilizzare aggiornamenti parziali per risparmiare tempo durante le distribuzioni
  • Configurare la tracciatura degli errori per identificare velocemente gli issue
  • Creare sistemi di canali per le versioni di testing beta
  • Abilitare la crittografia end-to-end per una distribuzione sicura

Quando associati a strumenti come Capgo per l'analisi e gli aggiornamenti sicuri, queste tecniche ti danno più controllo sul tuo processo di distribuzione [1].

Problemi e Soluzioni del Build Script

Quando lavori con configurazioni di build personalizzate, risolvere gli errori velocemente è cruciale per mantenere il processo di build in esecuzione senza problemi.

Solve Problemi Comuni

Molti problemi di script di build derivano da problemi di configurazione dell'ambiente o di dipendenze. Ecco come affrontare alcuni dei più comuni:

Variabili di ambiente mancanti

Se incontri un errore del tipo seguente:

error: Cannot find environment configuration for BUILD_ENV

Potresti risolverlo creando un .env.local file nella directory radice del tuo progetto. Ecco un esempio:

BUILD_ENV=development
CAPACITOR_PLATFORM=ios
BUILD_TYPE=debug

Fallimenti di compilazione specifici della piattaforma

Per errori di firma Android, utilizza questo comando:

npx cap build android --keystorePassword=$KEYSTORE_PASSWORD --keystoreAlias=$KEYSTORE_ALIAS

Per problemi di profilo di provisioning iOS, prova questo:

npx cap build ios --configuration=release --type=development
Tipo di Errore Causa comune Soluzione
Configurazione di firma Dati del keystore mancanti Imposta KEYSTORE_PATH e le credenziali
Ambiente di costruzione Variabili non definite Crea specifiche per piattaforma .env file
Dipendenze Incongruenze di versione Aggiorna package.json e sincronizza

Dopo l'applicazione delle correzioni, assicurati che le tue modifiche siano solide eseguendo test di costruzione approfonditi.

Test dei script di costruzione

Una volta risolti gli errori, valuta i tuoi script di costruzione con questi passaggi:

  • Verifica automaticaEsegui comandi di tastiera per confermare che il processo di costruzione funziona come previsto.
npm run build
npx cap sync
npx cap copy
  • Validazione dell'ambienteEsegui la verifica delle variabili di ambiente mancanti prima di avviare la costruzione.
const requiredVars = ['BUILD_ENV', 'KEYSTORE_PATH'];
requiredVars.forEach(varName => {
  if (!process.env[varName]) {
    throw new Error(`Missing required env var: ${varName}`);
  }
});
  • Debug del script di costruzioneEsegui script dettagliati per catturare potenziali problemi durante la costruzione.
{
  "scripts": {
    "build:debug": "NODE_ENV=development npx cap build --verbose",
    "build:release": "NODE_ENV=production npx cap build --verbose"
  }
}

Suggerimenti aggiuntivi per le prove:

Capgo Costruisci Funzionalità

Capgo Dashboard di Aggiornamento in Tempo Reale Interfaccia

Capgo porta i script di costruzione al prossimo livello con la distribuzione automatizzata, migliorando l'efficienza e semplificando il processo.

Aggiornamenti Rapidi delle App

Capgo’s prestazioni di aggiornamento sono impressionanti:

  • 95% degli utenti attivi ricevono aggiornamenti entro 24 ore.
  • 82% di successo per la consegna di aggiornamenti in tutto il mondo.
  • Un tempo di risposta medio di API di 434ms a livello globale.

La piattaforma utilizza aggiornamenti parziali, il che significa che vengono scaricati solo le modifiche. Questo approccio riduce l'uso di banda e accelera il processo di aggiornamento. Inoltre, tutto il processo di costruzione è completamente automatizzato, risparmiando tempo e sforzo.

Automazione di costruzione

Capgo funziona in modo trasparente con le principali piattaforme CI/CD, offrendo una varietà di integrazioni:

Piattaforma CI/CD Caratteristiche di integrazione Benefici
GitHub Azioni Build automatici, trigger di distribuzione Distribuzione continua
GitLab CI L'automazione dei pipeline, il controllo delle versioni Flusso di lavoro semplificato
Jenkins Flussi di lavoro personalizzati, hook di costruzione Scalabile per le imprese

La configurazione di un build automatico tipicamente costa circa €300 al mese, il che è molto più conveniente rispetto alle soluzioni tradizionali che possono arrivare fino a €6.000 all'anno.

Standard di sicurezza

Capgo pone l'accento sulla sicurezza con un robusto framework che include:

  • La crittografia end-to-end per i pacchetti di aggiornamento.
  • Gestione sicura delle chiavi.
  • Conformità con le linee guida di Apple e Google.

Caratteristiche di controllo delle versioni.

  • Opzioni di rollback istantanee.
  • Tracciamento delle versioni di distribuzione.
  • Gestione del canale di aggiornamento per le rilasci in fase di staging.

Questo framework di sicurezza è stato rigorosamente testato su centinaia di applicazioni aziendali. Per le squadre che hanno bisogno di ulteriore sicurezza, Capgo offre anche soluzioni self-hosted con configurazioni personalizzabili.

Capgo’s sistema di canali rende la distribuzione degli aggiornamenti flessibile. I sviluppatori possono mirare a specifiche gruppi di utenti con versioni diverse, perfetto per il testing beta o i rilasci graduati.

Riepilogo

Panoramica dei passaggi di costruzione.

Il codice personalizzato per la costruzione consente deployment automatizzati e coerenti utilizzando le funzioni di hook di costruzione, le variabili di ambiente e i comandi specifici della piattaforma. Questi processi creano una solida base per miglioramenti di deployment resi possibili con Capgo.

Capgo Benefici

Capgo semplifica la distribuzione, avendo già consegnato oltre 23,5 milioni di aggiornamenti su 750 app di produzione [1]. Il suo sistema di aggiornamento parziale riduce sia l'uso di banda che il tempo di distribuzione.

La piattaforma fornisce aggiornamenti veloci, ottimizzazione della prestazione globale, crittografia end-to-end per la sicurezza e un sistema di distribuzione basato su canali flessibile. Questo setup supporta gli aggiornamenti mirati, il testing beta e l'adeguamento alle linee guida degli store di app, mantenendo un solido framework di sicurezza.

Continua da Come personalizzare i script di costruzione con Capacitor CLI

Se stai utilizzando Come personalizzare i script di costruzione con Capacitor CLI 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, Integrazioni protette da Capgo per il workflow del prodotto in Integrazioni protette da Capgo, Integrazione CI/CD per il dettaglio di implementazione in Integrazione CI/CD, e Integrazione azioni protette da GitHub per il dettaglio di implementazione in Integrazione azioni protette da GitHub.

Aggiornamenti in Tempo Reale per le Applicazioni Capacitor

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 per creare un'app mobile davvero professionale.