How to Customize Build Scripts with Capacitor CLI

Capacitor CLI lets you customize your app’s build process for iOS, Android, and web platforms. By tweaking build scripts, you can:

アップデートを高速化する: アプリストアの遅延なしで即時変更を反映させることができます。
デプロイを制御する: 更新をロールバックしたり、特定のユーザーグループにターゲットを絞ったりできます。
アプリをセキュアにする: 更新を暗号化して保護します。
ビルドを最適化する: プラットフォーム固有のニーズに合わせて設定を調整します。

主な機能のクイックオーバー:

構成ファイル: capacitor.config.json と package.json ビルド設定を管理する。
カスタムスクリプト: ビルド前とビルド後のタスクを追加して自動化します。
ビルドハンドル: code をビルドプロセスの特定の段階で実行します。
環境変数: 環境に応じたビルドを簡素化するために .env ファイル

: Capgo、デプロイメントツールとして機能し、自動更新、バージョン追跡、グローバルパフォーマンス最適化を提供します。 automated updates, version tracking, and global performance optimization. Keep reading to learn how to set up and customize your build scripts for maximum efficiency.

__CAPGO_KEEP_0__ Capacitor Capacitor

Capacitor Framework Documentation Website

Default Build Process in Capacitor

Understanding how Capacitor handles its default build process is crucial if you want to customize it effectively. Below, we’ll break down the Capacitor CLI’s build process and its key configuration files.

Capacitor

Capacitor uses a step-by-step process to transform your web app into platform-specific builds. Here’s what happens during the default build process:

Capacitor	Capacitor	Capacitor
Web ビルド	フレームワークツールを使用してWebアセットをコンパイルします	最適化されたWebバンドル
アセットのコピー	Webアセットをネイティブプラットフォームのフォルダに移動	プラットフォーム固有のアセットディレクトリ
ネイティブビルド	プラットフォーム固有のビルドコマンドを実行	展開可能なバイナリ
検証	ビルドの整合性と依存関係を確認	ビルドの状態と警告

メイン設定ファイル

Two key configuration files shape how Capacitor handles your builds:

capacitor.config.json
Capacitor プロジェクトのコア設定ファイルです。ビルドの重要なパラメーターを設定します:

{
  "appId": "com.example.app",
  "appName": "MyApp",
  "webDir": "dist",
  "bundledWebRuntime": false,
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 3000
    }
  }
}

appId: アプリのユニークな識別子です。
appName: アプリの名前です。
webDir: Specifies where Capacitor should look for the web assets (e.g., dist).
plugins: プラグイン固有の設定を構成できます (例えば、SplashScreen のオプション)。

package.json
このファイルにはビルドスクリプトと依存関係が含まれ、ビルドプロセスに影響を与えます:

{
  "scripts": {
    "build": "npm run build:web && cap sync",
    "build:web": "vite build",
    "cap:build": "cap build"
  }
}

設定 webDir 設定 capacitor.config.json Capacitor CLIでは、CapacitorにコンパイルされたWebアセットの保存場所を指定します。
変更を加えた後は capacitor.config.jsonを実行してください。 cap sync nativeプロジェクトが最新の状態であることを確認するために

次に、ビルド設定をカスタマイズする方法について詳しく説明します。

ビルドスクリプトの変更

You can tweak Capacitor’s default build process to better suit your project needs. Here’s how:

設定ファイルの変更

ビルドプロセスを変更するには、 capacitor.config.json ファイルを編集してください。以下に例の設定を示します。

{
  "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
  }
}

以下の設定を変更できます。

webDir:コンパイルされたWebアセットの保存場所を指定します。
server: 開発サーバーの設定、ホスト名とナビゲーション許可を含みます。
android/ios: プラットフォーム固有のビルド設定、Androidのキーストア詳細やiOSのプロビジョニングオプションなどを許可します。

Capacitor CLIでNPMスクリプトを作成する

ワークフローを簡素化するには、カスタムNPMスクリプトをファイルに追加してください。ここに例があります。 package.json ファイルに

