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

CapacitorとCLIを使用したビルドスクリプトのカスタマイズ方法

ビルドスクリプトをカスタマイズする方法を学びましょう。 Capacitor CLI を使用すると、効率的なデプロイと各プラットフォーム向けのカスタマイズされたアプリ更新が可能になります。

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

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

コンテンツマーケティング

How to Customize Build Scripts with Capacitor CLI

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

  • アップデートを速める: アプリストアの遅延なしで即時更新が可能
  • デプロイを制御する: アップデートを取り消すか、特定のユーザーグループにターゲットする
  • アプリをセキュアにする: つまり、更新を保護するために暗号化を使用します。
  • Optimize builds: プラットフォーム固有のニーズに合わせて設定を調整します。

Quick Overview of Key Features:

  • Config Files: して、ビルド設定を管理するために使用します。 capacitor.config.jsonpackage.json を使用してビルド設定を管理します。
  • Custom Scripts: プリビルドとポストビルドタスクを自動化するために、追加します。
  • Build Hooks: code をビルドプロセスの特定の段階で実行します。
  • 環境変数: 環境依存のビルドを簡素化 .env ファイル。

Capgo,デプロイツールを使用して、プロセスを強化します。 自動更新バージョン管理、ビルド速度の向上、グローバルパフォーマンスの最適化。続けて、ビルドスクリプトの設定とカスタマイズ方法を学びましょう。

「Capgo」では、 Capacitor 設定

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

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__は、フレームワークツールを使用してウェブアセットをコンパイルします。最適化されたウェブバンドル
アセットのコピーウェブアセットをネイティブプラットフォームフォルダにコピーしますプラットフォーム固有のアセットディレクトリ
ネイティブビルドプラットフォーム固有のビルドコマンドを実行しますデプロイ用バイナリ
検証ビルドの整合性と依存関係を確認しますビルドのステータスと警告

メイン設定ファイル

Capacitorがビルドを管理するために使用する2つの重要な設定ファイルです。

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

{
  "appId": "com.example.app",
  "appName": "MyApp",
  "webDir": "dist",
  "bundledWebRuntime": false,
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 3000
    }
  }
}
  • appId: アプリのユニークな識別子
  • appNameアプリの名前です。
  • webDirCapacitor は、Web アセット (例えば、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 native buildに含めるために、コンパイルされたWebアセットの場所を Capacitor に教える。
  • 変更を保存しました capacitor.config.json, Capgo を実行する必要があります。 cap sync プロジェクトを最新の状態に保つために。

次に、ビルドをさらにカスタマイズする方法について、設定を変更する方法をご紹介します。

ビルドスクリプトの変更

Capacitorのデフォルトのビルドプロセスをプロジェクトのニーズに合わせて調整できます。以下の手順に従ってください。

構成ファイルの設定

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

__CAPGO_KEEP_0__の重要な設定を以下に示します。

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

NPMスクリプトの作成

NPMをカスタマイズして、ワークフローを簡素化します。 package.json __CAPGO_KEEP_0__ファイルにカスタム__CAPGO_KEEP_0__スクリプトを追加してください。以下に例を示します。

{
  "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"
  }
}
  • prebuildpostbuild: ビルドが完了したときに通知を送信したり、環境を設定したりするために使用してください。
  • 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
    }
  }
};

各プラットフォームごとにビルドをカスタマイズできるようにすることで、デプロイがスムーズになります。

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

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

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

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

修正するには、Capacitor のバージョンを最新のものにアップグレードする必要があります。 .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は、自動化されたデプロイを通じて効率を高め、プロセスを簡素化するビルドスクリプトを次のレベルに引き上げます。

Quick アプリケーション更新

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

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

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

ビルド自動化

Capgoは主なCI/CDプラットフォームとシームレスに統合され、以下の機能を提供します。

CI/CDプラットフォーム統合機能利点
GitHub アサインストバールアショナートログインディコトコンディコトバールアショナ
バールアショナートログインディコトコンディコトバールアショナートログインディコトコンディコトバールアショナートログインディコト
コンディコトバールアショナートログインディコトコンディコトバールアショナートログインディコトコンディコトバールアショナートログインディコト

コンディコトバールアショナートログインディコト コンディコトバールアショナートログインディコトコンディコトバールアショナートログインディコト 6,000 ドル年間.

セキュリティ基準

Capgoは、以下の強力なフレームワークを含む、セキュリティを優先します。

  • アップデートパッケージのエンドツーエンド暗号化。
  • 鍵の管理。
  • AppleおよびGoogleのガイドラインへの準拠。

バージョン管理機能

  • インスタントロールバックオプション。
  • デプロイメントバージョンのトラッキング。
  • アップデートチャンネルの管理、ステージングリリース用。

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

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

概要

ビルド ステップの概要

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

Capgoの利点

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

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

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

ウェブ層のバグが実行中の場合、Capgo を通じて修正を配信するのではなく、数日間待ってアプリストアの承認を待つのではなく、ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビュー経路で残す

はじめましょう

ブログの最新記事

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