설치 가능한 미리보기로 모든 PR을 변환하세요.

모바일 개발 팀은 모두 같은 고통을 겪었습니다: 기능이 검토 준비가 되었지만, 스테이크 홀더의 손에 넣는 것은 테스트 플라이트나 구글 플레이 베타 리뷰 미로를 탐색해야 하는 것입니다. 몇 분이 몇 시간의 기다리기, 설치하기, 베타 빌드 관리하기로 변해버렸습니다.

프로덕션 앱이 어떤 Pull Request의 최신 변경 사항을 직접 기기에서 pull 할 수 있는 것이 뭔지 궁금하죠. 다시 설치하거나 앱 스토어 지연 없이.

그것이 바로 PR 프리뷰 PR 프리뷰는 개발자가 Pull Request를 열 때 GitHub 액션을 통해 전용 업데이트 채널을 생성하고 변경 사항을 게시합니다. 앱을 이미 설치한 모든 사용자는 해당 채널로 Switch하고 기능을 테스트하고 다시 Switch할 수 있습니다 - 앱을 이미 사용하고 있는 곳에서.

테스트 플라이트 문제

모바일 기능 테스트의 전통적인 워크플로는 다음과 같습니다:

1. 개발자가 PR를 열 때 - Code가 검토 준비가 됨
2. 테스트 플라이트 기다림 - 15-30 분의 처리 시간
3. 찾아 설치 - 테스터가 올바른 빌드를 찾습니다
4. 테스트 및 반복 - 모든 변경은 또 다른 기다림을 의미합니다

이것은 병목 현상을 만듭니다. QA 팀은 빌드가 완료될 때까지 기다리며, 제품 매니저는 기능을 신속하게 확인할 수 없습니다. 개발자들은 피드백을 기다리며 컨텍스트를 잃습니다. 업계에서는 이로 인한 생산성 손실 비용이 PR당 약 $340으로 추정됩니다.

PR 프리뷰의 작동 방식

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

1. PR이 열리거나 업데이트되면 - GitHub 액션 트리거
2. 빌드 업로드 - 당신의 JS/CSS 변경 사항은 PR별 채널로 전송됩니다
3. 게시물 - PR에 대한 지시를 받는 테스터
4. 즉시 테스트 - 채널 switch, 테스트, switch back

새로운 앱 설치가 필요하지 않습니다. 테스트 플라이트 지연이 없습니다. 동일한 프로덕션 앱은 다른 업데이트 채널에서 가져올 수 있습니다.

PR 전시 설정

PR 전시를 구현하기 전에 프로젝트는 Capgo Live Updates와 함께 구성되어야 합니다. Capgo quickstart guide를 따라야 합니다. Capgo Actions Workflow 생성

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 설정

1. __CAPGO_KEEP_0__ 관리판을 방문하세요 Capgo 설정 > Capgo 키
2. API 키를 생성하세요. 권한을 포함합니다.
3. __CAPGO_KEEP_0__ 저장소 비밀에 추가하세요 all 테스터가 채널을-switch하는 방법
4. 테스터는 두 가지 방법으로 PR 채널로 switch할 수 있습니다. CAPGO_TOKEN GitHub

__CAPGO_KEEP_0__

__CAPGO_KEEP_0__

Option 1: Shake Menu (Simplest)

Capacitor 설정에서 채널 선택기를 활성화하세요:

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

테스터들은 디바이스를 흔들어 디버그 메뉴를 열 수 있습니다. 이 메뉴에는 검색바가 있는 채널 목록이 나옵니다. 그들은 자신의 PR 채널(예를 들어)을 찾고 탭을 눌러 선택하면 앱이 자동으로 업데이트를 다운로드하고 적용합니다. 테스트가 끝나면 다시 흔들면 프로덕션으로 Switch합니다. pr-123shake menu는 자동으로 전체 흐름을 처리합니다:

채널을 가져옵니다.

