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

Setting Up CI/CD for Capacitor Apps

iOSおよびAndroidアプリのリリースをスムーズにするCI/CDパイプラインを設定して、効率を高め、エラーを減らす方法を学びましょう。

Setting Up CI/CD for Capacitor Apps

iOSとAndroidのアプリリリースをより速く、エラーが少なくする CI/CD Pipelines for Capacitor Capacitorアプリの自動ビルド、テスト、デプロイ Capgo.

CapacitorアプリのCI/CDパイプラインを設定する

  • Capacitorアプリの自動ビルド、テスト、デプロイ Capacitor appsCI/CDの重要性
  • CapacitorアプリのCI/CDパイプライン: CI/CDパイプラインの重要なポイント, Xcode、Android Studio, CocoaPods, さらに。
  • Pipeline setup: iOSやAndroid向けのタスクの自動化、依存関係のキャッシュ、プラットフォーム固有のビルドなどを行う。 npx cap syncLive updates with __CAPGO_KEEP_0__
  • Live updates with CapgoQuick Setup Steps:

環境の準備

  1. : iOSとAndroid向けの必要なツールのインストール。プロジェクトの設定
  2. : __CAPGO_KEEP_0__ capacitor.config.ts と環境変数を安全に管理することができます。
  3. ビルドパイプライン:両方のプラットフォームの依存関係のインストール、ビルド、テストを自動化します。
  4. パフォーマンスを最適化する:キャッシュ、並列ビルド、条件付きワークフローを使用します。
  5. ライブアップデートを追加する:Capgoを安全かつOTAアップデートに使用し、フェーズドロールアウトを実行します。

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

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

CI/CD環境の準備

CI/CDの基本を理解したら、環境を設定する次のステップです。これは、信頼できる自動化の骨格です。

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

Capacitor アプリの設定に必要なツールがインストールされていることを確認してください。

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

CI/CD環境を設定する Capacitor CapacitorアプリのCI/CD設定

Capacitor Framework Documentation Website

Your Capacitor project needs to be configured correctly for CI/CD workflows. The capacitor.config.ts あなたの__CAPGO_KEEP_0__プロジェクトは、CI/CDワークフローに正しく設定されている必要があります。

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

ファイルは、この設定の中心です。

このファイルは、プロジェクトがCI/CDの要件に準拠していることを保証します。

環境変数の設定

環境変数を安全に管理することは、CI/CDパイプラインと環境設定をリンクする上で重要な要素です。

  • BUILD_ENV定義する必要があるキー変数: production)
  • IOS_SIGNING_IDENTITY: Your code signing certificate
  • ANDROID_KEYSTORE_PATH: __CAPGO_KEEP_0__ アプリの Android キーストアへのパス

Android ビルド用に、CI プロセス中に動的にキーストアファイルを生成する local.properties iOS ビルド用に、CI プラットフォームが macOS エージェントをサポートしていることを確認する

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

環境が準備できているかどうかを確認する

アプリストアの却下リスクを低減するには、キーやクレデンシャルを適切に管理することが重要です

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

CI/CD パイプラインの作成 [1].

環境が準備できたら、__CAPGO_KEEP_0__ アプリの CI/CD パイプラインを設定する

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

CI/CD パイプラインの設定

CI/CD パイプラインの設定

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

ビルドの高速化のために、依存関係キャッシュを使用してください。例えば、 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 }}

デプロイの場合、プラットフォームごとのアーティファクトハンドリングを設定してください:

プラットフォーム アーティファクトタイプ Distribution Channel
iOS .ipa App Store Connect
Android .aab 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 for Live Updates

Capgo Live Update Dashboard Interface

Capgoを取り入れることで、CI/CDプロセスを強化し、リリース後のアップデートを可能にします。ここでは、設定方法について説明します。

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ライフサイクルが拡張され、自動ビルドとデプロイプロセスにアップデート管理が組み込まれます。 次に、ビルドステップの後にアップロードコマンドを含めます: For

__CAPGO_KEEP_0__

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

__CAPGO_KEEP_1__ セキュアなアップデート, 設定の検証を以下のように設定します。

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

Capgo機能の概要

