Codemagic을 이용한 Capacitor iOS 자동 빌드

Codemagic을 활용한 iOS 지속적 배포(CD)

사전 요구사항

튜토리얼을 시작하기 전에...

iOS developer program 멤버십
읽어보고 싶으시다면 😆…

가격 관련 중요 사항

Codemagic Action 가격

해당 서비스는 '무료'입니다 선택한 머신에 따라 매월 macOS M1 최대 500분까지 제공됩니다.
저희는 다음의 macOS M1 머신을 사용할 예정이며, 스크린샷에서 가격과 제한 사항을 확인할 수 있습니다 (가격은 튜토리얼 작성 시점 기준이며 향후 변경될 수 있습니다).

🔴 요구 사항과 가격을 확인하셨다면, 계속 진행해 볼까요?

📣 이 포스트에서는 iTunes Connect에 앱이 생성되어 있고 Apple 생태계 인증서를 보유하고 있다고 가정합니다. 나머지는 Codemagic가 모두 설정할 것입니다!

시작해 봅시다 🤿

포스트 주요 단계

Codemagic에서 App Store Connect API 사용하기
요구 사항
App Store Connect API 키 생성하기
App Store Connect API 키 사용하기
Fastlane 파일 복사
Codemagic 설정하기

1. Codemagic에서 App Store Connect API 사용하기

2021년 2월부터 App Store Connect에 로그인하려면 모든 사용자에게 2단계 인증이 필수입니다. Apple ID에 추가된 이 보안 계층은 본인만이 계정에 액세스할 수 있도록 보호합니다.
From Apple 지원

match를 시작하려면 기존 인증서를 취소해야 합니다. 하지만 걱정 마세요, 즉시 새 인증서를 발급받을 수 있습니다.

요구 사항

App Store Connect API를 사용하려면 Codemagic에 다음 세 가지가 필요합니다.

Issuer ID
Key ID
Key 파일 또는 Key 내용.

App Store Connect API Key 생성하기

키를 생성하려면 App Store Connect의 Admin 권한이 필요합니다. 권한이 없다면 담당자에게 이 문서를 전달하여 다음 지침을 따르도록 요청하세요.

1 — 다음 사이트에 로그인하세요: App Store Connect.

2 — 선택 사용자 및 액세스.

App Store Connect 사용자 액세스

API Keys 탭을 선택합니다.

App Store Connect API 키

4 — Generate API Key를 클릭하거나 Add (+) 버튼을 클릭합니다.

App Store Connect API 키 생성

5 — 키 이름을 입력하고 액세스 권한을 선택합니다. 다음을 권장합니다: App Manager 액세스 권한, Apple Developer Program 역할 권한에 대해 자세히 알아보려면 여기에서 확인하세요

App Store Connect API 키 생성 이름

6 — Generate를 클릭합니다.

API 키의 액세스 권한은 특정 앱으로 제한할 수 없습니다.

새 키의 이름, 키 ID, 다운로드 링크 및 기타 정보가 페이지에 표시됩니다.

App Store Connect 다운로드 키

다음 세 가지 필수 정보를 확인하세요: <1> Issue ID.
<2> Key ID.
<3> “Download API Key”를 클릭하여 API private key를 다운로드하세요. 다운로드 링크는 private key를 아직 다운로드하지 않은 경우에만 표시됩니다. Apple은 private key 사본을 보관하지 않으므로, 단 한 번만 다운로드할 수 있습니다.

🔴 private key를 안전한 곳에 보관하세요. 키를 타인과 공유하거나, code repository에 저장하거나, 클라이언트 측 code에 포함해서는 안 됩니다.

Codemagic에 App Store Connect API key 추가하기

Codemagic Team settings를 엽니다. code signing identities를 선택합니다. 그 다음 인증서를 업로드하세요
Members 섹션에서 키 추가 버튼.
다음 내용을 입력하세요: App Store Connect API key name. 이는 나중에 애플리케이션 설정에서 해당 키를 식별할 때 사용하는 이름입니다.
다음 내용을 입력하세요: Issuer ID 및 Key ID 값.
클릭하세요 .p8 파일 선택 또는 파일을 드래그하여 이전에 다운로드한 App Store Connect API 키를 업로드하세요.
클릭 저장.

이제 App Store Connect API 키로 Codemagic을 관리할 수 있습니다. 완료!

