메인 콘텐츠로 건너뛰기

Setting Up CI/CD for Capacitor Apps

iOS 및 Android 앱 릴리스를 위한 CI/CD PIPELINE을 사용하여 효율성을 높이고 오류를 줄여보세요.

마틴 도나디우

마틴 도나디우

콘텐츠 마케터

Setting Up CI/CD for Capacitor Apps

iOS 및 Android 앱 릴리스를 더 빠르게, 오류가 없는 것처럼 원하시나요? CI/CD PIPELINE Capacitor 애플리케이션을 자동화하여 빌드, 테스트 및 배포를 수행하여 70%까지의 릴리즈 시간을 단축하고 60%까지의 오류를 줄입니다. 이 가이드에서는 환경 설정부터 라이브 업데이트 자동화를 포함하여 모든 것을 다룹니다. Capgo.

Key Takeaways:

  • CI/CD가 Capacitor애플리케이션에 중요한 이유는 무엇입니까?
  • 속도 향상: 78%의 빌드 속도 향상 및 60%의 스토어 거부 감소: 중요한 도구, Xcode, Android StudioCocoaPods
  • Pipeline 설정: 자동화된 작업들, npx cap sync, 의존성 캐싱, 및 플랫폼 특정 빌드.
  • : Capgo: 릴리스 후 업데이트를 활성화하고 phased 롤아웃 및 롤백 보장과 함께.

빠른 설정 단계:

  1. 환경 준비: iOS 및 Android용 필요한 도구를 설치.
  2. 프로젝트 구성: capacitor.config.ts 및 환경 변수를 안전하게 관리.
  3. 빌드 PIPELINECI/CD를 자동화하여 양쪽 플랫폼에 대한 의존성 설치, 빌드 및 테스트를 자동화하세요.
  4. 성능 최적화: 캐싱, 병렬 빌드 및 조건부 워크플로우를 사용하여 성능을 최적화하세요.
  5. 실시간 업데이트 추가: Capgo를 사용하여 안전하고 OTA 업데이트와 phased rollouts를 위한 Capgo를 통합하세요.

CI/CD를 사용하면 Capacitor 앱이 더 빠르고 smoother한 릴리즈를 달성하며 오류 및 수동 개입을 최소화합니다. 워크플로우를 최적화하려면 준비가 되었나요? 시작해 보세요!

CI/CD Pipelines에 모바일 기능을 통합하세요.

CI/CD 환경 준비

CI/CD의 기본적인 개념을 이해한 후, 환경 설정을 시작하세요. 이는 신뢰할 수 있는 자동화의 근간입니다.

도구 및 소프트웨어 설정

다음 키 도구가 설치되어 있는지 확인하세요:

For iOS Development:

  • Xcode 14 이상
  • Xcode Command Line Tools
  • CocoaPods 의 종속성 관리

For Android Development:

  • Android Studio
  • Android SDK 33 이상
  • Java Development Kit (JDK)

Xcode Command Line Tools가 설치되어 있는지 확인하려면:

xcode-select -p

생성하는 Capacitor 프로젝트

Capacitor 프레임워크 문서

Capacitor 프로젝트는 CI/CD 워크플로우를 위해 올바르게 구성되어야 합니다. 이 capacitor.config.ts 파일은 이 설정의 핵심입니다:

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

이 파일은 프로젝트가 CI/CD 요구 사항과 일치하도록 보장합니다.

환경 변수 설정

환경 변수를 안전하게 관리하는 것은 CI/CD pipeline와 환경 설정을 연결하는 데 중요한 부분입니다.

정의해야 하는 주요 변수:

  • BUILD_ENV: 배포 단계를 지정합니다 (예: production)
  • IOS_SIGNING_IDENTITY: code 서명 인증서
  • ANDROID_KEYSTORE_PATH: 안드로이드 키스토어의 경로

안드로이드 빌드의 경우 동적으로 키스토어를 생성합니다. local.properties 파일을 CI 프로세스 중에:

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