機能 説明
端末間の暗号化 コンテキスト:Capgoのソリューションマーケティングページ。役割:セクションまたはページヘッダー。見られる場所:ソリューション/フィンテック.astro。メッセージキー`solutions_fintech_cert3_title` (ソリューションフィンテックCert3タイトル) | コンテキスト:Capgoのソリューションマーケティングページ。役割:セクションまたはページヘッダー。見られる場所:ソリューション/フィンテック.astro。メッセージキー`solutions_fintech_sol3_title` (ソリューションフィンテックSol3タイトル) | コンテキスト:Capgoのソリューションマーケティングページ。役割:セクションまたはページヘッダー。見られる場所:ソリューション/ヘルスケア.astro。メッセージキー`solutions_healthcare_sol3_title` (ソリューションヘルスケアSol3タイトル) | コンテキスト:Capgoのソリューションマーケティングページ。役割:短いUIラベルまたはナビゲーションアイテム。見られる場所:ソリューション/フィンテック.astro。メッセージキー`solutions_fintech_badge_e2e` (ソリューションフィンテックバッジE2e) | コンテキスト:Capgoのソリューションマーケティングページ。役割:短いUIラベルまたはナビゲーションアイテム。見られる場所:ソリューション/ヘルスケア.astro。メッセージキー`solutions_healthcare_badge_e2e` (ソリューションヘルスケアバッジE2e)
エラーの減少 チャンネルベースの展開
環境に特化したアップデート フェーズドロールアウト

アップデートの段階的な配布

デプロイ後、テストプロセスを強化するために、次の重要なメトリクスを追跡してください:

段階的デプロイ戦略

アップデートの配布を制御するために、段階的なロールアウトを使用してください:

- 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 を使用すると、フルネイティブの再構築をスキップできるため、約40%の再構築時間を節約できます。条件付きビルドを実装する方法については、以下を参照してください。

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

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

バージョン管理の自動化

バージョン管理を自動化すると、ワークフローが簡素化されます。バージョンとビルド番号を動的に設定するスクリプトを使用してください。

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

バージョン管理を自動化すると、ワークフローが簡素化されます。バージョンとビルド番号を動的に設定するスクリプトを使用してください。

  • バージョン管理の自動化
  • バージョン管理を自動化すると、ワークフローが簡素化されます。バージョンとビルド番号を動的に設定するスクリプトを使用してください。
  • Peak resource usage

Multi-Environment Setup

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

環境 設定ファイル
開発 .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のチャネルベースのデプロイと組み合わせることで、環境固有のアップデートを実現し、スムーズなロールアウトと、異なる環境におけるアプリケーションの動作をより制御することができます。

概要

開発の役割

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

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

これらの改善により、Capgoと組み合わせると、順序付きのアップデート管理が可能になります。

Capgoのアップデート管理

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

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

並行展開トラックを実行する一般的な戦略は、内部テスト用に自動ビルドを使用し、段階的なロールアウトをユーザーセグメントにターゲットにすることです。この戦略により、更新は迅速かつ安全で、厳格な自動テストゲートによって裏付けられます。 [1].

FAQ

Capacitor アプリを作成する方法

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

  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 operation を保証するために、各プラットフォーム間でアプリの一貫性を維持するために不可欠です。環境の設定についての詳細は、Tools セクションを参照してください。

Keep going from Setting Up CI/CD for Capacitor Apps

Capacitorアプリを使用している場合 Setting Up CI/CD for Capacitor Apps CI/CDの自動化を計画するには、Capacitor CI/CDと接続します Capgo CI/CD for the product workflow in Capgo CI/CD, Capgo Native Builds for the product workflow in Capgo Native Builds, Capgo Integrations for the product workflow in Capgo Integrations, CI/CD統合の実装詳細 Capacitorアクション統合 GitHub Actions Integration GitHub Actions Integration.

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.

ウェブ層のバグが生じた場合、__CAPGO_KEEP_0__を通じて修正を配信し、App Storeの承認待ちの日数を待たずして、ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビュー経路を通じて進む。

コンテキスト:Capgoのマーケティングウェブサイト。役割:サポートする説明文またはメタ説明文。見つける場所:コンポーネントGetStarted.astro。Capgo製品/ブランド名と開発者用語をそのまま保存。メッセージキー`instant_updates_for_capacitor_apps_description` (Capacitorアプリの即時更新の説明)。

最新のブログ

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