Setting Up CI/CD for Capacitor Apps

より速く、エラーのないiOSおよびAndroidアプリのリリースを求めますか? CI/CDパイプライン Capacitor アプリを自動化してビルド、テスト、デプロイを行うことで、リリース時間を最大70%短縮し、エラーを60%削減することができます。このガイドでは、環境を設定することから、ライブアップデートを自動化するまでのすべての情報をカバーしています。 Capgo.

Key Takeaways:

CI/CDの重要性 Capacitorアプリ: ビルド時間を78%短縮し、ストアからの却下を60%削減することができます。
Essential tools: Xcode, Android Studio, CocoaPods, さらに多くのツールがあります。
パイプライン設定:タスクの自動化、 npx cap sync,依存関係キャッシュ、プラットフォーム固有のビルド
Live updates with Capgo:リリース後の更新を有効化し、フェーズドロールアウトとロールバックのセーフガード

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

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

CI/CDを使用すると、Capacitorアプリは、エラーと手動介入を最小限に抑えながら、より速く、滑らかなリリースを実現します。ワークフローを最適化する準備はできましたか？では、詳細をご覧ください。

既存の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 ビルドの場合、ダイナミックにキーストアを生成する必要があります。

__CAPGO_KEEP_0__ 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パイプラインの作成

環境が準備できたら、CapacitorアプリのCI/CDパイプラインを設定する次のステップです。 Capacitorアプリコンテキスト: Capgoのソリューションズマーケティングページ。役割: 短いUIラベルまたはナビゲーションアイテム。見られる場所: ソリューションズ/ホワイトラベル.astro。Capgo製品/ブランドと開発者用語を完全に保持する。メッセージキー`solutions_white_label_visual_cell1_value` (ソリューションズホワイトラベルビジュアルセル1値)。

このパイプラインは、Webアセットとネイティブプラットフォームビルドを効率的に管理する必要があります。

依存関係のインストールと更新

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

CI/CD環境では、依存関係の管理には厳格なバージョン管理が必要です。最初は、クリーンなインストールプロセスから始めてください。ビルドを高速化するには、依存関係キャッシュを使用します。たとえば、Azure DevOps ユーザーはこの設定でビルド時間が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	ファイル形式	App Store Connect
Android	ファイル形式	Google Play Console

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

Once your builds are validated and packaged, you’re ready to move on to live updates with Capgo (discussed in the next section).

sbb-itb-f9944d2

追加 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 Pipeline Configuration

最初に、パイプライン環境に 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

__CAPGO_KEEP_0__ __CAPGO_KEEP_1____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%

アップデート監視

これらのメトリクスを常に監視してください:

採用率: 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つの重要な領域に焦点を当てることができます。

ビルド速度の最適化

ウェブのみの変更の場合、 npx cap sync canを使用すると、フルネイティブの再構築をスキップし、約40%の再構築時間を短縮できます。ここでは、条件付きビルドを実装する方法について説明します。

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

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

バージョン管理の自動化

バージョンとビルド番号を動的に設定するスクリプトを使用すると、ワークフローを簡素化できます。

- 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`
本番	安全な鍵ring

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

- 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?

Building a Capacitor app involves a few straightforward steps:

環境の設定: Install Node.js and npm on your system. Then, use the Ionic CLI to start a new project with Capacitor support:
```
ionic start myApp tabs --capacitor
```
プラットフォームの追加: iOSやAndroidなどのターゲットとするプラットフォームを追加します。
```
npx cap add ios
npx cap add android
```
Sync your web code: Ensure your web code is aligned with the native platforms by running:
```
npx cap sync
```

同期ステップはCI/CDパイプラインでアプリを安定して動作させるために不可欠です。環境の設定について詳しくは、ツールのセクションを参照してください。

Keep going from Setting Up CI/CD for Capacitor Apps

CapacitorアプリのCI/CD設定の続き Setting Up CI/CD for Capacitor Apps CI/CD自動化を計画するには、 Capgo CI/CD Capgo CI/CDの製品ワークフロー Capgo Native Builds Capgo Native Buildsの製品ワークフロー Capgo Capgoの製品ワークフロー CI/CD統合 CI/CD統合の実装詳細 GitHub Actions Integration GitHub Actions Integrationの実装詳細