iOS 빌드와 작업할 때, CI 플랫폼이 macOS agent를 지원하는지 확인하세요.

환경이 준비되었는지 확인하려면:

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

키 및 자격 증명 관리를 적절하게 하여 앱 스토어 거절의 가능성을 낮추세요. 이에 대한 통계는 이전에 언급되었습니다. [1].

CI/CD PIPELINE을 생성하세요.

환경이 준비되었을 때, 다음 단계는 __CAPGO_KEEP_0__ 앱에 대한 CI/CD PIPELINE을 설정하는 것입니다. Capacitor app의존성 설치 및 업데이트

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

배포 시 플랫폼별 아티팩트 처리를 설정합니다.

플랫폼 아티팩트 유형 배포 채널
iOS .ipa 앱 스토어 연결
안드로이드 .aab 구글 플레이 콘솔

병렬 빌드 설정이 올바르게 구성되면 pipeline 실행 시간을 크게 줄일 수 있습니다.

빌드가 검증되고 패키징이 완료되면 Capgo (다음 섹션에서 설명)에 대한 라이브 업데이트 준비가 완료되었습니다.

sbb-itb-f9944d2

추가 Capgo 라이브 업데이트

Capgo 라이브 업데이트 대시보드 인터페이스

CI/CD 프로세스를 향상시키기 위해 Capgo를 통합하면 릴리스 후 업데이트를 활성화할 수 있습니다. 이 방법으로 설정하는 방법은 다음과 같습니다.

Capgo Pipe라인 구성

첫 번째로 pipeline 환경에서 __CAPGO_KEEP_0__ __CAPGO_KEEP_1__을 설치하세요. Capgo CLI 다음으로 빌드 단계 후 업로드 명령을 포함하세요.

steps:
  - name: Install Capgo CLI
    run: npm install -g @capgo/cli
  - name: Configure Authentication
    env:
      CAPGO_KEY: ${{ secrets.CAPGO_API_KEY }}

업데이트를 보안적으로 처리하기 위해, 다음과 같은 유효성 검사 설정을 구성하세요. __CAPGO_KEEP_0__ __CAPGO_KEEP_1__

__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_0____CAPGO_KEEP_1__

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

Capgo 기능 개요

기능 설명
완전한 암호화 배포 오류를 크게 줄입니다.
채널 기반 배포 특정 환경에 맞춰 업데이트를 조정합니다.
단계별 배포 업데이트를 점진적으로 배포합니다.

OTA 업데이트 지침

배포 후 테스트 프로세스를 향상시키기 위해 다음 주요 지표를 추적하세요.

단계별 배포 전략

업데이트 배포를 제어하는 데 스테이지드 롤아웃을 사용하십시오:

- 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

pipeline 성능 향상

pipeline 성능 향상을 위한 3가지 주요 영역에 집중하면 pipeline 성능이 눈에 띄게 향상될 수 있습니다:

구축 속도 최적화

웹 전용 변경 사항의 경우, npx cap sync can save time by skipping full native rebuilds, reducing rebuild time by about 40%. Here’s how you can implement conditional building:

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

이 접근 방식은 필요 한 구성 요소만 다시 빌드하므로 프로세스를 단순화합니다.

버전 관리 자동화

버전 관리를 자동화하면 워크플로가 단순화됩니다. 다음 스크립트를 사용하여 버전 및 빌드 번호를 동적으로 설정할 수 있습니다.

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

이러한 관행은 다음과 같은 메트릭을 통해 PIPELINE 성능 추적 및 개선에 대한坚固한 프레임워크를 제공합니다.

  • 구축 시간 per stage
  • 캐시 효율성 (hit/miss ratios)
  • Peak 리소스 사용

다중 환경 설정

다양한 환경을 관리하는 것은 환경별로 구분된 설정을 사용하여 단순화할 수 있습니다. 예를 들어 다음과 같은 설정을 사용할 수 있습니다:

환경 설정 파일
개발 .env.dev
스테이징 .env.staging
운영 보안 보관함

