Capacitor 앱을 위한 CI/CD 설정하기

iOS와 Android 앱 릴리스를 더 빠르고 오류 없이 하고 싶으신가요? Capacitor 앱용 CI/CD 파이프라인은 빌드, 테스트, 배포를 자동화하여 릴리스 시간을 최대 70% 단축하고 오류를 60% 줄입니다. 이 가이드에서는 환경 설정부터 Capgo를 통한 실시간 업데이트 자동화까지 알아야 할 모든 것을 다룹니다.

주요 내용:

Capacitor 앱에서 CI/CD가 중요한 이유: 빌드 속도 78% 향상 및 스토어 거부율 60% 감소
필수 도구: Xcode, Android Studio, CocoaPods 등
파이프라인 설정: npx cap sync, 종속성 캐싱, 플랫폼별 빌드와 같은 작업 자동화
Capgo를 통한 실시간 업데이트: 단계별 출시 및 롤백 안전장치가 포함된 릴리스 후 업데이트 활성화

빠른 설정 단계:

환경 준비: iOS 및 Android용 필수 도구 설치
프로젝트 구성: capacitor.config.ts 업데이트 및 환경 변수 안전하게 관리
빌드 파이프라인: 양 플랫폼의 종속성 설치, 빌드, 테스트 자동화
성능 최적화: 캐싱, 병렬 빌드, 조건부 워크플로우 사용
실시간 업데이트 추가: 단계별 출시가 가능한 안전한 OTA 업데이트를 위해 Capgo 통합

CI/CD를 통해 Capacitor 앱은 오류와 수동 개입을 최소화하면서 더 빠르고 원활한 릴리스를 달성합니다. 워크플로우를 최적화할 준비가 되셨나요? 자세히 알아보겠습니다!

기존 CI/CD 파이프라인에 모바일 기능 통합하기

CI/CD 환경 준비하기

CI/CD의 기본을 파악했다면, 다음 단계는 환경을 설정하는 것입니다. 이는 안정적인 자동화의 근간이 됩니다.

도구 및 소프트웨어 설정

다음 주요 도구들이 설치되어 있는지 확인하세요:

iOS 개발용:

Xcode 14 이상
Xcode Command Line Tools
의존성 관리를 위한 CocoaPods

Android 개발용:

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

Xcode Command Line Tools가 설치되어 있는지 확인하려면 다음을 사용하세요:

xcode-select -p

Capacitor 프로젝트 생성

Capacitor

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

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

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

환경 변수 설정

자격 증명을 안전하게 관리하는 것은 환경 설정과 CI/CD 파이프라인을 연결하는 핵심 부분입니다.

정의해야 할 주요 변수:

BUILD_ENV: 배포 단계 지정 (예: production)
IOS_SIGNING_IDENTITY: 코드 서명 인증서
ANDROID_KEYSTORE_PATH: Android 키스토어 경로

Android 빌드의 경우, CI 프로세스 중에 local.properties 파일을 동적으로 생성:

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

iOS 빌드 작업 시에는 CI 플랫폼이 macOS 에이전트를 지원하는지 확인하세요.

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

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

키와 자격 증명을 적절히 관리하면 앞서 언급된 통계 [1]와 같이 앱 스토어 거부율을 크게 낮출 수 있습니다.

[계속…]

Capacitor 앱을 만드는 방법

Capacitor 앱을 만드는 과정은 다음과 같은 간단한 단계로 이루어집니다:

환경 설정: 시스템에 Node.js와 npm을 설치합니다. 그런 다음 Ionic CLI를 사용하여 Capacitor 지원이 포함된 새 프로젝트를 시작합니다:
Terminal window

npm install —ignore-scripts npm install @capacitor/cli

2. **플랫폼 지원 추가**: iOS나 Android와 같이 대상으로 하는 플랫폼을 추가합니다:

    ```yaml
- task: Cache@2
  inputs:
    key: 'npm | "$(Agent.OS)" | package-lock.json'
    path: |
      node_modules
      android/.gradle
      ios/Pods

웹 코드 동기화: 다음 명령을 실행하여 웹 코드가 네이티브 플랫폼과 동기화되도록 합니다:

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

동기화 단계는 플랫폼 전반에 걸쳐 앱의 일관성을 유지하고 CI/CD 파이프라인에서 원활한 작동을 보장하는 데 매우 중요합니다. 환경 설정에 대한 자세한 내용은 도구 섹션을 확인하세요.