メインコンテンツにジャンプ
Capgo logo
開発 モバイル アップデート

Setting Up CI/CD for Capacitor Apps

iOSおよびAndroidアプリのリリースをスムーズにするCI/CDパイプラインを学び、効率を高め、エラーを減らす。

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

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

コンテンツマーケター
Setting Up CI/CD for Capacitor Apps

iOSおよびAndroidアプリのリリースを早く、エラーが少ないようにしたい? CI/CDパイプライン Capacitor CapacitorアプリのためのCI/CD設定 Capgo.

Key Takeaways:

  • CI/CDの重要性 Capacitorアプリ: ビルド時間を78%短縮し、ストアの却下を60%削減します。
  • 必須ツール: Xcode, Android Studio, CocoaPods, など
  • パイプライン設定: 以下のタスクを自動化します npx cap sync,依存関係キャッシュ、プラットフォーム固有のビルド
  • Live updates with Capgo: リリース後の更新を有効化し、フェーズドロールアウトとロールバックのセーフガードを実施します。

クイックセットアップ手順

  1. 環境の準備: iOSとAndroidのために必要なツールをインストールします。
  2. プロジェクトの設定: capacitor.config.ts 環境変数を安全に更新
  3. ビルドパイプラインCI/CDを自動化して両方のプラットフォームの依存関係のインストール、ビルド、テストを実行します。
  4. パフォーマンスを最適化します。キャッシュ、並列ビルド、条件付きワークフローを使用します。
  5. ライブアップデートを追加します。Capgoを使用して、フェーズドロールアウトを含むセキュアなOTAアップデートを実行します。

CI/CDを使用すると、Capacitorアプリはエラーと手動介入を最小限に抑えながら、高速でSmoothなリリースを実現できます。ワークフローを最適化する準備ができました。では、始めましょう!

既存のCI/CDパイプラインにモバイル機能を統合します。

CI/CD環境の準備

CI/CDの基本を理解したら、環境の設定に進みます。これは、信頼できる自動化の骨格です。

ツールとソフトウェアの設定

次のキーなツールがインストールされていることを確認してください:

iOS 開発用:

  • Xcode 14 以上
  • Xcode Command Line Tools
  • CocoaPods 依存関係を管理するために

Android 開発用:

  • Android Studio
  • Android SDK 33 以上
  • Java Development Kit (JDK)

Xcode Command Line Tools がインストールされているかどうかを確認するには、次のコマンドを実行してください:

xcode-select -p

__CAPGO_KEEP_0__ Capacitor プロジェクト

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

Capacitor プロジェクトは、CI/CD ワークフローに正しく設定されている必要があります。CI/CD ワークフローに必要な設定ファイルは capacitor.config.ts このファイルは、CI/CD 要件に従ってプロジェクトを整合させることを保証します。

const config: CapacitorConfig = {
  appId: 'com.example.app',
  webDir: 'build',
  ios: { 
    scheme: 'MyApp'
  }
}

環境変数の設定

環境設定とCI/CD パイプラインを関連付けるために、安全にクレデンシャルを管理することは、重要な要素です。

定義する必要があるキー変数:

: デプロイメント ステージ (例えば

  • BUILD_ENV: __CAPGO_KEEP_0__ 署名証明書 production)
  • IOS_SIGNING_IDENTITY: Your code signing certificate
  • ANDROID_KEYSTORE_PATHAndroid ビルドの場合、ダイナミックにキーストアを生成する必要があります。

環境変数の設定 local.properties ファイルのCIプロセス:

echo "sdk.dir=$ANDROID_SDK_ROOT" > android/local.properties

iOSビルドの場合、CIプラットフォームがmacOSエージェントをサポートしていることを確認してください。

環境の準備を確認するには:

node --version | grep "v16" && xcodebuild -version | grep "Xcode 14" || exit 1

アプリストアの却下のリスクを大幅に低減できるのは、キーやクレデンシャルを適切に管理することです。前述の統計にも記載されています。 [1].

CI/CDパイプラインの作成

環境が準備できたので、CapgoアプリのCI/CDパイプラインを設定する次のステップです。 Capacitor app依存関係のインストールと更新

CI/CD環境では、依存関係の管理には厳格なバージョン管理が必要です。最初は、クリーンなインストールプロセスから始めましょう。

ビルドの高速化のために、依存関係のキャッシュを使用します。たとえば、Azure DevOpsを使用します。

npm install --ignore-scripts
npm install @capacitor/cli

CIプロセス中のファイル iOSビルドの場合、CIプラットフォームがmacOSエージェントをサポートしていることを確認してください。 ユーザーはこの設定でビルド時間が40-60%短縮されていることを確認しています。

- task: Cache@2
  inputs:
    key: 'npm | "$(Agent.OS)" | package-lock.json'
    path: |
      node_modules
      android/.gradle
      ios/Pods

iOSおよびAndroidビルド設定

両方のプラットフォームのビルド設定を以下の手順に従って行います。

iOSビルド設定:

steps:
  - task: InstallAppleCertificate@2
    inputs:
      certSecureFile: 'certificate.p12'
      certPwd: $(P12_PASSWORD)
  - script: |
      xcodebuild -workspace ios/App/App.xcworkspace -scheme App -configuration Release -archivePath ios/App/App.xcarchive archive

Androidビルド設定:

cd android
./gradlew bundleRelease

テストとデプロイのステップ

プラットフォームテストをマトリックス戦略を使用して並列実行します。

test:
  steps:
    - run: npm run test:unit
    - run: npm run test:e2e
    - name: Run Platform Tests
      matrix:
        platform: [ios, android]
      run: npm run test:${{ matrix.platform }}

デプロイの場合、プラットフォーム固有のアーティファクトハンドリングを設定します。

プラットフォーム アーティファクトタイプ 配布チャネル
iOS .ipa App Store Connect
Android .aab Google Play Console

並列ビルドを使用すると、正しく設定されている場合、パイプライン実行時間が大幅に短縮されることがあります。

Capacitor アプリの場合、ビルドが検証されパッケージ化されたら、Capgo (次のセクションで説明) に進む準備が整います。

CapacitorアプリのためのCI/CD設定

CapacitorアプリのためのCI/CDの設定 Capgo リアルタイム更新用

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

Integrating Capgo into your workflow enhances your CI/CD process by enabling post-release updates. Here’s how to set it up:

Capgoの設定

最初に、パイプライン環境に Capgo CLI をインストールします。

steps:
  - name: Install Capgo CLI
    run: npm install -g @capgo/cli
  - name: Configure Authentication
    env:
      CAPGO_KEY: ${{ secrets.CAPGO_API_KEY }}

この追加により、CI/CDライフサイクルが拡張され、自動ビルドとデプロイプロセスにアップデート管理が組み込まれます。 次に、ビルドステップの後にアップロードコマンドを含めます。 セキュアなアップデートのためには、次のようになります。

バリデーション設定を構成します。

- name: Upload Update
  run: |
    capgo upload --api-key $CAPGO_KEY --bundle ./build/app-release.apk
    capgo deploy v${VERSION} --channel production

CapacitorアプリのCI/CD設定 CapacitorアプリのCI/CD設定__CAPGO_KEEP_0__の設定

{
  "verification": {
    "checksum": "strict",
    "certificatePinning": true,
    "updateTimeout": 500
  }
}

Capgo 機能概要

機能 説明
端末間暗号化 コストを大幅に削減します。
チャネルベースの展開 特定の環境に合わせてアップデートをカスタマイズします。
フェーズドロールアウト アップデートを段階的に配布します。

OTAアップデートガイドライン

展開後のテストプロセスを強化するために、次の重要な指標を追跡してください。

フェーズド展開戦略

アップデートの配布を制御するために、ステージドロールアウトを使用してください:

- name: Staged Rollout
  run: |
    capgo deploy v1.2.3 --group "beta-users" --rollout 10%
    capgo deploy v1.2.3 --rollout 50%

__CAPGO_KEEP_0__

アップデート監視

  • これらのメトリクスを常に監視してください:採用率
  • : 最初の24時間以内に40-60%を目指してください。クラッシュフリーのセッション
  • : 99.5%以上を維持してください。検証時間

: 500ms未満でなければなりません。

- name: Rollback Check
  run: |
    if [ $(capgo stats --version v1.2.3 --metric crashes) -gt 2 ]; then
      capgo rollback --channel production
    fi

クラッシュ率が許容範囲を超えると、ロールバックを自動化してください:

パイプラインのパフォーマンスを向上させるには、3つの重要な領域に焦点を当てて、パイプラインのパフォーマンスを大幅に向上させることができます:

高速化

Webのみの変更の場合、 npx cap sync can

- name: Build Strategy
  run: |
    [ "$WEB_ONLY" = true ] && npx cap sync || (./gradlew assembleRelease && xcodebuild ...)

を使用すると、フルネイティブの再構築をスキップして時間を節約できます。再構築時間は約40%短縮されます。この方法では、次の方法で条件付きビルドを実装できます。

このアプローチでは、必要なコンポーネントのみを再構築することで、プロセスを簡素化します。

バージョン管理の自動化

- name: Set Version
  run: |
    VERSION=$(node -p "require('./package.json').version")
    BUILD_NUMBER=$GITHUB_RUN_NUMBER
    echo "APP_VERSION=${VERSION}" >> $GITHUB_ENV
    echo "BUILD_ID=${BUILD_NUMBER}" >> $GITHUB_ENV

バージョン管理を自動化すると、ワークフローが簡素化されます。次のスクリプトを使用して、バージョンとビルド番号をダイナミックに設定できます。

{
  "scripts": {
    "version": "standard-version",
    "build:prod": "npm version patch && ionic build --prod"
  }
}

さらに、自動化されたシナリオバージョニングもこの構成で設定できます。

  • これらの実践は、パイプラインのパフォーマンスを追跡し改善するためのメトリクスとして、
  • 各ステージあたりのビルド時間
  • キャッシュ効率（ヒット/ミス比率）

