Vai direttamente al contenuto principale

Come personalizzare i script di costruzione con Capacitor CLI

Scopri come personalizzare i tuoi script di costruzione utilizzando Capacitor CLI per deployment efficienti e aggiornamenti di app personalizzati su piattaforme.

Martin Donadieu

Martin Donadieu

Content Marketer

Come personalizzare i script di costruzione con Capacitor CLI

Capacitor CLI ti consente di personalizzare il processo di costruzione della tua app per le piattaforme iOS, Android e web. Modificando i script di costruzione, puoi:

  • Accelerare gli aggiornamenti: Invia le modifiche istantaneamente senza ritardi degli store di app.
  • Controllo delle distribuzioni: Annulla gli aggiornamenti o mira a specifiche gruppi di utenti.
  • Proteggere l'app: Utilizza l'encryption per proteggere gli aggiornamenti.
  • Optimizza le costruzioni: Regola le impostazioni per le esigenze specifiche delle piattaforme.

Panoramica rapida delle principali funzionalità:

  • 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.
  • Azioni di Costruzione: Esegui code durante le fasi specifiche del processo di costruzione.
  • Variabili di Ambiente: Semplifica i costruzioni specifiche dell'ambiente con .env file.

Capgo, uno strumento di distribuzione, migliora questo processo con aggiornamenti automatizzati, tracciamento delle versioni, e ottimizzazione della prestazione globale. Continua a leggere per imparare a configurare e personalizzare i tuoi script di costruzione per massimizzare l'efficienza.

Introduzione Capacitor Configura

Capacitor Framework Documentation Website

Procedura di costruzione predefinita in Capacitor

Capire come Capacitor gestisce la sua procedura di costruzione predefinita è fondamentale se desiderate personalizzarla efficacemente. Di seguito, ci occuperemo di analizzare la procedura 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 build specifiche per piattaforma. Ecco cosa accade durante la procedura di costruzione predefinita:

FaseDescrizioneOutput
Costruzione webCompila gli asset web utilizzando gli strumenti dei tuoi frameworkBundle web ottimizzato
Copia AssetsSposta gli asset web nelle cartelle native del piattaformaDirettori di asset specifici della piattaforma
Costruzione nativaEsegue comandi di costruzione specifici della piattaformaBinari pronti per la distribuzione
VerificaControlla l'integrità e le dipendenze della costruzioneStato e avvisi di costruzione

File di configurazione principali

Due file di configurazione chiave determinano come Capacitor gestisce le tue costruzioni:

capacitor.config.json
Questo è il file di configurazione centrale per il tuo progetto Capacitor. Imposta parametri importanti per le tue compilazioni:

{
  "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 gli asset web (ad esempio, dist).
  • plugins: Consente di configurare impostazioni specifiche dei plugin, come le opzioni per lo schermo di benvenuto.

package.json
Questo file include script di compilazione e dipendenze che influenzano il processo di compilazione:

{
  "scripts": {
    "build": "npm run build:web && cap sync",
    "build:web": "vite build",
    "cap:build": "cap build"
  }
}
  • Il webDir setting in capacitor.config.json indica a Capacitor dove localizzare gli asset web compilati per l'inclusione nelle compilazioni native.
  • Dopo aver apportato modifiche a capacitor.config.jsonPer assicurarti che i tuoi progetti nativi siano aggiornati. cap sync Per garantire che i tuoi progetti nativi siano aggiornati.

Ecco come puoi modificare questi impostazioni per personalizzare ulteriormente le tue compilazioni.

Modifica i Script di Compilazione

Potresti modificare il processo di compilazione predefinito di Capacitor per adattarlo meglio alle tue esigenze di progetto. Ecco come fare:

Impostazioni del File di Configurazione

Potresti modificare il processo di compilazione 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, inclusi hostname e permessi di navigazione.
  • android/ios: Consente impostazioni di compilazione specifiche per piattaforma, come dettagli del keystore per Android o opzioni di provisioning per iOS.

Creazione di NPM Script

Per semplificare il tuo workflow, aggiungi script personalizzati NPM al tuo 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 : Utilizza questi per compiti come la configurazione dell'ambiente o l'invio di notifiche quando il build è completato. postbuild: Comandi specifici per piattaforma per la creazione di app Android o iOS.
  • build:platformPuoi prendere l'automazione ancora più lontano aggiungendo hook di build.

Setup dei Hook di Build

Per un controllo più avanzato, utilizza i hook di build per eseguire script personalizzati __CAPGO_KEEP_0__ in punti specifici del processo di build. Ecco un esempio di setup in

For more advanced control, use build hooks to execute custom code at specific points during the build process. Here’s an example setup 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;

Validare le richieste prima che il build inizi

  • Trasformare gli asset durante il processo
  • Utilizza questi per compiti come la configurazione dell'ambiente o l'invio di notifiche quando il build è completato.
  • Attivare le notifiche in punti chiave
  • Aggiornare automaticamente i numeri di versione
  • Eseguire test automatizzati senza problemi

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

Personalizzazione avanzata della costruzione

Laddove si lavora 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 di piattaforma in modo efficace.

Variabili di ambiente

Configura le variabili di ambiente creando file separati per ogni ambiente: .env Configura poi lo script di costruzione 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

Trigger notifiche in punti chiave

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

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
    }
  }
};

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