2. 인증서 및 프로비저닝 프로파일 생성

인증서

Xcode를 열고 다음으로 이동하세요: 설정 > Accounts > Apple ID > Teams 에서 팀을 선택하세요.

Code 서명 ID

클릭하세요 인증서 관리 > + 를 선택한 후 Apple Distribution.

Apple Distribution

을 선택하면 새 인증서를 생성할 수 있습니다.

그 다음 keychain으로 이동하여 인증서를 .p12 file.

그러려면 keychain에서 login keychain으로 전환한 뒤 My Certificates 탭을 선택하세요..

My Certificates 탭을 선택하세요.

다운로드할 인증서를 선택합니다. (인증서 날짜를 확인하세요)

인증서를 우클릭한 다음 Export를 선택합니다..

파일 형식을 선택하세요. 개인 정보 교환 파일 (.p12).

그러면 인증서가 파일로 .p12 다운로드됩니다.

Provisioning 프로파일

열기 Apple Developer 그리고 올바른 팀을 선택하세요.

그런 다음, 다음을 클릭해 새 프로필을 만드세요. +

새 프로필 만들기

그리고 다음을 선택하세요. App Store Connect.

App Store Connect 선택

그런 다음 올바른 앱을 선택해야 합니다. 와일드카드는 사용할 수 없으며, 사용하면 서명이 실패하니 주의하세요.

적절한 앱을 선택하세요

이전에 생성한 인증서 중 만료일이 오늘과 일치하는 것을 찾아 선택한 뒤 계속하기.

올바른 인증서 선택

마지막으로 프로파일 이름을 입력하고 생성.

이 이름은 Codemagic에서 프로파일을 식별하는 데 사용됩니다.

프로파일 생성

프로파일을 다음 형식으로 다운로드할 수 있습니다: .mobileprovision 다운로드됩니다.

프로필 다운로드

Code 서명 인증서 추가

Codemagic에서는 인증서와 사용에 필요한 개인 키가 모두 포함된 PKCS#12 아카이브 형식으로 code 서명 인증서를 업로드할 수 있습니다. 업로드 시 Codemagic에서 인증서 비밀번호(인증서에 비밀번호가 설정된 경우)와 함께 고유한 참조 이름(Reference name)을(를) 입력하라는 메시지가 표시되며, 이후 codemagic.yaml 설정에서 해당 파일을 가져오는 데 사용할 수 있습니다.

인증서 업로드
새 인증서 생성
Developer Portal에서 가져오기

Codemagic Team 설정으로 이동하여 codemagic.yaml 설정 > Code 서명 ID.
열기 iOS 인증서 탭하세요.
다음 항목을 클릭하여 인증서 파일을 업로드하세요: .p12 또는 .pem 파일 선택 또는 지정된 영역으로 파일을 드래그하세요.
다음 항목을 입력하세요: 인증서 비밀번호 를 입력하고 참조 이름.
클릭 인증서 추가

프로비저닝 프로파일 추가 중

Codemagic을 사용하면 애플리케이션에 사용할 프로비저닝 프로파일을 직접 upload하거나 Apple Developer Portal에서 프로파일을 가져올 수 있습니다.

Code signing identities에 추가된 각 프로파일의 유형, 팀, bundle id 및 만료일이 표시됩니다. 또한, Codemagic은 Code signing identities에 일치하는 code signing certificate가 있는지 여부를 알려줍니다 (일치하면 Certificate 필드에 체크 표시가 나타납니다).

3. Codemagic 설정하기

Codemagic secrets 구성하기

다음 값들이 어디서 ENV 가져오는지 궁금하셨나요? 이제 비밀이 아닙니다. 바로 프로젝트의 secret에서 가져오는 것입니다. 🤦

4. Codemagic workflow 파일 구성하기

프로젝트 루트에 codemagic.yml 라는 이름의 파일을 생성하고 다음 내용을 추가하세요.

