Vai direttamente al contenuto principale

Come personalizzare i script di costruzione con Capacitor CLI

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

Martin Donadieu

Martin Donadieu

Content Marketer

Come personalizzare i script di costruzione con Capacitor CLI

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

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

Panoramica rapida delle principali funzionalità:

  • File di configurazione: Utilizza __CAPGO_KEEP_0__ e capacitor.config.json and package.json gestire le impostazioni di costruzione.
  • Scriiti personalizzati: Aggiungi compiti di pre-costruzione e post-costruzione per l'automazione.
  • Hook di costruzione: Esegui code durante le fasi specifiche del processo di costruzione.
  • Variabili di ambiente: Semplifica le costruzioni specifiche dell'ambiente con .env file.

Capgo, uno strumento di distribuzione, migliora questo processo con aggiornamenti automatici, 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 Documentazione del Sito Web

Processo di Costruzione Predefinito in Capacitor

Capire come Capacitor gestisce il suo processo di costruzione predefinito è fondamentale se desiderate personalizzarlo efficacemente. Di seguito, ci occuperemo di analizzare il processo di costruzione e le chiavi dei file di configurazione 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 accade durante il processo di costruzione predefinito:

FaseDescrizioneOutput
Costruisci WebCompila gli asset web utilizzando gli strumenti del tuo frameworkBundle web ottimizzato
Copia AssetsSposta gli asset web nelle cartelle delle piattaforme nativeCartelle di asset specifiche della piattaforma
Costruisci NativoEsegue comandi di costruzione specifici della piattaformaBinari pronti per la distribuzione
VerificaControlla l'integrità e le dipendenze del costruitoStato e avvisi di costruzione

File di Configurazione Principali

Two key configuration files shape how Capacitor handles your builds:

capacitor.config.json
This is the core configuration file for your Capacitor project. It sets important parameters for your builds:

{
  "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: Specifies where Capacitor should look for the web assets (e.g., dist).
  • plugins: Consente di configurare impostazioni specifiche dei plugin, come ad esempio 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 informa Capacitor dove trovare i tuoi asset web compilati per l'inclusione nei build nativi.
  • Dopo aver apportato modifiche a capacitor.config.json, è necessario eseguire cap sync per assicurarsi che i progetti nativi siano aggiornati.

Proseguendo, esploreremo come puoi modificare questi impostazioni per personalizzare i build ancora di più.

Modifica dei Script di Build

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

Impostazioni del File di Configurazione

Puoi modificare il processo di build 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 autorizzazioni di navigazione.
  • android/ios: Consente impostazioni di costruzione specifiche per piattaforma, come dettagli del keystore per Android o opzioni di provisioning per iOS.

Creazione di NPM Scripts

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 e postbuild: Utilizza questi per compiti come la configurazione dell'ambiente o l'invio di notifiche quando il build è completato.
  • build:platform: Comandi specifici per piattaforma per la costruzione di app Android o iOS.

Puoi prendere l'automazione ancora più lontano aggiungendo script di build.

Setup di Build Hooks

Per un controllo più avanzato, utilizza gli hook di build per eseguire script personalizzati code in punti specifici del processo di costruzione. Ecco un esempio di 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;

Con gli hook di build, puoi:

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

Questa approccio ti offre maggiore flessibilità e controllo sul ciclo di vita della costruzione

Personalizzazione avanzata della costruzione

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 dei dispositivi in modo efficace

Variabili di ambiente

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

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

__CAPGO_KEEP_0__

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

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

Costruzioni specifiche della piattaforma

Per personalizzare le costruzioni per Android e iOS, utilizza 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 ti 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'uso di aggiornamenti parziali per risparmiare tempo durante le distribuzioni
  • La configurazione della tracciatura degli errori per identificare velocemente gli issue
  • La creazione di sistemi di canali per le versioni di testing beta
  • Abilitando la crittografia end-to-end per una distribuzione sicura

Quando associato 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

Quando si lavora con configurazioni di costruzione personalizzate, risolvere gli errori velocemente è cruciale per mantenere il processo di costruzione in esecuzione

Risolve Problemi Comuni

Molti problemi di script di costruzione derivano da impostazioni di ambiente o 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 .env.local file nella directory radice del tuo progetto. Ecco un esempio:

BUILD_ENV=development
CAPACITOR_PLATFORM=ios
BUILD_TYPE=debug

Fallimenti di Costruzione Specifici della Piattaforma

Per gli 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 ErroreCausa ComuneSoluzione
Configurazione di firmaDettagli keystore mancantiImposta KEYSTORE_PATH e credenziali
Ambiente di costruzioneVariabili non definiteCrea file specifici per piattaforma .env file
DipendenzeIncongruenze di versioneAggiorna e sincronizza package.json e sincronizza

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

Test dei script di build

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

  • Verifica automatica: Esegui comandi chiave per confermare che il processo di build funziona come previsto.
npm run build
npx cap sync
npx cap copy
  • Validazione dell'ambiente: Controlla le variabili di ambiente mancanti prima di avviare il build.
const requiredVars = ['BUILD_ENV', 'KEYSTORE_PATH'];
requiredVars.forEach(varName => {
  if (!process.env[varName]) {
    throw new Error(`Missing required env var: ${varName}`);
  }
});
  • Debug dei script di build: 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 prova:

  • Usa i container Docker per isolare le costruzioni. Verifica i file di configurazione prima di avviare il processo.
  • Prova con diverse versioni di
  • Node.js . Conferma che sono soddisfatte le richieste specifiche della piattaforma.
  • Tieni d'occhio le prestazioni della costruzione per eventuali miglioramenti.
  • __CAPGO_KEEP_0__

Capgo Sviluppa Funzionalità

Capgo Dashboard di Aggiornamento in Tempo Reale

Capgo porta i script di build al livello successivo con il deployment automatizzato, 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 degli aggiornamenti in tutto il mondo.
  • Un tempo di risposta API medio di 434ms a livello globale.

La piattaforma utilizza aggiornamenti parziali, il che significa che solo le modifiche vengono scaricate. Questa 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 processi di costruzione

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

Piattaforma CI/CDCaratteristiche di integrazioneVantaggi
GitHub AzioniCostruzione automatica, Trigger di distribuzioneDistribuzione continua
GitLab CIAutomazione della pipeline, Controllo delle versioniFlusso di lavoro semplificato
JenkinsFlussi di lavoro personalizzati, Hook di costruzioneScalabile per le aziende

La configurazione di un build automatizzato tipicamente costa circa $300 al meseche è 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:

  • Crittografia 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 istantaneo.
  • Tracciamento della versione 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 ulteriori misure di sicurezza, Capgo offre anche soluzioni auto-hosted con configurazioni personalizzabili.

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

Riepilogo

Panoramica dei passaggi di costruzione

Il sistema di script di costruzione personalizzati consente deployment automatizzati e coerenti utilizzando le funzionalità 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.

Il platform 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 aggiornamenti mirati, testing beta e conformità con le linee guida degli store di app, mantenendo un solido framework di sicurezza.

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.

Inizia subito

Ultimi articoli dal nostro Blog

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