이 스크립트를 사용하여 환경을 동적으로 구성할 수 있습니다:

- 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의 채널 기반 배포와 Pairing하면 환경별로 정확한 업데이트를 제공하고 smoother rollout 및 다양한 환경에서 애플리케이션 동작에 대한 더 나은 제어를 제공합니다.

요약

개발의 역할

Capacitor 앱을 위한 CI/CD pipeline을 사용하면 workflow의 효율성이 크게 향상됩니다. 업계 데이터에 따르면 팀은 50-70% 빠른 릴리스 주기 iOS와 Android 빌드가 동시에 진행되기 때문에 [3]. 의존성 설치 및 플랫폼 동기화와 같은 작업을 자동화하면 배포 오류를 40-60% [1][2].

예를 들어, Azure DevOps pipeline을 사용하는 팀은 순차적인 빌드 단계와 Xcode 패키징과 같은 자동화된 프로세스를 구축했습니다. 또한 개발 및 프로덕션 환경 모두에서 매개 변수화된 환경을 사용했습니다. 이 접근 방식은 Gradle 및 Xcode CLI 작업의 수동 작업이 필요하지 않도록 하여, 매번 신뢰할 수 있는 아티팩트 생성을 보장합니다.

이러한 개선 사항은 업데이트 관리를 단순화할 수 있는 기반을 마련합니다. Capgo와 pair하면.

Capgo : 업데이트 관리

Capgo는 CI/CD pipeline과 완벽하게 호환되며, 앱 스토어 정책 준수와 동시에 즉시 업데이트를 제공합니다. 업데이트는 pipeline 내에 구축된 자동화된 테스트 게이트를 통과한 후에만 배포됩니다.

자동화된 빌드와 phased rollouts를 combination하면 팀이 다음과 같은 놀라운 결과를 달성할 수 있습니다: 7일 이내에 80%의 사용자 커버리지 1시간 이내의 롤백 기능

병렬 배포 트랙을 실행하는 일반적인 전략을 사용합니다. 자동화된 빌드는 내부 테스트에 사용되며, phased rollouts는 사용자 세그먼트를 대상으로합니다. 이로써 업데이트는 빠르면서도 안전하며, 엄격한 자동화된 테스트 게이트에 의해 뒷받침됩니다. [1].

FAQ

How to create a Capacitor app?

Building a Capacitor app involves a few straightforward steps:

  1. 환경 설정: Install Node.js and npm on your system. Then, use the Ionic CLI to start a new project with Capacitor support:

    ionic start myApp tabs --capacitor
  2. 플랫폼 지원 추가: iOS 또는 Android과 같은 목표 플랫폼을 추가하세요.

    npx cap add ios
    npx cap add android
  3. Sync your web code: Ensure your web code is aligned with the native platforms by running:

    npx cap sync

동기화 단계는 CI/CD PIPELINE에서 앱이 smooth하게 작동하도록 하기 위해 플랫폼 간 일관성을 유지하는 데 중요합니다. 환경 설정에 대한 자세한 내용은 Tools 섹션을 참조하세요.

Keep going from Setting Up CI/CD for Capacitor Apps

Capgo 앱 CI/CD 설정을 사용하는 경우 Setting Up CI/CD for Capacitor Apps CI/CD 자동화 계획을 수립하기 위해 연결하세요. Capgo CI/CD 제품 워크플로우에서 Capgo CI/CD를 사용하세요. Capgo 네이티브 빌드 제품 워크플로우에서 Capgo 네이티브 빌드를 사용하세요. Capgo 통합 제품 워크플로우에서 Capgo 통합을 사용하세요. CI/CD 통합 제품 워크플로우에서 CI/CD 통합을 사용하세요. GitHub Actions Integration GitHub 액션 통합

Capacitor 앱

Capgo 앱

__CAPGO_KEEP_0__ 앱

__CAPGO_KEEP_0__ 앱

__CAPGO_KEEP_0__ 앱

Capgo 앱