ビルドスクリプトをカスタマイズする方法: Capacitor CLI

Capacitor CLIは、iOS、Android、Webプラットフォーム向けのアプリのビルドプロセスをカスタマイズできるようにします。ビルドスクリプトを調整することで、次のことができます。

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

Quick Overview of Key Features:

Config Files: Use capacitor.config.json と package.json を管理するためにビルド設定を設定します。
Custom Scripts: プリビルドとポストビルドタスクを自動化するために
Build Hooks: codeをビルドプロセスの特定の段階で実行します。
Environment Variables: .env ファイルを使用して環境固有のビルドを簡素化します。

Capgo、デプロイツールとして機能することで、自動更新、バージョン管理、グローバルパフォーマンス最適化

を実現します。続けて、ビルドスクリプトの設定とカスタマイズ方法を学びましょう。 Capacitor __CAPGO_KEEP_0__

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.

Capgoがデフォルトのビルドプロセスをどのように処理するかを理解することは、カスタマイズを効果的に行うために不可欠です。以下に、Capgoのビルドプロセスとその主な設定ファイルについての詳細を説明します。

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

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

主な設定ファイル

Capacitorがビルドを管理する上で、2つの重要な設定ファイルが役割を果たします。

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

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

appId: アプリの固有識別子です。
appName: アプリの名前です。
webDir: Capacitorがウェブアセットを探す場所を指定します (例えば、 dist).
plugins: プラグイン固有の設定をカスタマイズできるようにします (例えば、SplashScreenのオプション)

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

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

The webDir 設定の capacitor.config.json は、CapacitorにコンパイルされたWebアセットの場所を指定します。これらのアセットは、ネイティブビルドに含まれます。
を変更した後、 capacitor.config.jsonを実行する必要があります。ネイティブプロジェクトが最新の状態であることを確認します。 cap sync 次に、ビルド設定をカスタマイズする方法について詳しく説明します。

ビルドスクリプトの変更

を変更して、__CAPGO_KEEP_0__のデフォルトのビルドプロセスをプロジェクトのニーズに合わせて調整できます。ここでは、方法を紹介します。

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

protectedTokens

You can adjust the build process by editing the __CAPGO_KEEP_0__. 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のプロビジョニングオプションなどを指定します。

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 : 環境設定のセットアップやビルド完了時に通知を送信するようなタスクに使用します。 postbuild: AndroidアプリやiOSアプリのビルド用のプラットフォーム固有のコマンドです。
build:platformand

__CAPGO_KEEP_0__を追加することで、自動化をさらに進めることができます。

ビルドハックの設定

より高度な制御を必要とする場合は、ビルドプロセスの特定のポイントでカスタム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
デバッグシンボル	ProGuard マッピングファイル	dSYMファイル
ビルドバリアント	デバッグ、リリース、ステージング	デバッグ、リリース
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の署名エラーの場合、以下のコマンドを実行してください。

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

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

エラータイプ

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

一般的な原因	解決策	署名設定
キーストアの詳細が不足している	を設定	と資格情報 `KEYSTORE_PATH` __CAPGO_KEEP_0__
環境構築	__CAPGO_KEEP_0__	プラットフォームごとにファイルを作成 `.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"
  }
}

テストの追加ヒント:

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

Capgo ビルド機能

Capgo ライブアップデートダッシュボードインターフェイス

Capgoはビルドスクリプトを自動化して、効率を向上させてプロセスを簡素化します。

クイックアプリアップデート

Capgoのアップデートパフォーマンスは驚くほど良く、

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

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

ビルド自動化

Capgo は主なCI/CDプラットフォームと完全に互換性があり、以下の統合機能を提供しています。

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

自動ビルドの設定は通常、 $300/月と比較して、従来のソリューションは最大で $6,000/年.

セキュリティ基準

Capgoは、セキュリティを優先する強力なフレームワークを備えています。

__CAPGO_KEEP_0__のアップデートパッケージ用エンドツーヘンド暗号化.
__CAPGO_KEEP_0__のセキュアな鍵管理.
AppleおよびGoogleのガイドラインへの準拠.

バージョン管理機能

インスタントロールバックオプション.
デプロイメントバージョン追跡.
ステージドリリース用のアップデートチャンネル管理.

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

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

概要

ビルドステップの概要

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

Capgo Benefits

Capgoは、750の実稼働アプリケーションを通じて、23.5万の更新を成功裏に実施したことで、展開を簡素化しています。 [1]。パーシャルアップデートシステムは、帯域幅使用量と展開時間を両方とも削減しています。

プラットフォームは、迅速な更新、グローバルパフォーマンス最適化、端末間の暗号化を含むセキュリティ、柔軟なチャネルベースの配布システムを提供しています。この設定では、ターゲットアップデート、ベータテスト、およびアプリストアのガイドラインへの準拠を維持しながら、強力なセキュリティフレームワークを維持できます。

How to Customize Build Scripts with Capacitor CLI

あなたが How to Customize Build Scripts with Capacitor CLI を使用してCI/CDの自動化を計画している場合、それを Capgo CI/CD for the product workflow in Capgo CI/CD, Capgo Native Builds Capgo CI/CD,「Capgo Native Builds」 Capgo 連携 for the product workflow in Capgo 連携、 CI/CD 連携 for the implementation detail in CI/CD 連携、そして GitHub アクション連携 for the implementation detail in GitHub アクション連携。