{
  "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 ページ/エリア: Capgoマーケティングウェブサイト。役割: 短いUIラベルまたはナビゲーションアイテム。見られる場所: page trust.astro。メッセージキー `and` (And)。 postbuild: ビルドが完了したときに環境を設定したり、通知を送ったりするようなタスクに使用してください。
build:platform: AndroidアプリまたはiOSアプリをビルドするためのプラットフォーム固有のコマンドです。

自動化をさらに進めるには、ビルドハックを追加してください。

ビルドハックの設定

より高度な制御を実現するには、ビルドハックを使用してビルドプロセスの特定のポイントでカスタムcodeを実行してください。ここに例があります。 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;

ビルドハックを使用すると、以下のことができます。

ビルド開始前に要件を検証する
アセットをプロセス中に変換する
重要なポイントで通知をトリガーする
バージョン番号を自動的に更新する
自動テストをスムーズに実行する

このアプローチは、ビルドライフサイクルの全体に柔軟性と制御を提供します。

高度なビルドカスタマイズ

大規模プロジェクトで作業している場合、ビルドプロセスを微調整すると大きな違いを生み出します。ここでは、環境固有のビルドとプラットフォームカスタマイズを効果的に管理する方法について説明します。

環境変数

環境変数を設定するには、各環境用に別々の .env ファイルを作成します:

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

次に、ビルドスクリプトを環境に応じて適切なファイルを読み込ませるように設定します:

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

これらの設定をさらに調整して、プラットフォーム固有の要件に合わせることができます。

プラットフォーム固有のビルド

AndroidとiOS用のビルドをカスタマイズするには、以下の構造を使用してください。

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

これらの設定により、各プラットフォーム用にビルドをカスタマイズし、スムーズなデプロイを実現できます。

機能	Android	iOS
デバッグシymbol	ProGuard マッピングファイル	dSYMファイル
ビルドバリアント	デバッグ、リリース、ステージング	デバッグ、リリース
Code Signing	キーストア管理	プロビジョニングプロファイル
アセット管理	res/drawable 最適化	アセットカタログ

ビルドの最適化に関する追加のヒントには

デプロイメントの時間を節約するために部分的な更新を使用する
エラー追跡を設定して、問題を迅速に特定する
ベータテスト用のバージョンを管理するためのチャネルシステムを作成する
エンドツーエンド暗号化の有効化

When paired with tools like Capgo for analytics and secure updates, these techniques give you more control over your deployment process [1].

ビルドスクリプトの問題と修正

カスタムビルド構成と一緒に作業する場合、エラーを迅速に解決することは、ビルドプロセスを正常に動作させるために不可欠です。

一般的なエラーの修正

環境設定または依存関係の問題が多くのビルドスクリプトの問題の原因です。ここでは、一般的な問題の解決方法を紹介します。

環境変数の欠如

次のようなエラーが発生した場合:

error: Cannot find environment configuration for BUILD_ENV

エラーを解決するには、プロジェクトのルートディレクトリにファイルを作成します。ここでは、例を示します。 .env.local プラットフォーム固有のビルド失敗

BUILD_ENV=development
CAPACITOR_PLATFORM=ios
BUILD_TYPE=debug

Androidの署名エラーの場合、次のコマンドを使用します:

__CAPGO_KEEP_0__

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

iOS 設定プロファイルの問題の場合、以下を試してください:

npx cap build ios --configuration=release --type=development

エラーの種類	一般的な原因	解決策
署名設定	キーストアの詳細が欠落している	設定 `KEYSTORE_PATH` と資格情報
ビルド環境	未定義の変数	プラットフォーム固有の `.env` ファイルを作成する
依存関係	バージョン不一致	更新 `package.json` と同期

修正を適用した後、変更が確実であることを確認するには、徹底的なビルドテストを実行してください。

ビルドスクリプトのテスト

エラーが解決されたら、次の手順でビルドスクリプトを検証してください。

自動検証: ビルドプロセスが予想どおり動作することを確認するために、重要なコマンドを実行します。

npm run build
npx cap sync
npx cap copy

環境検証: ビルドを開始する前に欠落している環境変数を確認します。

const requiredVars = ['BUILD_ENV', 'KEYSTORE_PATH'];
requiredVars.forEach(varName => {
  if (!process.env[varName]) {
    throw new Error(`Missing required env var: ${varName}`);
  }
});

ビルドスクリプトのデバッグ: ビルド中に潜在的な問題をキャッチするための詳細なスクリプトを追加します。

{
  "scripts": {
    "build:debug": "NODE_ENV=development npx cap build --verbose",
    "build:release": "NODE_ENV=production npx cap build --verbose"
  }
}

テストの追加ヒント:

使用コンテナドッカー
ビルドを分離する。
構成ファイルを検証する前にプロセスを開始します。複数の Node.js
バージョンでテストします。
プラットフォーム固有の要件が満たされていることを確認します。

Capgo 機能の構築

Capgo Live Update ダッシュボードインターフェース

Capgoは、自動展開を含むビルドスクリプトを次のレベルに引き上げ、効率を高め、プロセスを簡素化します。

迅速なアプリケーション更新

Capgoの更新パフォーマンスは驚くほど優れています:

95%のアクティブユーザー 24時間以内に更新を受け取る
82%の成功率 世界中で更新を配信する
平均APIの応答時間は 世界中で434ms.

プラットフォームは部分的な更新を使用し、変更のみをダウンロードするため、帯域幅の使用を削減し、更新プロセスを高速化します。さらに、ビルド全体のプロセスは完全に自動化され、時間と労力を節約します。

ビルド自動化

Capgo は主なCI/CDプラットフォームと組み合わせて、さまざまな統合を提供します:

CI/CDプラットフォーム	統合機能	利点
GitHub Actions	__CAPGO_KEEP_0__ アクション	自動ビルド、デプロイトリガー
継続的なデプロイ	GitLab CI	パイプライン自動化、バージョン管理
フローを簡素化するワークフロー	カスタムワークフロー、ビルドハック	企業向けに拡張可能

自動ビルドの設定は通常、 1 か月あたり 300 ドル従来のソリューションと比べると、 1 年あたり 6,000 ドル.

セキュリティ基準

Capgo は、以下のセキュリティ強化機能を提供します。

アップデートパッケージのエンドツーワン暗号化。
安全な鍵管理。
Apple と Google のガイドラインへの準拠。

バージョン管理機能

即時ロールバック機能。
デプロイメントバージョン管理。
ステージングリリース用のアップデートチャンネル管理。

このセキュリティフレームワークは、数百の企業アプリケーションを横断して徹底的にテストされています。追加のセキュリティが必要なチームには、カスタマイズ可能な構成とともに自社ホストのソリューションもCapgoが提供しています。

Capgoのチャンネルシステムは、更新の配布を柔軟にすることができます。開発者は、特定のユーザーグループに異なるバージョンをターゲットにすることができ、ベータテストや段階的なロールアウトに適しています。

概要

ビルドステップの概要

カスタムビルドスクリプトは、ビルドホック、環境変数、プラットフォーム固有のコマンドを利用して、自動化されたおよび一貫したデプロイメントを実現します。これらのプロセスは、Capgoを利用して可能になるデプロイメントの改善の基盤を形成します。

Capgoの利点

Capgoは、750のプロダクションアプリケーションを通じて成功した23.5万回のアップデートを配信してきました。部分的なアップデートシステムは、帯域幅の使用量とデプロイメント時間を削減します。 [1]プラットフォームは、迅速なアップデート、グローバルパフォーマンスの最適化、端末間の暗号化を提供します。また、柔軟なチャンネルベースの配布システムも提供し、ターゲットアップデート、ベータテスト、アプリストアのガイドラインへの準拠に適しています。

セキュリティフレームワークは、数百の企業アプリケーションを横断して徹底的にテストされています。

Keep going from How to Customize Build Scripts with Capacitor CLI

Capacitor CLIを使用している場合 How to Customize Build Scripts with Capacitor CLI Capacitor CLIをCI/CD自動化に接続する Capgo CI/CD for the product workflow in Capgo CI/CD, Capgo Native Builds for the product workflow in Capgo Native Builds, Capgo Integrations for the product workflow in Capgo Integrations, CI/CD統合 CI/CD統合の実装詳細 GitHub アクション統合 GitHub アクション統合の実装詳細について。