Pull Request를 설치 가능한 미리보기로 변환하세요

모바일 개발 팀은 모두 이런 고통을 겪었다: 기능이 검토 대기열에 도착했지만 스테이크 홀더의 손에 넣는 것은 테스트 플라이트나 구글 플레이 베타 검토 미로를 탐색하는 것과 같습니다. 몇 분이 몇 시간의 기다리기, 설치하기, 베타 빌드 관리하기로 변합니다.

프로덕션 앱이 어떤 pull request의 최신 변경 사항을 직접 기기에서 가져올 수 있다면, 다시 설치하거나 앱 스토어 지연 없이?

그것이 PR 미리보기 를 통해 가능합니다. 개발자가 pull request를 열면, GitHub 액션은 전용 업데이트 채널을 생성하고 변경 사항을 게시합니다. 앱을 이미 설치한 모든 사용자는 그 채널로switch, 기능을 테스트하고 다시 switch - 앱을 이미 가지고 있는 채널을 떠나지 않고.

The TestFlight 문제

기존의 모바일 기능 테스트 워크플로우는 다음과 같습니다.

개발자가 PR를 열면 - Code가 검토 대기열에 있습니다
테스트 플라이트를 기다리기 - 15-30분의 처리 시간
찾아 설치하기 - 테스터는 올바른 빌드를 찾습니다.
테스트하고 반복 - 모든 변경은 또 다른 기다림을 의미합니다.

이것은 병목 현상을 만듭니다. QA는 빌드가 완료될 때까지 기다려야 하며, 제품 관리자는 기능을 신속하게 확인할 수 없으며, 개발자는 피드백을 기다리며 맥락을 잃습니다. 산업은 이로 인한 생산성 손실로 약 $340을 PR당 잃고 있습니다.

PR 프리뷰 작동 방식

PR 프리뷰는 Capgo 채널 시스템을 사용하여 PR당 업데이트를 생성합니다. 여기서의 흐름은 다음과 같습니다.

PR가 열리거나 업데이트되면 - GitHub 액션 트리거
배포 업로드 - 개발자 JS/CSS 변경 사항은 PR별 채널로 전송됩니다.
댓글 작성 - 테스터는 PR에 대한 지시를 받습니다.
Instant testing - 채널 전환, 테스트, 다시 전환

새로운 앱 설치가 없으며 TestFlight 지연이 없습니다. 동일한 프로덕션 앱이 다른 업데이트 채널에서 업데이트를 받을 수 있습니다.

PR 전시 설정

PR 전시를 구현하기 전에 프로젝트가 Capgo Live Updates와 설정되어야 합니다. Capgo Live Updates 빠른 시작 가이드를 따라야 합니다. 만약 이미 따라했다면. Capgo Actions Workflow 생성

GitHub 플래그를 사용하여 채널을 생성할 때 키가 됩니다. 이 플래그를 사용하면 테스터가 앱 내에서 채널을 전환할 수 있습니다.

__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_KEEP_0__에 가세요 Capgo 대시보드에 가세요
API 설정 > API 키로 이동하세요
__CAPGO_KEEP_0__ 키를 생성하세요. 권한이 포함됩니다. all __CAPGO_KEEP_0__에 추가하세요
__CAPGO_KEEP_0__ 저장소 비밀에 추가하세요 CAPGO_TOKEN in your GitHub repository secrets

테스터는 채널을 switch하는 방법이 두 가지입니다.

Option 1: Shake 메뉴 (가장 쉬운 방법)

Capacitor

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

테스터들은 디버그 메뉴를 열기 위해 장치를 흔들며, 디버그 메뉴는 사용 가능한 채널의 목록과 검색바를 보여줍니다. 그들은 자신의 PR 채널 (예를 들어, __CAPGO_KEEP_0__ )을 찾고, 그것을 탭하여 선택하고, 앱은 자동으로 업데이트를 다운로드하고 적용합니다. 테스트를 마치면 다시 장치를 흔들며, 프로덕션으로 Switch합니다. pr-123 흔들기 메뉴는 자동으로 전체 흐름을 처리합니다:

자신 할당 가능한 채널을 모두 가져옵니다.

특정 PR를 찾기 위해 채널을 검색하여 표시합니다. listChannels()
선택 후 업데이트를 다운로드합니다.
“Reload Now” / “Later” 옵션으로 리로드를提示합니다.
옵션 2: 사용자 정의 채널 선택자 UI

앱에 사용 가능한 PR 채널 목록과 테스터가 하나를 선택할 수 있는 채널 Switcher를 빌드합니다. 이 작업은 두 개의 주요 API를 사용합니다:

- 자체 할당이 가능하도록 모든 채널을 가져옵니다.

listChannels() - 장치를 선택한 채널으로 Switch합니다.
setChannel() 이러한 빌딩 블록을 사용하여 간단한 UI를 만들 수 있습니다:

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

With these building blocks, you can create a simple 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');

For a complete React component example, see our channel surfing article.

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 미리보기는 설치된 네이티브 버전과 호환되는 자바스크립트 번들을 사용할 때만 작동합니다. PR이 네이티브 code 변경 (새 Capacitor 플러그인, iOS/Android 수정)을 포함한다면, 테스터는 새로운 네이티브 빌드를 필요로 합니다.

