すべてのプルリクエストをインストール可能なプレビューに変える

すべてのモバイル開発チームは、痛みを感じてきました:機能はレビュー用に準備されていましたが、ステークホルダーにそれを手に入れることは、TestFlightまたはGoogle Playベータレビューの迷路をナビゲートすることです。何が分だけの時間でなければならないのです。何時間も待ち、インストール、ベータビルドの管理に費やされます。

ステークホルダーに機能を手に入れることができるアプリが、プロダクションアプリが、任意のプルリクエストから最新の変更を直接デバイスにプルルームすることができるようになることはありませんか? それが何らかの再インストールやアプリストアの遅延なしに?

それが PRプレビュー enable. When a developer opens a pull request, a GitHub Action creates a dedicated update channel and publishes the changes. Anyone with the app installed can switch to that channel, test the feature, and switch back - all without leaving the app they already have.

PRプレビュー

PRプレビュー - Code is ready for review
PRプレビュー PRプレビュー
PRプレビュー - テスターは適切なビルドを探します
テストと繰り返し - すべての変更はまた待ち時間を意味します

これにより、バットネックが生まれます。QAはビルドを待ちながらブロックされます。製品マネージャーは機能を迅速に検証できません。開発者はフィードバックを待つ間、コンテキストを失います。この業界では、PRごとに約$340の生産性の低下が見込まれます。

PRプレビューのしくみ

PRプレビューはCapgoのチャンネルシステムを使用して、PRごとにアップデートストリームを作成します。ここでは流れをご紹介します。

PRが開かれたり更新されたりします - GitHubアクションがトリガーされます
バンドルがアップロードされます - ご自身のJS/CSSの変更はPRごとにチャンネルにアップロードされます
コメントが投稿されます - テスターはPRの指示を受けます
即時テスト - チャネルを切り替え、テスト、切り替え

新しいアプリのインストールなし。テストフライトの遅延なし。同じ生産アプリは、異なるアップデートチャネルからデータを取得できます。

PR プレビューの設定

PR プレビューを実装する前に、プロジェクトは Capgo Live Updates と設定されている必要があります。 Capgo のクイックスタートガイドを参照してください。 Capgo Actions ワークフロー作成

GitHub Actions Workflow

__CAPGO_KEEP_0__ .github/workflows/pr-preview.yml:

name: PR Preview
on:
  pull_request:
    types: [opened, synchronize]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v6

      - name: Setup Bun
        uses: oven-sh/setup-bun@v2

      - name: Install Dependencies
        run: bun install

      - name: Build
        run: bun run build

      # Create a channel named after your PR (may already exist on synchronize)
      - name: Create PR Channel
        id: create_channel
        continue-on-error: true
        run: bunx @capgo/cli@latest channel add pr-${{ github.event.pull_request.number }} --self-assign
        env:
          CAPGO_TOKEN: ${{ secrets.CAPGO_TOKEN }}

      # Upload the build to that channel
      - name: Upload to Capgo
        run: bunx @capgo/cli@latest bundle upload --channel pr-${{ github.event.pull_request.number }}
        env:
          CAPGO_TOKEN: ${{ secrets.CAPGO_TOKEN }}

      # Post a comment with testing instructions (only on PR open)
      - name: Comment on PR
        if: github.event.action == 'opened'
        uses: actions/github-script@v7
        with:
          script: |
            github.rest.issues.createComment({
              owner: context.repo.owner,
              repo: context.repo.repo,
              issue_number: ${{ github.event.pull_request.number }},
              body: '📱 **Test this PR on device:**\n\nOpen your app and switch to channel: `pr-${{ github.event.pull_request.number }}`\n\nUse the shake menu or call `setChannel()` from your app.'
            })

__CAPGO_KEEP_0__ --self-assign __CAPGO_KEEP_0__ setChannel() API

Capgoの設定