CaratteristicaAndroidiOS
Simboli di debugProGuard file di mappingfile dSYM
Varianti di costruzionedebug, release, stagingdebug, release
Code SigningGestione del keystoreGestione dei profili di provisioning
Gestione degli assetOptimizzazione di res/drawableCataloghi degli asset

Ulteriori consigli per l'ottimizzazione dei tuoi build includono:

  • L'utilizzo di aggiornamenti parziali per risparmiare tempo durante le distribuzioni
  • La configurazione della tracciatura degli errori per identificare velocemente le problematiche
  • La creazione di sistemi di canale per le versioni di testing beta
  • L'abilitazione della 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 di Script di Costruzione & Soluzioni

Lavorando con configurazioni di costruzione personalizzate, risolvere gli errori velocemente è fondamentale per mantenere il processo di costruzione in corso senza intoppi.

Correggi Errori Comuni

Molti problemi di script di costruzione derivano da impostazioni di ambiente o da problemi di dipendenza. Ecco come affrontare alcuni dei più comuni:

Variabili di Ambiente Manenti

Se incontri un errore del tipo:

error: Cannot find environment configuration for BUILD_ENV

Puoi risolverlo creando un file .env.local in directory radice del tuo progetto. Ecco un esempio:

BUILD_ENV=development
CAPACITOR_PLATFORM=ios
BUILD_TYPE=debug

Fallimenti di Costruzione 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 ErroreMotivo ComuneSoluzione
Configurazione di firmaDettagli keystore mancantiImposta KEYSTORE_PATH e credenziali
Ambiente di costruzioneVariabili non definiteCreare file specifici per piattaforma .env Dipendenze
Disaccordi di versioneCreate platform-specific filesAggiorna e sincronizza package.json e sincronizza

Dopo aver applicato le correzioni, assicurati che le tue modifiche siano solide eseguendo test di build approfonditi.

Testo Script di Costruzione

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

  • Verifica Automatica: Esegui comandi chiave per confermare che il processo di costruzione funziona come previsto.
npm run build
npx cap sync
npx cap copy
  • Validazione dell'ambiente: Controlla le 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}`);
  }
});
  • Debugging dei script di costruzione: Aggiungi 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"
  }
}

Ulteriori consigli per la verifica:

Capgo Dashboard di aggiornamento in tempo reale dell'interfaccia __CAPGO_KEEP_0__

Capgo

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

Aggiornamenti Rapidi dell'App

Capgo’s prestazioni di aggiornamento sono impressionanti:

  • 95% degli utenti attivi ricevono aggiornamenti entro 24 ore.
  • 82% di successo per la consegna degli 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 solo le modifiche vengono scaricate. Questo approccio riduce l'uso di banda e accelera il processo di aggiornamento. Inoltre, tutto il processo di build è completamente automatizzato, risparmiando tempo e sforzo.

Automazione dei Build

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

Piattaforma CI/CDFunzionalità di integrazioneVantaggi
GitHub AzioniCostruzioni automatizzate, Trigger di distribuzioneDistribuzione continua
GitLab CIAutomazione della pipeline, Controllo delle versioniFlusso di lavoro semplificato
JenkinsFlussi di lavoro personalizzati, Hook di costruzioneScalabile per le aziende

Configurare un build automatizzato costa tipicamente 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 priorizza la sicurezza con un robusto framework che include:

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

Funzionalità di Controllo delle Versioni

  • Opzioni di rollback istantanee.
  • Tracciamento delle versioni di distribuzione.
  • La gestione dei canali 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 ulteriori misure di sicurezza, Capgo offre anche soluzioni auto-hosted con configurazioni personalizzabili.

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

Riepilogo

Panoramica dei passaggi di costruzione

Il codice personalizzato dei script di 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.

Benefici di Capgo

Capgo semplifica il deployment, avendo già consegnato con successo 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 deployment.

La piattaforma fornisce aggiornamenti veloci, ottimizzazione della prestazione globale, crittografia end-to-end per la sicurezza e un sistema di distribuzione dei canali flessibile. Questo setup supporta gli aggiornamenti mirati, i test beta e la conformità con le 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 How to Personalizzare i Script di Costruzione con Capacitor CLI per pianificare l'automazione CI/CD, connettilo con Capgo Automazione CI/CD per il flusso di lavoro del prodotto in Capgo Automazione CI/CD, Capgo Costruzioni Native per il flusso di lavoro del prodotto in Capgo Costruzioni Native, Capgo Integrazioni per il flusso di lavoro del prodotto in Capgo Integrazioni, Integrazione CI/CD per il dettaglio di implementazione in Integrazione CI/CD, e GitHub Integrazione delle Azioni per il dettaglio di implementazione in GitHub Integrazione delle Azioni.

Aggiornamenti in tempo reale per le app 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 che ti servono per creare un'app mobile veramente professionale.