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

How to Customize Build Scripts with Capacitor CLI

Capacitor CLIを使用してビルドスクリプトをカスタマイズする方法を学びましょう。効率的なデプロイメントとプラットフォームに合わせたアプリケーションアップデートを実現するために、Capacitor CLI を活用してください。

How to Customize Build Scripts with Capacitor CLI

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

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

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

  • 設定ファイル: 使用 capacitor.config.json と package.json ビルド設定を管理する
  • カスタムスクリプト: プリビルドとポストビルドタスクを追加して自動化
  • ビルドホック: code をビルドプロセスの特定のステージで実行
  • 環境変数: 環境固有のビルドを簡素化する .env files.

CapgoCapacitor CLIを使用してビルドスクリプトをカスタマイズする方法 オートメーションアップデートバージョン管理、トラッキング、グローバルパフォーマンス最適化。続きましょう。

「紹介」 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は、ステップごとにウェブアプリをプラットフォーム固有のビルドに変換します。 ここでは、デフォルトのビルドプロセスで何が起こるのかを説明します。

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

主な設定ファイル

Capacitorのビルドを管理する2つの重要な設定ファイルがあります。

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: アプリの固有の識別子です。
  • appName: アプリの名前です。
  • webDirCapacitorは、ウェブアセット(例:CSSファイルやJavaScriptファイル)をどこから取得するかを指定します。 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
  • にコンパイルされたWebアセットの場所を指定します。 capacitor.config.jsonこの cap sync を変更した後

__CAPGO_KEEP_0__

を実行してください。

プロジェクトのニーズに合わせてCapacitorのデフォルトのビルドプロセスを調整できます。

ビルドスクリプトの変更

ビルドプロセスを調整するには、build.config.jsファイルを編集することができます。 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

To streamline your workflow, add custom NPM scripts to your 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 and postbuild: AndroidまたはiOSアプリをビルドするためのプラットフォーム固有のコマンドを指定します。
  • build:platformビルドハックを追加することで、自動化をさらに進めることができます。

ビルドハック

ビルド スクリプトのカスタマイズ

詳細な制御のために、ビルド プロセスの特定のポイントでカスタム 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
デバッグシンボル プロガード マッピングファイル dSYMファイル
ビルドバリアント デバッグ、リリース、ステージング デバッグ、リリース
Code署名 キーストア管理 プロビジョニングプロファイル
アセット管理 res/drawable最適化 アセットカタログ

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

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

AnalyticsツールやセキュアなアップデートのためのCapgoと組み合わせると、これらのテクニックはデプロイプロセスに対するより多くの制御を与えます。 [1].

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

カスタムビルド構成と取り組むときに、エラーを迅速に解決することは、ビルドプロセスを正常に実行するために不可欠です。

よくあるエラーの修正

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

環境変数の欠如

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

error: Cannot find environment configuration for BUILD_ENV

環境変数を生成することで解決できます .env.local プロジェクトのルートディレクトリ内にあるファイルです。 ここでは例を示します。

BUILD_ENV=development
CAPACITOR_PLATFORM=ios
BUILD_TYPE=debug

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

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

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

テストに役立つ追加のヒント:

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

Capgo ビルド機能

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

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

クイックアプリ更新

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

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

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

ビルド自動化

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

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

自動ビルドの設定は通常、 1 か月あたり $300、これは、従来のソリューションと比較して、最大で $6,000 年間で セキュリティ基準.

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

Capgoはセキュリティを優先し、包括的なフレームワークを提供します。

  • エンドツーエンド暗号化によるアップデートパッケージ。
  • セキュリティーキー管理
  • AppleとGoogleのガイドラインへの準拠

バージョン管理機能

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

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

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

概要

ビルドステップの概要

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

Capgoの利点

Capgoは、750の実稼働アプリケーションを通じて、過去に成功した23.5百万の更新を実行しました。 [1]__CAPGO_KEEP_0__は、バンド幅の使用量と展開時間を削減する部分的な更新システムを提供します。

プラットフォームは、迅速な更新、グローバルパフォーマンスの最適化、セキュリティのためにエンドツーエンド暗号化、柔軟なチャネルベースの配布システムを提供します。この設定では、ターゲットされた更新、ベータテスト、App Storeのガイドラインへの準拠を維持しながら、強力なセキュリティフレームワークを維持します。

Keep going from How to Customize Build Scripts with Capacitor CLI

あなたが使用している場合 How to Customize Build Scripts with 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統合サービス Capgo製品フローにおけるCapgo統合のために CI/CD統合 CI/CD統合の実装詳細については Capgoアクション統合の実装詳細についてはGitHub Capacitor CLI で GitHub Actions の統合詳細について。

Live updates for Capacitor apps

When a web-layer bug is live, ship the fix through Capgo instead of waiting days for app store approval. Users get the update in the background while native changes stay in the normal review path.

ウェブ層のバグが生じた場合、Capacitor アプリの修正を待つのではなく、Capacitor を通じて修正を配信する。ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビュー経路を通じて残る。

スタートする

最新のブログ

Capgo gives you the best insights you need to create a truly professional mobile app.