1. 채널을 표시하고 특정 PR를 찾기 위해 검색을 사용합니다. listChannels()
2. 선택한 채널의 업데이트를 다운로드합니다.
3. Reload Now / Later 옵션으로 Reload을提示합니다.
4. Option 2: Custom Channel Selector UI

앱에 채널 switcher를 구축하여 사용 가능한 PR 채널 목록을 표시하고 테스터가 하나를 선택하도록 허용합니다. 이 작업은 두 가지 주요 API를 사용합니다:

self-assignment이 활성화된 채널을 가져옵니다.

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

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

네이티브 변경이 필요한 PR의 경우 테스트 플라이트/플레이 스토어 빌드를 배포해야 합니다. PR 미리보기는 자바스크립트, CSS, 자산 변경이 네이티브 code을 건드리지 않는 경우 가장 잘 작동합니다.

PR 미리보기의 이점

품질 보증 엔지니어

• PR 열릴 때 즉시 기능 테스트
• 다중 PR switch without reinstall
• 실제 장치에서 고정 및 회귀 검증
• 테스트 플라이트 처리 대기하지 않음

제품 관리자

• 기능이 병합되기 전에 리뷰
• PR에 직접 피드백
• implementation이 요구 사항과 일치하는지 확인
• 리뷰 사이클 시간 감소

개발자

• 변경에 대한 빠른 피드백
• Demo 기능을 스테이크 홀더에게 즉시 제공
• 특정 사용자와 문제를 디버그
• 베타 빌드 관리 시간을 줄이기

Traditional vs PR Previews 비교

필수

1. 선택 사항 (JS만 해당): 사용 pr-{number} 기존 convention을 사용하여 쉽게 식별
2. 자동 정리: PR이 닫힐 때 항상 채널을 삭제
3. 권한 제한: 디버그/스테이징 빌드에서만 shake 메뉴를 활성화
4. 프로세스 문서화: PR 템플릿에 테스트 지침을 추가
5. 실패를 부드럽게 처리: 채널 생성이 성공한 후에만 댓글을 게시

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

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

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

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

채널 서핑과 결합

PR 전시가 가장 잘 작동하는 경우는 채널 서핑과 결합할 때입니다. 앱은 다음과 같은 기능을 제공할 수 있습니다:- 모든 사용자에게 안정적인 릴리스

• production - 옵트인 사용자에게 이른 접근
• beta - 특정 PR에 대한 기능 전시
• pr-123 __CAPGO_KEEP_0__

테스터는 프로덕션 빌드를 사용하여 PR 채널을 임의로switch하고 기능을 테스트하고 다시 switch 할 수 있습니다. - 모든 동일한 설치 된 앱과 함께.

자원

• Capgo Live Updates Documentation
• 채널 문서
• 채널 서핑 가이드
• CLI Commands Reference
• PR Preview Solutions Page

결론

PR 전시회는 팀이 모바일 기능을 검토하고 테스트하는 방식을 전환합니다. TestFlight 처리를 기다리지 않고 여러 베타 빌드를 관리하는 대신, 테스터는 이미 설치 된 앱을 사용하여 몇 초 만에 PR 채널을 임의로 switch 할 수 있습니다.

설치는 최소화되었습니다 - 하나의 GitHub Actions workflow 파일 - 팀 내에서 이익이 쌓입니다. QA가 막힘없이 남아있고, 제품 매니저가 더 빠르게 검토하고, 개발자가 더 빠른 feedback을 받습니다.

시작하기 위해 workflow를 하나의 저장소에 추가하고, 리뷰 프로세스를 어떻게 변경하는지 확인하세요.

Turn Every Pull Request Into an Installable Preview에서 계속하세요.

If you are using Pull Request를 Installable Preview로 변환하세요 계획 채널 라우팅 및 스테이지드 롤아웃을 위해 사용하는 채널 채널 채널 채널 베타 테스트 솔루션 제품 워크플로우에서 사용하는 버전 목표 솔루션 __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ Capgo 제품 워크플로우에 대한 버전 목표 솔루션.