Capgo은 버전 호환성을 자동으로 확인합니다. PR의 번들이 설치된 네이티브 버전과 다른 버전을 대상으로 한다면, 업데이트가 적용되지 않습니다. 이로 인해 호환되지 않는 code으로 인한 충돌을 방지합니다.

PR이 네이티브 변경을 필요로 한다면, 새로운 TestFlight/Play Store 빌드를 배포해야 합니다. PR 미리보기는 자바스크립트, CSS, 자산 변경 등 네이티브 code을 건드리지 않는 변경사항에 가장 잘 작동합니다.

PR 미리보기의 이점

QA 엔지니어

PR이 열리면 테스트 기능을 즉시 테스트할 수 있습니다.
다중 PR 간에 전환할 수 있습니다. 재설치가 필요하지 않습니다.
실제 장치에서 수정 및 후퇴를 확인합니다.
TestFlight 처리 대기 시간이 더 이상 없습니다.

제품 매니저

기능을 병합되기 전에 검토합니다.
PR에 직접 피드백을 제공합니다.
구현이 요구 사항과 일치하는지 확인합니다.
리뷰 사이클 시간을 줄입니다.

개발자

변경에 대한 더 빠른 피드백을 받습니다.
스태커 홀더에게 기능을 데모할 수 있습니다.
특정 사용자와의 문제를 디버깅합니다.
__CAPGO_KEEP_0__ PR Preview

__CAPGO_KEEP_0__ PR Preview

__CAPGO_KEEP_0__	__CAPGO_KEEP_0__	Capgo
__CAPGO_KEEP_0__	__CAPGO_KEEP_0__	__CAPGO_KEEP_0__
__CAPGO_KEEP_0__	__CAPGO_KEEP_0__	__CAPGO_KEEP_0__
__CAPGO_KEEP_0__	앱 스토어 인증 정보	1개의 워크플로 파일
정리	수동	자동
자연 code 변경 사항	필수	선택 (JS만)

최선의 방법

채널 이름을 명확하게 하라: 사용 pr-{number} 기호를 쉽게 식별하기 위해 사용하는 규칙
자동 정리: PR이 닫힐 때 항상 채널을 삭제합니다
권한 제한: 디버그/스테이징 빌드에서만 shake 메뉴를 활성화합니다
프로세스 문서화: PR 템플릿에 테스트 지침을 추가합니다
실패를 부드럽게 처리: 채널 생성이 성공하는지 확인하기 전에 댓글을 게시합니다

PR 프리뷰 사용하지 않는 경우

PR 프리뷰는 자바스크립트/CSS 변경에만 사용합니다. PR에 포함된 경우:

새 Capacitor 플러그인
iOS 네이티브 code 변경
안드로이드 네이티브 code 변경 사항
네이티브 빌드에 영향을 미치는 의존성 업데이트

이 변경 사항을 적용하려면 전통적인 테스트 플라이트/플레이 스토어 배포가 필요합니다.

채널 서핑과 combination

PR 전시회가 가장 잘 작동하는 것은 채널 서핑과 combination입니다. 채널 서핑앱은 다음과 같은 기능을 가질 수 있습니다.

production - 모든 사용자에게 안정적인 릴리스
beta - 옵트인 사용자에게 이른 접근
pr-123 - 특정 PR에 대한 기능 전시

테스트에 사용하는 프로덕션 빌드의 테스터는 PR 채널로 switch할 수 있으며, 기능을 테스트한 후 다시 원래 채널로 switch할 수 있습니다. - 동일한 설치된 앱으로.

자원

결론

PR 미리보기는 팀이 모바일 기능을 검토하고 테스트하는 방식을 완전히 바꿔줍니다. 테스트 플라이트 처리를 기다리거나 여러 베타 빌드를 관리하는 대신, 테스터들은 이미 설치한 앱을 사용하여 몇 초만에任意의 PR 채널로switch할 수 있습니다.

The setup is minimal - one GitHub Actions workflow file - and the benefits compound across your team. QA stays unblocked, product managers review faster, and developers get quicker feedback.

먼저 워크플로를 하나의 저장소에 추가하고, 리뷰 프로세스가 어떻게 바뀌는지 확인하세요.

Turn Every Pull Request Into an Installable Preview

__CAPGO_KEEP_0__를 사용하고 있다면 Turn Every Pull Request Into an Installable Preview __CAPGO_KEEP_0__ 채널 라우팅과 단계별 롤아웃을 계획하고 연결하세요. __CAPGO_KEEP_0__ 채널에 대한 구현 세부 정보는 __CAPGO_KEEP_0__ 채널에 대한 구현 세부 정보는 __CAPGO_KEEP_0__ 채널에 대한 구현 세부 정보는 Beta 테스트 솔루션 Beta 테스트 솔루션의 제품 워크플로에 대해 버전 대상 솔루션 버전 대상 솔루션의 제품 워크플로에 대해 __CAPGO_KEEP_0__에 의해 작성되었습니다. __CAPGO_KEEP_1__ __CAPGO_KEEP_2__

Pull Request를 설치 가능한 미리보기로 변환하세요.