あなたの Capgoダッシュボード
設定 > API キー
__CAPGO_KEEP_0__ キーを生成 all 許可
あなたの__CAPGO_KEEP_0__リポジトリのシークレット CAPGO_TOKEN in your GitHub repository secrets

テスターは2つの方法でチャンネルを切り替えることができます。

オプション 1: Shake メニュー (最も簡単な方法)

Capacitor

// capacitor.config.ts
const config: CapacitorConfig = {
  // ... your other config
  plugins: {
    CapacitorUpdater: {
      shakeMenu: true,
      allowShakeChannelSelector: true
    }
  }
};

テスト者は、デバッグメニューを開くためにデバイスを振っています。デバッグメニューには、検索バー付きで利用可能なチャンネルのリストが表示されます。テスト者は自分のPRチャンネル（例えば）を探し、タップして選択し、自動的にアップデートをダウンロードして適用します。テストが完了したら、再びデバイスを振ってプロダクションに切り替えます。 pr-123テスト者はデバイスを振ってデバッグメニューを開きます。デバッグメニューには、利用可能なチャンネルのリストと検索バーが表示されます。テスト者は自分のPRチャンネルを探し、タップして選択し、自動的にアップデートをダウンロードして適用します。テストが完了したら、再びデバイスを振ってプロダクションに切り替えます。

デバッグメニューは、以下のフローを自動的に処理します。

すべての自分に割り当てることができるチャンネルを取得します。 listChannels()
チャンネルを表示して、特定のPRを検索できます。
選択したチャンネルのアップデートをダウンロードします。
「再読み込みする」/「後で」オプションでリロードを求めます。

オプション2：カスタムチャンネルセレクターUI

アプリ内にチャンネルSwitcherを組み込んで、利用可能なPRチャンネルのリストを表示し、テスト者が選択できるようにします。このUIは2つのAPIを使用します。

listChannels() 自分に割り当てることができるチャンネルをすべて取得します。
setChannel() 選択したチャンネルにデバイスを切り替えます。

import { CapacitorUpdater } from '@capgo/capacitor-updater';

// Get all available channels (including PR channels)
async function getAvailableChannels() {
  const { channels } = await CapacitorUpdater.listChannels();

  // Filter to show only PR channels
  const prChannels = channels.filter(c => c.name.startsWith('pr-'));

  return prChannels;
}

// Switch to a specific PR channel
async function switchToChannel(channelName: string) {
  await CapacitorUpdater.setChannel({
    channel: channelName,
    triggerAutoUpdate: true  // Immediately check for updates
  });
}

// Return to production
async function switchBackToProduction() {
  await CapacitorUpdater.unsetChannel({});
}

// Get current channel
async function getCurrentChannel() {
  const { channel } = await CapacitorUpdater.getChannel();
  return channel;
}

これらの構築ブロックを使用して、シンプルなUIを作成できます。

// Example: List PR channels and let user select
const channels = await getAvailableChannels();
const current = await getCurrentChannel();

// Display channels in your UI
channels.forEach(channel => {
  console.log(`${channel.name} ${channel.name === current ? '(current)' : ''}`);
});

// When user selects a channel
await switchToChannel('pr-123');

完全なReactコンポーネントの例を参照してくださいチャンネルサーフィングの記事.

PRチャンネルのクリーンアップ

PRがマージまたはクローズされたときは、チャンネルをクリーンアップしたいと思います。別のワークフローを追加してください

name: Cleanup PR Preview
on:
  pull_request:
    types: [closed]

jobs:
  cleanup:
    runs-on: ubuntu-latest
    steps:
      - name: Delete PR Channel
        run: bunx @capgo/cli@latest channel delete pr-${{ github.event.pull_request.number }}
        env:
          CAPGO_TOKEN: ${{ secrets.CAPGO_TOKEN }}

PRがクローズされたときにチャンネルを削除するので、チャンネルリストがきれいに保たれます。

バージョン互換性