ピークリソース使用率

複数の環境を管理することは、環境固有の設定を使用することで簡素化できます。ここでは、例としての設定方法を紹介します。

環境 設定ファイル
開発 .env.dev
ステージング .env.staging
本番 安全な鍵箱

このスクリプトを使用して、環境を動的に設定できます。

- name: Configure Environment
  env:
    API_KEY: ${{ secrets.ENV_SPECIFIC_API_KEY }}
    BUNDLE_ID: ${{ parameters.bundleId }}
  run: |
    echo "ENVIRONMENT=${{ parameters.environment }}" >> $GITHUB_ENV
    echo "API_ENDPOINT=${{ parameters.apiUrl }}" >> $GITHUB_ENV

この設定を Capgo のチャネルベースのデプロイと組み合わせると、より正確で環境固有のアップデートが可能になります。これにより、ロールアウトが滑らかになり、異なる環境におけるアプリケーションの動作をより制御することができます。

概要

CI/CDの役割

CI/CDパイプラインを Capacitor アプリケーションに使用すると、ワークフローの効率が大幅に向上します。業界データによると、チームは 50-70%のリリースサイクルが速くなります iOSとAndroidの同時ビルドのおかげです [3].依存関係のインストールやプラットフォームの同期などのタスクを自動化することで、 40-60% [1][2].

たとえば、Azure DevOps Pipelinesを利用するチームは、シーケンシャルビルドステップやXcodeパッケージングなどのプロセスを自動化しています。また、開発と生産環境の両方でパラメータ化された環境を使用しています。このアプローチにより、GradleとXcodeの手動CLI操作が必要なくなり、毎回のアーティファクトの作成が確実になります。

これらの改善により、Capgoと組み合わせると、順番にアップデートを管理するための基盤が整います。

Capgoのアップデート管理

CapgoはCI/CD Pipelinesと組み合わせて、即時アップデートを提供し、App Storeのポリシーに準拠したままにします。アップデートは、パイプラインに組み込まれた自動テストゲートを通過した後のみ、デプロイされます。

自動ビルドとフェーズドロールアウトを組み合わせると、チームは次のような結果を達成します: 7日以内に80%のユーザーがカバーされます 1時間以内にロールバックが可能です。

内部テスト用に並列デプロイメントトラックを実行するという一般的な戦略があります。自動ビルドは内部テストに使用され、フェーズドロールアウトはユーザーセグメントにターゲットされます。このアプローチにより、更新は速く安全で、厳密な自動テストゲートによって裏付けられます [1].

FAQ

How to create a Capacitor app?

Capacitor appを作成するには、以下の手順を実行します。

  1. 環境の設定: Node.jsとnpmをインストールし、Ionic CLIを使用してCapacitorサポートの新しいプロジェクトを開始します。

    ionic start myApp tabs --capacitor

  2. プラットフォームの追加: iOSやAndroidなどのターゲットとするプラットフォームを追加します。

    npx cap add ios
npx cap add android

  3. ウェブのcodeの同期: ウェブcodeがネイティブプラットフォームと同期されていることを確認するには、以下のコマンドを実行します。

    npx cap sync

同期ステップは、CI/CD PipelinesでSmoothな動作を保証するために、Appが一貫した状態で保たれるようにするために重要です。環境の設定についての詳細は、Toolsセクションを参照してください。

Capacitor AppsのCI/CD設定の続き

__CAPGO_KEEP_0__を使用している場合 Capacitor AppsのCI/CD設定の続き CI/CD自動化を計画するには、 Capgo CI/CD Capacitorアプリの製品ワークフローにおけるCapgo CI/CD、 Capacitorアプリの製品ワークフローにおけるCapgo Native Builds、 Capacitorアプリの製品ワークフローにおけるCapgo Integrations、 Capgo Integrations for the product workflow in Capgo Integrations, Capacitorアプリの実装詳細におけるCI/CD統合、 Capacitorアプリの実装詳細における__CAPGO_KEEP_0__ Actions Integration、 Capacitorアプリの製品ワークフローにおけるGitHub Actions Integration、 Capacitorアプリの製品ワークフローにおけるGitHub CI/CD、

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を通じて修正を配信し、App Storeの承認待ちの日数を省略してください。ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビュー経路を通じます。

コンテキスト: ホームページマーケティングコピー。役割: ウェブサイトコピー文。見つける場所: コンポーネント HumanSupport.astro、コンポーネント pricing/Plans.astro。メッセージキー `home_hero_human_support` (ホームヒーローワン・サポート)。

始めましょう

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

2方向の通信機能を備えたCapacitorアプリ
開発 モバイル +1
2025年4月26日

2方向の通信機能を備えたCapacitorアプリ

OTA更新の5つの一般的なミス
開発 セキュリティ +1
2025年4月13日

OTA更新の5つの一般的なミス

5つのモバイルアプリライブアップデートのセキュリティベストプラクティス
開発 モバイル +1
2025年1月14日

5つのモバイルアプリライブアップデートのセキュリティベストプラクティス

すべてのブログ記事をご覧ください