workflows:
  ionic-capacitor-ios-workflow:
    name: Capacitor iOS Workflow
    max_build_duration: 120
    instance_type: mac_mini_m1
    integrations:
      app_store_connect: CodeMagic
    environment:
      ios_signing:
        distribution_type: app_store
        bundle_identifier: YOUR_BUNDLE_IDENTIFIER
      vars:
        XCODE_WORKSPACE: ios/App/App.xcworkspace
        XCODE_SCHEME: App
        APP_STORE_APP_ID: YOUR_APP_STORE_APP_ID
      node: v20.14.0
      xcode: 15.4
      cocoapods: default
    triggering:
      events:
        - tag
      tag_patterns:
        - pattern: '*'
          include: true
    scripts:
      - name: Install dependencies
        script: |
          npm install
      - name: Cocoapods installation
        script: |
          cd ios/App && pod install
      - name: Update dependencies and copy web assets to native project
        script: |
          npm run build
          npx cap sync ios
      - name: Set up code signing settings on Xcode project
        script: |
          xcode-project use-profiles
      - name: Increment build number
        script: |
          cd $CM_BUILD_DIR/ios/App
          LATEST_BUILD_NUMBER=$(app-store-connect get-latest-app-store-build-number "$APP_ID")
          agvtool new-version -all $(($LATEST_BUILD_NUMBER + 1))
      - name: Build ipa for distribution
        script: |
          xcode-project build-ipa \
            --workspace "$XCODE_WORKSPACE" \
            --scheme "$XCODE_SCHEME"
    artifacts:
      - build/ios/ipa/*.ipa
      - /tmp/xcodebuild_logs/*.log
      - $HOME/Library/Developer/Xcode/DerivedData/**/Build/**/*.app
      - $HOME/Library/Developer/Xcode/DerivedData/**/Build/**/*.dSYM
    publishing:
      email:
        recipients:
          - YOUR_EMAIL
        notify:
          success: true # To not receive a notification when a build succeeds
          failure: false # To not receive a notification when a build fails
      app_store_connect:
        auth: integration
        # Configuration related to TestFlight (optional)
        # Note: This action is performed during post-processing.
        submit_to_testflight: true
        # Configuration related to App Store (optional)
        # Note: This action is performed during post-processing.
        submit_to_app_store: false

이 workflow는 수동으로 실행하거나 각 GitHub 이후에 트리거되도록 설정해야 합니다. 태그가 있습니다tag 자동화가 필요하면 다음을 참고하세요: GitHub actions를 이용한 자동 빌드 및 릴리스 먼저입니다.

그 다음 이 워크플로우가 NodeJS 의존성을 가져와 설치하고 JavaScript 앱을 빌드합니다.

새로운 태그를 보낼 때마다 TestFlight용 릴리스가 빌드됩니다.

앱에 Ionic을 사용할 필요는 없으며, Capacitor 기반만 필수입니다. 기존 Cordova 모듈이 있어도 되지만, Capacitor JS 플러그인을 사용하는 것이 좋습니다.

5. 워크플로우 트리거

워크플로우 트리거하기

브랜치에 새 커밋 푸시하기 main 또는 development 워크플로우를 트리거하려면

커밋으로 시작됨

몇 분 후, App Store Connect 대시보드에서 빌드를 확인할 수 있습니다.

Testflight 대시보드

수동 시작

워크플로우를 수동으로 시작할 수 있습니다.

먼저 빌드할 앱을 선택한 다음, 다음을 클릭하세요: 새 빌드 시작.

앱 선택

그 다음 빌드할 브랜치를 선택하세요.

브랜치 선택

그리고 다음을 클릭하세요: 새 빌드 시작.

그다음 빌드 목록으로 이동하세요.

빌드 목록

빌드를 클릭하여 결과를 확인하세요.

빌드 결과

로컬 머신에서 배포가 가능한가요?

네, 아주 간편하게 가능합니다.

기존처럼 Xcode를 사용하여 앱을 빌드하고 서명할 수 있습니다.

감사합니다

이 블로그는 다음 문서들을 바탕으로 작성되었습니다:

Codemagic을 활용한 자동 Capacitor IOS build 단계로 나아가기

사용 중이라면 Codemagic을 이용한 자동 Capacitor IOS build CI/CD 자동화를 계획하려면, 다음을 연결하세요 Capgo CI/CD 설정하기 Capgo CI/CD의 제품 워크플로우용, Capgo Native Build Capgo Native Builds의 제품 워크플로우용, Capgo 연동 서비스 Capgo Integrations의 제품 워크플로우용, CI/CD 통합 CI/CD Integration의 구현 상세 내용은, GitHub Actions 연동 GitHub Actions Integration의 구현 세부 사항을 참고하세요.