メインコンテンツにスキップ

How to Customize Build Scripts with Capacitor CLI

Learn how to customize your build scripts using Capacitor CLI for efficient deployments and tailored app updates across platforms.

マーティン・ドナディュー

マーティン・ドナディュー

コンテンツマーケター

How to Customize Build Scripts with Capacitor CLI

Capacitor CLIは、iOS、Android、Webプラットフォーム向けのアプリケーションのビルドプロセスをカスタマイズすることができます。ビルドスクリプトを調整することで、以下のことが実現できます。

  • 速度を上げる:アプリストアの遅延なしで即時変更をプッシュする。
  • デプロイの制御:更新を戻すか、特定のユーザーグループにターゲットする。
  • アプリのセキュリティ:更新を暗号化して保護する。
  • ビルドの最適化:プラットフォーム固有のニーズに合わせて設定を調整する。

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

  • 設定ファイルcapacitor.config.jsonpackage.json __CAPGO_KEEP_0__を管理する設定を管理する。
  • Custom Scripts: __CAPGO_KEEP_0__を追加して、自動化のためにprebuildとpostbuildタスクを設定します。
  • Build Hooks : codeを特定のビルドプロセスの段階で実行します。
  • Environment Variables : __CAPGO_KEEP_0__を使用して、環境固有のビルドを簡素化します。 .env ファイル

Capgo、デプロイメントツールとして、__CAPGO_KEEP_0__を強化して、自動更新、バージョン追跡、およびグローバルパフォーマンス最適化を実現します。続けて、ビルドスクリプトの設定とカスタマイズ方法を学びましょう。 __CAPGO_KEEP_0____CAPGO_KEEP_0__

Introducing Capacitor 設定

Capacitor フレームワーク ドキュメント ウェブサイト

Default Build Process in Capacitor

Capacitor がデフォルトのビルドプロセスをどのように処理するかを理解することは、カスタマイズを効果的に行うには不可欠です。以下では、Capacitor CLI のビルドプロセスとその重要な設定ファイルを分解します。

標準ビルド手順

Capacitor は、ステップごとにウェブアプリをプラットフォーム固有のビルドに変換します。デフォルトのビルドプロセスにおける次のことが起こります:

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

Main Config Files

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: A unique identifier for your app.
  • appName: The name of your app.
  • webDir: Specifies where Capacitor should look for the web assets (e.g., dist).
  • plugins: Allows you to configure plugin-specific settings, like SplashScreen options.

package.json
This file includes build scripts and dependencies that influence the build process:

{
  "scripts": {
    "build": "npm run build:web && cap sync",
    "build:web": "vite build",
    "cap:build": "cap build"
  }
}
  • The webDir setting in capacitor.config.json CapacitorにコンパイルされたWebアセットの場所を指定します。
  • __CAPGO_KEEP_0__を変更した後は、 capacitor.config.jsonを実行してください。 cap sync これにより、ネイティブプロジェクトが更新されます。

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

ビルドスクリプトの変更

Capacitorのデフォルトのビルドプロセスを変更して、プロジェクトのニーズに合わせて調整できます。以下の方法で行います。

設定ファイルの変更

ビルドプロセスを変更するには、 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のプロビジョニングオプションなど。

Creating NPM Scripts

ワークフローを簡素化するには、カスタム 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 : ビルドが完了したときに環境をセットアップしたり通知を送ったりするようなタスクに使用してください。 postbuild: AndroidアプリまたはiOSアプリをビルドするためのプラットフォーム固有のコマンドです。
  • build:platform自動化をさらに進めるには、ビルドハックを追加してください。

Build Hooks Setup

ビルドハックを使用すると、ビルドプロセス中の特定のポイントでカスタム __CAPGO_KEEP_0__ を実行できます。例えば、

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;

__CAPGO_KEEP_0__

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

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

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

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

環境変数

環境変数を設定するには、各環境用に別々のファイルを作成し、 .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
デバッグシンボル ProGuard マッピングファイル dSYMファイル
ビルドバリアント debug, release, staging debug, release
Code Signing キーストア管理 プロビジョニング プロファイル
アセット管理 res/drawable 最適化 アセット カタログ

ビルドの最適化に役立つ追加のヒントは次のとおりです。

  • デプロイメントの時間を節約するためにパーシャル アップデートを使用する
  • エラー トラッキングを設定して、問題を迅速に特定する
  • ベータ テスト用のバージョンを作成するためのチャンネル システムを設定する
  • エンドツーエンド暗号化を有効にして安全な配布を実現

分析と安全な更新と組み合わせると、Capgoのようなツールと組み合わせると、デプロイプロセスに対するコントロールが増えます [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
__CAPGO_KEEP_0__ 一般的な原因 解決策
署名設定 キーストアの詳細が欠落している 設定 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"
  }
}

テストの追加ヒント:

Capgo 機能を構築する

Capgo ライブ更新ダッシュボードインターフェイス

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

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

Capgoの更新パフォーマンスは驚くほど優秀です:

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

プラットフォームは部分更新を使用しており、変更のみがダウンロードされます。このアプローチにより、帯域幅使用量が減少し、更新プロセスが高速化されます。さらに、ビルド全体のプロセスは完全に自動化され、時間と労力が節約されます。

ビルド自動化

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

CI/CDプラットフォーム 統合機能 利点
GitHubアクション 自動ビルド、デプロイトリガー 継続的なデプロイ
GitLab CI パイプライン自動化、バージョン管理 ストリーミングされたワークフロー
Jenkins カスタムワークフロー、ビルドホック 企業向けに拡張可能

自動ビルドの設定は通常、 月$300、従来のソリューションと比べると、年間$6,000 セキュリティ基準.

__CAPGO_KEEP_0__は、以下のセキュリティ強化機能を備えた堅牢なフレームワークでセキュリティを優先しています。

Capgo prioritizes security with a robust framework that includes:

  • セキュアなキー管理。
  • AppleおよびGoogleのガイドラインへの準拠。
  • バージョン管理機能

__CAPGO_KEEP_0__

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

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

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

概要

ビルドステップの概要

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

Capgoの利点

Capgoは、750のプロダクションアプリケーションを通じて成功した23.5万回のアップデートを実現し、デプロイメントを簡素化しています。 [1]部分アップデートシステムは、帯域幅使用量とデプロイメント時間を両方とも削減します。

このプラットフォームは、迅速なアップデート、グローバルパフォーマンスの最適化、端末間の暗号化を含むセキュリティを提供します。また、柔軟なチャンネルベースの配布システムも提供し、ターゲットアップデート、ベータテスト、アプリストアのガイドラインへの準拠をサポートします。

CapacitorからCLIまでの続き

__CAPGO_KEEP_0__が使用している場合 CapacitorからCLIまでの続き CI/CDの自動化計画に使用している場合は、__CAPGO_KEEP_0__ CI/CD Capgo CI/CDの製品ワークフロー Capgo Native Buildsの製品ワークフロー Capgo Integrationsの製品ワークフロー for the product workflow in Capgo Native Builds, Capgo Integrations Capgoが使用している場合 __CAPGO_KEEP_0__が使用している場合 __CAPGO_KEEP_0__が使用している場合 GitHub Actions Integration GitHub Actions Integrationの実装詳細について

Capacitorアプリのリアルタイム更新

Capgoを使用して、ウェブ層のバグが生じた場合に、修正をアプリストアの承認待ちの日数を待たずに配信する。ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビュー経路で残る。

今すぐ始める

ブログの最新記事

Capgoは、プロフェッショナルなモバイルアプリを作成するために必要な最良の洞察を提供します。