메인 콘텐츠로 바로가기
CI/CD

자동 Capacitor IOS 빌드와 Codemagic

Codemagic와 Codemagic을 사용하여 5분 이내에 IOS Ionic 앱의 CI/CD PIPELINE을 설정하는 방법 (2024)

마틴 도나디우

마틴 도나디우

콘텐츠 마케터

자동 Capacitor IOS 빌드와 Codemagic

Codemagic을 사용한 iOS의 지속적인 배포

준비 사항

이 튜토리얼을 계속하기 전에...

  • iOS 개발자 프로그램 회원 가입
  • 읽고 싶은 욕망 😆…

가격에 대한 중요한 점

가격 Codemagic 액션

https://codemagic.io/pricing/

서비스는 ‘무료’ 월 500개 이하의 macOS M1 분/월, 선택한 기계에 따라 달라집니다.
우리는 macOS M1 기계를 사용할 것입니다, 스크린샷에서 가격과 제한을 볼 수 있습니다 (가격은 튜토리얼이 생성된 시점의 가격으로, 미래에 변경될 수 있습니다) 요구 사항과 가격에 대해 경고한 후, 좋으면 계속하겠습니다…

🔴 포스트에서 우리는 iTunes connect에서 앱을 생성했으며, 애플 생태계의 인증서를 가지고 있다고 가정합니다. 모든 설정은 Codemagic에 의해 설정됩니다!

📣 우리가 계속하기 전에, 좋으면 가격에 대한 요구 사항을 확인해 주세요.

Let's dive in 🤿

포스트를 따라야 할 단계

  1. Codemagic과 함께 App Store Connect API 사용하기
  2. 필요 조건
  3. App Store Connect API 키 만들기
  4. App Store Connect API 키 사용하기
  5. Fastlane 파일 복사하기
  6. Codemagic 설정하기

1. Codemagic과 함께 App Store Connect API 사용하기

2021년 2월부터 모든 사용자가 App Store Connect에 로그인하기 위해 2단계 인증 또는 2단계 인증이 필요합니다. Apple ID에 대한 추가 보안层는 계정에 대한 액세스를 제한하여 계정에 대한 액세스를 보장합니다.
From 애플 지원

match와 함께 시작하려면 기존 인증서를 취소해야 합니다. 그러나 걱정하지 마십시오. 새로운 인증서를 직접 받을 것입니다.

요구 사항

App Store Connect API를 사용하려면 Codemagic이 API를 사용할 수 있어야 합니다. 세 가지. 발급자 ID.

  1. 키 ID.
  2. 키 파일 또는 키 내용.
  3. App Store Connect __CAPGO_KEEP_0__ 키 생성

Creating an App Store Connect API Key

1 — App Store Connect에 로그인하십시오.

App Store Connect에 로그인하십시오. App Store Connect에 로그인하십시오..

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

앱 스토어 연결 사용자 액세스

3 — API 키 탭을 선택하세요.

앱 스토어 연결 API 키

4 — API 키 생성하기 또는 (+) 버튼을 클릭하세요.

앱 스토어 연결 API 키 생성

5 — 키 이름을 입력하고 액세스 권한을 선택하세요. 우리는 App Manager 권한, 애플 개발자 프로그램 역할 권한에 대해 더 알아보세요. 앱 스토어 연결 __CAPGO_KEEP_0__ 키 이름

App Store Connect API keys create name

7 — 액세스 권한을 선택하세요. 우리는 권한, 애플 개발자 프로그램 역할 권한에 대해 더 알아보세요.

어떤 앱에 한정된 접근 권한을 가진 API 키의 접근 권한을 제한할 수 없습니다.

__CAPGO_KEEP_0__ 키의 이름, 키 ID, 다운로드 링크 및 기타 정보가 페이지에 나타납니다.

애플 스토어 연결 다운로드 키

다음 세 가지 필요한 정보를 모두 가져오십시오: <1> 문제 ID.
<2> 키 ID.
<3> "API 키 다운로드"를 클릭하여 API 개인 키를 다운로드하세요. 다운로드 링크는 개인 키가 아직 다운로드되지 않은 경우에만 나타납니다. 애플은 개인 키의 복사본을 유지하지 않습니다. 따라서 개인 키를 한번만 다운로드할 수 있습니다.