PRプレビューは、JavaScriptバンドルがインストール済みのネイティブバージョンと互換性がある場合にのみ動作します。PRがネイティブcodeの変更 (新しいCapacitorプラグイン、iOS/Androidの変更) を含む場合、テスターは新しいネイティブビルドが必要になります。

Capgoはバージョン互換性を自動的にチェックします。PRのバンドルがインストール済みのネイティブバージョンと異なる場合、更新は適用されません。この互換性のないcodeから起因するクラッシュを防止します。

ネイティブ変更が必要なPRには、新しいTestFlight/Play Storeビルドを配布する必要があります。PRプレビューは、ネイティブcodeに触れずにJavaScript、CSS、資産の変更が含まれるPRの場合に最も効果的です。

PRプレビューの利益者

QAエンジニア

PRが開かれたときに特徴を即時テストできます
PRを切り替えるだけで再インストールする必要がなくなる
実機で修正とバグを確認する
テストフライトの処理待ちがなくなる

製品マネージャー

機能をマージされる前にレビューする
PRに直接フィードバックを与える
実装が要件に合致することを確認する
レビューサイクル時間を短縮する

エンジニア

変更に対するフィードバックを早く受ける
ステークホルダーに機能を即時デモする
特定のユーザーと問題をデバッグする
開発中のバージョンを管理する時間を削減

比較: Traditional vs PR プレビュー

機能	テストフライト/ベータ	Capgo PR プレビュー
ビルド時間	15-30 分	1 分未満
PR を切り替える	5 分以上再インストール	10 秒
セットアップの複雑さ	App Storeの資格情報	ワークフローファイル1つ
クリーンアップ	手動	自動
ネイティブcodeの変更	必要	オプション (JSのみ)

ベストプラクティス

チャンネル名を明確に: 使用 pr-{number} 識別のための慣習
自動クリーンアップ: PRがクローズされたときに常にチャンネルを削除する
アクセス制限: デバッグ/ステージングビルドのみでシェイクメニューを有効にする
プロセスを文書化: PRテンプレートにテスト指示を追加する
失敗を優雅に処理する: チャンネル作成が成功したことを確認する前にコメントを投稿する

PRプレビューの使用時期

: PRプレビューはJavaScript/CSSの変更用です。PRに含まれる場合

新しいCapacitor プラグイン
iOS native code changes
Android native code changes
ネイティブビルドに影響する依存関係の更新

それらの変更には、通常のTestFlight/Play Store配布が必要です。

Channel Surfingと組み合わせる

PRプレビューは、Channel Surfingと組み合わせることが最も効果的です。。アプリは次の機能を持つことができます。

production - 全ユーザー向けの安定版リリース
beta - オプトインユーザー向けの早期アクセス
pr-123 - 特定のPR向けの機能プレビュー

プロダクションビルドのテスターは、インストール済みのアプリを変更せずに、任意のPRチャネルに切り替えて機能をテストし、元に戻すことができます。

リソース

結論

PR プレビューは、チームがモバイル機能をレビューおよびテストする方法を変える。TestFlight の処理を待つのではなく、複数のベータビルドを管理するのではなく、既存のアプリをインストールしているテスターは、秒単位で任意の PR チャンネルに切り替えることができます。

セットアップは最小限 - 1 つのGitHub Actions ワークフローファイル - です。チーム全体にわたる利点は、積み重ねられます。QA はブロックされず、プロダクトマネージャーは迅速にレビューし、開発者は迅速なフィードバックを受け取ります。

最初に、ワークフローを 1 つのリポジトリに追加し、レビュープロセスがどのように変化するかを確認してください。

続けて "Turn Every Pull Request Into an Installable Preview" から進みましょう。

Capgo を使用している場合 Capgo を使用している場合 チャンネルルーティングとステージドロールアウトを計画するには、チャンネルチャンネルチャンネルチャンネルベータテストソリューションベータテストソリューションの製品ワークフローにバージョン目標ソリューションバージョン目標ソリューションの製品ワークフローに Article credits __CAPGO_KEEP_0__

Pull Requestをインストール可能なプレビューに変える