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

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

프로덕션 앱이 어떤 Pull Request의 최신 변경 사항을 직접 장치에 pull 할 수 있는 것이 가능하다면?

그것은 PR 전시회 설정. 개발자가 pull request를 열 때, GitHub 액션은 전용 업데이트 채널을 생성하고 변경 사항을 게시합니다. 이미 설치한 앱을 사용하는 모든 사용자는 채널을switch하고 기능을 테스트하고 다시 switch할 수 있습니다 - 모든 것이 앱을 이미 사용하고 있는 동안입니다.

테스트 플라이트 문제

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

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

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

How PR Previews Work

PR 전시회는 Capgo의 채널 시스템을 사용하여 각 PR 업데이트를 위한 스트림을 생성합니다. 여기서의 흐름은 다음과 같습니다.

PR이 열리거나 업데이트되면 - GitHub 액션 트리거
배포 패키지 업로드 - 당신의 JS/CSS 변경 사항은 PR에 특화된 채널로 이동
댓글 작성 - 테스터들은 PR에 대한 지침을 받습니다.
즉시 테스트 - 채널을 전환하고 테스트하고 다시 돌아오세요.

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

PR 전시회 설정

프로젝트를 Capgo Live Updates와 함께 구성해야만 PR 미리보기 구현이 가능합니다. Capgo Live Updates에 대한 지침을 따르세요. Capgo Live Updates 빠른 시작 지침 __CAPGO_KEEP_0__ Live Updates 빠른 시작 지침을 이미 읽었다면 건너 뛰세요.

GitHub Live Updates Actions Workflow

만들기 .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__ channel에 있습니다. 이 channel을 사용하여 tester는 app 내에서 channel switch를 사용할 수 있습니다. --self-assign __CAPGO_KEEP_0__ channel switch setChannel() API Live Updates 토큰 설정

Capgo Live Updates 대시보드로 이동하세요.

__CAPGO_KEEP_0__ Live Updates 설정 > __CAPGO_KEEP_0__ Live Updates 키 Capgo Live Updates 키
API Live Updates 키
새 키를 __CAPGO_KEEP_0__와 함께 생성하세요. all 권한
__CAPGO_KEEP_0__에 추가하세요 CAPGO_TOKEN GitHub 저장소 비밀에 추가하세요

테스터가 채널을 Switch하는 방법

테스터가 PR 채널로 switch하는 방법은 두 가지입니다.

Capacitor config에서 채널 선택기와 함께 shake 메뉴를 활성화하세요.

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

테스터는 장치를 흔들어 디버그 메뉴를 열고, 검색바가 있는 채널 목록을 표시합니다. 그들은 PR 채널(예를 들어)을 찾고, 탭을 클릭하여 선택하고, 앱이 자동으로 업데이트 다운로드 및 적용합니다. 테스트가 끝나면 다시 장치를 흔들어 프로덕션으로 switch합니다. pr-123shake 메뉴는 자동으로 전체 흐름을 처리합니다:

자신이 assign할 수 있는 채널을 모두 fetch합니다.

fetch listChannels()
Channels을 검색하여 특정 PR를 찾을 수 있는 화면을 표시합니다.
선택 후 업데이트를 다운로드합니다.
“Reload Now” / “Later” 옵션을 선택하여 다시 로드합니다.

Option 2: 사용자 지정 채널 선택기 UI

테스터가 하나를 선택할 수 있도록 앱에 채널 Switcher를 빌드하세요. 이 기능은 두 가지 주요 API를 사용합니다:

listChannels() - 자체 할당이 가능하도록 모든 채널을 가져옵니다.
setChannel() - 선택한 채널으로 장치를 Switch합니다.

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 예시판은 JavaScript, CSS 및 자산 변경이 네이티브 code을 건드리지 않는 경우 가장 잘 작동합니다.

PR 예시판의 이익을 누리는 사람들

QA 엔지니어

페이지/영역: Capgo 솔루션 마케팅 페이지. 역할: 짧은 UI 레이블 또는 네비게이션 아이템. seen in: page solutions/pr-preview.astro. 메시지 키 `solutions_pr_preview_teams_qa` (Solutions Pr Preview Teams Qa).
PR이 열릴 때 테스트 기능을 즉시 테스트합니다.
다중 PR 간에-switching을 위해 재설치 없이
실제 장치에서 고정 및 회귀를 확인합니다.

테스트 플라이트 처리 대기 시간이 더 이상 없습니다.

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

개발자

변경에 대한 더 빠른 피드백을 받으세요
스태커홀더에게 기능을 즉시 데모하세요
특정 사용자와 문제를 디버깅하세요
베타 빌드 관리 시간을 줄이세요

Traditional vs PR Previews 비교

면	테스트 플라이트/베타	Capgo PR Preview
빌드 시간	15-30분	1분 이하
PR 전환	5분 이상 재설치	10초
설치 복잡도	애플 스토어 인증	1개의 워크플로 파일
정리	수동	자동화
code	필수	선택(JS만)

최선의 방법

이름을 명확하게 채널: 사용 pr-{number} 규칙을 쉽게 식별하기 위해
자동 정리: PR이 닫힐 때 항상 채널을 삭제
접근 제한: 디버그/스테이징 빌드에서만 shake 메뉴를 활성화
프로세스를 문서화하세요.: PR 템플릿에 테스트 지침을 추가하세요.
실패를 가다듬으세요.: 채널 생성이 성공적으로 완료되기 전에 댓글을 게시하세요.

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

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

새 Capacitor 플러그인
iOS native code changes
iOS 네이티브 code 변경
Android 네이티브 __CAPGO_KEEP_0__ 변경

네이티브 빌드에 영향을 미치는 의존성 업데이트

이러한 변경 사항은 전통적인 테스트 플라이트/플레이 스토어 배포가 필요합니다.

PR 예고는 다음과 함께 가장 잘 작동합니다. 채널 스루핑앱은 다음과 같은 것을 가질 수 있습니다.

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

테스터는 프로덕션 빌드에서 PR 채널을 전환하여 기능을 테스트하고 다시 전환할 수 있습니다. - 동일한 설치된 앱으로.

자원

결론

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

설치는 최소한으로 유지됩니다 - 하나의 GitHub Actions 워크플로 파일 - 이에 대한 이익은 팀 내에서 쌓입니다. QA가 막힘없이 유지되고, 제품 매니저가 더 빠르게 검토하고, 개발자가 더 빠른 feedback을 받습니다.

첫 번째 리포지토리에 워크플로를 추가하여 리뷰 프로세스를 어떻게 바뀌는지 확인하세요.

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

Turn Every Pull Request Into an Installable Preview를 사용하는 경우 Turn Every Pull Request Into an Installable Preview Turn Every Pull Request Into an Installable Preview를 사용하여 채널 라우팅과 스테이지드 롤아웃을 계획하고, 그것을 Channels와 연결하세요. Channels Channels context Channels 채널 Channels 베타 테스트 솔루션 Channels Channels 버전 대상 솔루션

Pull Request를 Installable Preview로 변환하세요