🔴 Store your private key in a safe place. You should never share your keys, store keys in a code repository, or include keys in client-side code.

애플 스토어 연결 API 키를 코덤판믹스에 추가하는 것입니다.

  1. 코덤판믹스 팀 설정을 열어보세요. 팀 통합 선택 팀 열기 code 서명 식별자를 선택하세요. Select code 인증서 인증서를 업로드하세요. 인증서 업로드

  2. 버튼을 클릭하세요. 키 추가 버튼을 클릭하세요.

  3. 이 키는 애플리케이션 설정에서 나중에 키를 참조할 때 사용하는 키 이름입니다. App Store Connect API key name키 이름

  4. Issuer ID 값을 입력하세요. Key ID 버튼을 클릭하세요.

  5. 버튼을 클릭하세요. __CAPGO_KEEP_0__ 파일을 선택하세요. 또는 App Store Connect API 키를 다운로드 한 이전에 업로드하기 위해 파일을 드래그하세요.

  6. Click 저장.

App Store Connect API 키를 사용하여 Codemagic을 관리할 수 있게 되었습니다. 좋습니다!

2. 인증서 및 배포 프로파일을 생성하세요.

인증서

XCode를 열고 설정 > 계정 > Apple ID > Teams 팀을 선택하세요.

Code signing identities

클릭 인증서 관리 > + Apple Distribution Apple Distribution.

그런 다음 새로운 인증서를 만들 수 있습니다.

팀을 선택하세요.

그런 다음 키 체인으로 이동하여 인증서를 파일로 다운로드해야 합니다. .p12 이를 위해 키 체인으로 이동하여 로그인 키 체인을 전환하고 "My Certificates" 탭으로 이동해야 합니다.

로그인 키 체인으로 이동하여 "My Certificates" 탭으로 이동해야 합니다. 로그인 키 체인 My Certificates My Certificates.

그런 다음 다운로드하고자 하는 인증서를 선택할 수 있습니다. (인증서의 날짜를 확인하세요)

그런 다음 인증서 오른쪽 클릭 후 "Export"를 선택해야 합니다.

Export 파일 형식 선택.

Personal Information Exchange (.p12) Personal Information Exchange (.p12).

그것은 인증서를 파일로 다운로드 할 것입니다. .p12 파일입니다.

프로비전 프로파일

열기 애플 개발자 그리고 올바른 팀을 선택하십시오.

그런 다음 새로운 프로파일을 만들려면 +

새로운 프로파일 만들기

그리고 선택하십시오. 앱 스토어 연결.

앱 스토어 연결 선택하십시오.

그런 다음 올바른 앱을 선택하십시오, 주의해야 합니다. 와일드 카드 사용할 수 없습니다. 그렇지 않으면 서명이 실패합니다.

올바른 앱을 선택하세요.

앞서 생성한 인증서를 선택하세요. (만료일이 오늘과 같은 날짜와 월일을 확인하세요). Continue.

올바른 인증서를 선택하세요.

마지막으로 프로필 이름을 입력하고 Generate.

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

프로필을 생성하세요.

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

__CAPGO_KEEP_0__ 인증서를 추가하세요.

Code 인증서를 추가하세요.

Codemagic는 code 서명 인증서를 PKCS#12 아카이브로 업로드 할 수 있게 해줍니다. 이 아카이브에는 인증서와 필요한 개인 키가 포함되어 있습니다. 업로드할 때, Codemagic는 인증서가 암호화된 경우 인증서 암호를 요청하고, 고유한 Reference name,을 제공하도록 요청합니다. 이 고유한 codemagic.yaml configuration

  • 에서 특정 파일을 가져오기 위해 사용할 수 있습니다.
  • 인증서 업로드
  • 새 인증서 생성
  1. 개발자 포털에서 가져오기 Codemagic 팀 설정을 열고 codemagic.yaml 설정 Code signing identities.
  2. __CAPGO_KEEP_0__ 서명 식별자 열기 iOS 인증서 탭.
  3. 인증서 파일을 업로드하려면 .p12 또는 .pem 파일을 선택하세요 또는 지정된 프레임으로 드래그하여 업로드하세요.
  4. 인증서 인증서 비밀번호 참조 이름 클릭.
  5. 인증서 추가 프로비전 프로파일 추가

