メインコンテンツにジャンプ

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 を使用してビルド設定を管理します。
  • カスタムスクリプト: automation用のprebuildとpostbuildタスクを追加します。
  • ビルドホック: codeをビルドプロセスの特定の段階で実行します。
  • 環境変数: 環境に応じたビルドを簡素化する .env ファイル

Capgo、デプロイツールとして機能する、自動更新、バージョン追跡、グローバルパフォーマンス最適化を含む 自動化自動化

自動化 Capacitor 設定

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

デフォルトのビルドプロセス in Capacitor

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

標準ビルドステップ

Capacitor は、ステップごとにウェブアプリをプラットフォーム固有のビルドに変換するプロセスを使用します。 ここでは、デフォルトのビルドプロセスの詳細を説明します。

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

メインの設定ファイル

2 つの重要な設定ファイルが、Capacitor がビルドをどのように処理するかを決定します:

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

{
  "appId": "com.example.app",
  "appName": "MyApp",
  "webDir": "dist",
  "bundledWebRuntime": false,
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 3000
    }
  }
}
  • appId: アプリの固有識別子です。
  • appName: アプリの名前です。
  • webDir: Capacitorがウェブアセットを探す場所を指定します。(例えば、) dist).
  • plugins: スプラッシュスクリーンなどのプラグイン固有の設定をカスタマイズできます。

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

{
  "scripts": {
    "build": "npm run build:web && cap sync",
    "build:web": "vite build",
    "cap:build": "cap build"
  }
}
  • ビルドの webDir 設定は__CAPGO_KEEP_0__がコンパイルされたウェブアセットを検索する場所を指定します。 capacitor.config.json tells Capacitor where to locate your compiled web assets for inclusion in the native builds.
  • __CAPGO_KEEP_0__プロジェクトの基本設定ファイルです。ビルドの重要なパラメータを設定します。 capacitor.config.json、更新する必要があります。 cap sync プロジェクトを最新の状態に保つためには、常に最新の状態に保つ必要があります。

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

ビルドスクリプトの変更

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用のプロビジョニングオプションなどを許可します。

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ビルドの自動化をさらに進めるには、ビルドホックを追加することができます。

ビルドホックの設定

ビルドプロセスにおける特定のポイントでカスタム__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'
          }
        }
      }
    }
  }
});

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

Environment Variables

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

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

機能AndroidiOS
デバッグシンボルProGuard マッピングファイルdSYMファイル
ビルドバリアントデバッグ、リリース、ステージングデバッグ、リリース
Code Signing__CAPGO_KEEP_0__管理プロビジョニングプロファイル管理
資産管理res/drawable最適化資産カタログ

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

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

分析と安全なアップデート用にツールと組み合わせると、Capgoを使用して、デプロイメントプロセスをより制御することができます [1].

ビルドスクリプトの問題と解決策

カスタムビルド構成で作業している場合、エラーを迅速に解決することは、ビルドプロセスを順調に進めるために不可欠です。

共通のエラーの修正

多くのビルドスクリプトの問題は、環境設定または依存関係の問題から生じています。ここでは、共通の問題を解決する方法を紹介します。

環境変数の欠如

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

error: Cannot find environment configuration for BUILD_ENV

これを解決するには、プロジェクトのルートディレクトリにファイルを作成してください。ここに例があります。 .env.local プラットフォーム固有のビルド失敗

BUILD_ENV=development
CAPACITOR_PLATFORM=ios
BUILD_TYPE=debug

Androidの署名エラーの場合、以下のコマンドを使用してください。

iOSのプロビジョニングプロファイルの問題の場合、以下を試してください。

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

エラーの種類

npx cap build ios --configuration=release --type=development
__CAPGO_KEEP_0__Common CauseSolution
Signing ConfigurationMissing keystore detailsSet KEYSTORE_PATH and credentials
Build EnvironmentUndefined variablesCreate platform-specific .env files
DependenciesVersion mismatchesアップデート package.json 同期

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

テスト ビルド スクリプト

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

  • 自動検証: ビルドプロセスが予想どおりに動作することを確認するために、重要なコマンドを実行してください。
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"
  }
}

テストの追加ヒント

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

Capgo ビルド機能

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

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

Quick アプリ更新

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

  • 24時間以内に更新を受け取るアクティブユーザーが95% 世界中で更新配信の成功率82%
  • グローバルで平均__CAPGO_KEEP_0__の応答時間は 432ms
  • An average API response time of ビルド自動化.

__CAPGO_KEEP_0__は主なCI/CDプラットフォームと完全に統合され、多くの統合オプションを提供しています:

__CAPGO_KEEP_0__

Capgo

CI/CD PlatformIntegration機能__CAPGO_KEEP_0__アクション
GitHub Actions継続的デプロイGitLab CI
パイプライン自動化、バージョン管理効率的なワークフローJenkins
カスタムワークフロー、ビルドハック大規模企業向け拡張性のあるシステム継続的インテグレーション

自動ビルドを設定するには通常、 $300/月は、従来の解決策と比較して、 $6,000/年.

セキュリティ基準

Capgo

  • セキュリティを優先する強力なフレームワークを含む
  • アップデートパッケージのエンドツーエンド暗号化。
  • 安全なキー管理。

AppleとGoogleのガイドラインへの準拠。

  • バージョン管理機能
  • インスタントロールバックオプション。
  • __CAPGO_KEEP_0__のリリースチャンネル管理をアップデートします。

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

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

概要

ビルドステップの概要

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

Capgoの利点

Capgoは、750のプロダクションアプリケーションを通じて、23.5百万回の更新を成功裏に配信しました。 [1]部分的な更新システムは、帯域幅使用量とデプロイメント時間を両方とも削減します。

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

CLIから続けて、Capacitorでビルドスクリプトをカスタマイズする方法について学びましょう。

__CAPGO_KEEP_0__を使用している場合 How to Customize Build Scripts with Capacitor CLI CI/CD自動化を計画するには、 Capgo CI/CD 製品ワークフローにおけるCapgo CI/CDの Capgoネイティブビルド 製品ワークフローにおけるCapgoネイティブビルドの Capgo統合 製品ワークフローにおけるCapgo統合の CI/CD統合 CI/CD統合の実装詳細 GitHubアクション統合 GitHubアクション統合の実装詳細

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

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

今すぐ始める

ブログの最新記事

Capgo を使用すると、プロフェッショナルなモバイル アプリを作成するために必要な最良の洞察を得ることができます。