추가 중

Codemagic은 애플리케이션을 위해 프로비저닝 프로파일을 업로드하거나 애플리케이션 개발자 포털에서 프로파일을 가져올 수 있도록 허용합니다.

각 프로파일이 Code에 추가된 서명 식별성에 대해 프로파일의 유형, 팀, 번들 ID, 만료일이 표시됩니다. 또한, Codemagic은 code 서명 인증서가 Code 서명 식별성에 존재하는지 여부를 알려줍니다 (인증서 필드에 녹색 체크 마크가 표시되거나 표시되지 않음). 3. Codemagic 설정 Codemagic 비밀 설정

프로젝트의 비밀에서 값의 원천이 궁금하셨나요? 그건 더 이상 비밀이 아니에요 – 그것은 프로젝트의 비밀에서 오는 거예요. 🤦

4. Codemagic 워크플로 파일 설정

프로젝트의 루트 디렉토리에 파일 이름을 __CAPGO_KEEP_0__로 생성하고 다음을 추가하세요. ENV 이 워크플로는 수동으로 또는 각 __CAPGO_KEEP_0__마다 트리거되어야 합니다.

Certificate

Configure codemagic.yml Setup

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

This workflow should be triggered manually or after each GitHub 태그, 자동화된 태그가 필요하다면 참조하십시오. 자동화된 빌드 및 릴리즈와 GitHub 작업 첫째.

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

새로운 태그를 전송할 때마다 테스트 플라이트에서 릴리즈가 빌드됩니다.

앱은 Ionic을 사용하지 않아도 되며, Capacitor의 기본만 필요하고, 오래된 Cordova 모듈을 사용할 수 있지만 Capacitor의 JavaScript 플러그인은 선호됩니다.

5. 워크플로우 트리거

워크플로우를 트리거

브랜치에 새로운 커밋을 푸시 main 또는 development 워크플로우를 트리거

__CAPGO_KEEP_0__으로 시작되었습니다.

몇 분 후에 빌드는 App Store Connect 대시보드에 표시되어야 합니다.

테스트 플라이트 대시보드

수동으로 시작

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

먼저 빌드하고 싶은 앱을 선택한 다음 새로운 빌드 시작.

앱 선택

다음으로 빌드하고 싶은 branch를 선택하세요.

branch 선택

그리고 새로운 빌드 시작.

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

빌드 목록

빌드 결과를 보기 위해 빌드를 클릭하세요.

빌드 결과

로컬 머신에서 배포할 수 있습니다.

그렇습니다. 그리고 그것은 매우 쉬워요.

Xcode를 사용하여 앱을 빌드하고 서명할 수 있습니다. 항상 그대로입니다.

감사합니다.

다음 기사에 기반한 이 블로그입니다.

자동화된 Capacitor IOS 빌드에서 Codemagic로 계속 진행하세요.

자동화된 __CAPGO_KEEP_0__ IOS 빌드와 Codemagic를 사용 중이라면 자동화된 Capacitor IOS 빌드와 Codemagic를 사용 중이라면 CI/CD 자동화 계획을 세우고자 한다면 Cloudflare와 연결하세요. Capgo CI/CD Capgo CI/CD에서 제품 워크플로우를 구성하는 경우 Capgo Native Builds Capgo Native Builds에서 제품 워크플로우를 구성하는 경우 Capgo Integrations Capgo Integrations에서 제품 워크플로우를 구성하는 경우 CI/CD 통합 CI/CD 통합 구현 세부 사항 GitHub 액션 통합 GitHub 액션 통합 구현 세부 사항

Capacitor 앱에 대한 실시간 업데이트

웹层 버그가 활성화된 경우 Capgo을 통해修정을 배포하는 대신 앱 스토어 승인까지 며칠 기다리지 마십시오. 사용자는 배경에서 업데이트를 받으면서 네이티브 변경은 일반적인 검토 경로에 남아 있습니다.

시작하기

블로그에서 최신 뉴스

Capgo은 전문적인 모바일 앱을 만들기 위해 필요한 최고의洞察력을 제공합니다.