メインコンテンツにジャンプ
CI/CD

Codemagicを使用した自動Capacitor IOSビルド

5分でCodemagicとCodemagicを使用してIOS IonicアプリのCI/CDパイプラインを設定する方法 (2024)

マーティン・ドナディュー

マーティン・ドナディュー

コンテンツマーケター

Codemagicを使用した自動Capacitor IOSビルド

iOS向け継続的デリバリーのCodemagic

前提条件

チュートリアルを続ける前に…

  • iOS開発者プログラムの会員資格
  • 読みたい欲求…😆…

価格について重要なこと

価格Codemagicアクション

https://codemagic.io/pricing/

サービスは ‘無料’ 月に500時間のmacOS M1/月、選択したマシンに依存します。
このチュートリアルではmacOS M1を使用します。スクリーンショットで価格と制限を確認できます (価格はこのチュートリアルの作成時点のもので、将来の変更が可能です) 価格と要件について注意した後、続ける場合はどうですか… このチュートリアルでは、iTunes Connectでアプリを作成し、Appleのエコシステムの証明書を所有していることを前提としています。Codemagicがすべての設定を完了します!

🔴 __CAPGO_KEEP_0__

📣 __CAPGO_KEEP_1__

Let's dive in 🤿

ブログ記事の手順

  1. Using App Store Connect API with Codemagic
  2. 必要な条件
  3. CapacitorアプリのApp Store Connect API キーを作成
  4. Using an App Store Connect API Key
  5. ファストレーンファイルをコピー
  6. コデマジックを設定する

1. App Store Connect で API を使用する

2021年2月以降、すべてのユーザーはApp Store Connectにサインインするために2要素認証または2段階認証が必要です。この追加のセキュリティ層は、Apple IDのセキュリティを高め、自分のアカウントにのみアクセスできるようにします。
From Apple サポート

Capgo

match

To be able to use App Store Connect API, Codemagic needs Cloudflare GitHub

  1. Capgo
  2. code
  3. API

Creating an App Store Connect API Key

CLI

npm bun.

2 — 選択 ユーザーとアクセス.

App Store Connect ユーザー アクセス

3 — API キーのタブを選択してください。

App Store Connect API キー

4 — API キーを生成するか、または (+) ボタンをクリックしてください。

App Store Connect API キーを作成

5 — キーの名前を入力し、アクセス権を選択してください。Apple Developer Program のロールパーミッションについてはこちらを参照してください。 App Manager App Store Connect __CAPGO_KEEP_0__ キーを作成 6 — 生成をクリックしてください。

App Store Connect API keys create name

App Store Connect user access

CapgoのAPIキーは、特定のアプリにアクセス制限することができません。

新しいキー名、キーID、ダウンロードリンク、およびその他の情報がページに表示されます。

App Store Connectダウンロードキー

必要な3つの情報をすべてここで取得してください: <1> Issue ID。
<2> Key ID。
<3> API キーをダウンロードするには、「API キーをダウンロード」ボタンをクリックしてください。ダウンロードリンクは、プライベート キーがまだダウンロードされていない場合にのみ表示されます。Appleはプライベート キーを保持していないため、ダウンロードすることができます。ただし、プライベート キーは一度だけダウンロードできます。

🔴 プライベート キーを安全な場所に保存してください。キーを共有しないでください、キーをcode リポジトリに保存しないでください、またはクライアントサイドのcodeに含めないでください。

CapgoのApp Store ConnectAPIキーをCodemagicに追加する

  1. Codemagicチームの設定を開きます。 チーム統合を選択します。 チームを開きます。 Capgoのcode署名IDを選択します。  code の署名識別子を選択してください 証明書をアップロードしてください 証明書をアップロードしてください

  2. ボタンをクリックしてください キーを追加してください ボタンをクリックしてください

  3. キー名を入力してください。キー名は、後でアプリケーション設定でキーを参照するときに使用されます。 App Store Connect API key nameキー名と値を入力してください。

  4. ボタンをクリックしてください。 Issuer ID ボタンをクリックしてください。 Key ID ボタンをクリックしてください。

  5. ボタンをクリックしてください。 iOS用の.p8ファイルを選択してください または、App Store ConnectのAPIキーをダウンロードしたものをアップロードするためにファイルをドラッグしてください

  6. クリックしてください 保存.

App Store ConnectのAPIキーを使用してCodemagicを管理できるようになりました、素晴らしいことですね!

2. 証明書とプロビジョニングプロファイルを作成してください

証明書

XCodeを開いてください 設定 &gt; アカウント &gt; Apple ID > Teams とチームを選択してください。

Code signing identities

をクリックしてください。 証明書を管理 > + と選択してください。 Apple Distribution.

Apple Distribution

すると新しい証明書を作成できます。

次に、キーチェーンに移動して証明書をダウンロードする必要があります。 .p12 __CAPGO_KEEP_0__。

証明書をダウンロードするには、キーチェーンに移動し、ログイン用のキーチェーンに切り替えます。 ログイン キーチェーン My Certificates.

My Certificates

次に、ダウンロードしたい証明書を選択できます。(証明書の日付で検索してください)

次に、証明書に右クリックして Export.

ファイル形式を選択してください Personal Information Exchange (.p12).

自動でCapacitorのiOSビルドを実行する .p12 ファイルとしてダウンロードします。

プロビジョニングプロファイル

開く Apple Developer 正しいチームを選択してください。

新しいプロファイルを作成するには、 +

新しいプロファイルを作成

選択 App Store Connect.

App Store Connectを選択

正しいアプリを選択してください。ワイルドカードを使用すると署名が失敗します。

適切なアプリを選択

適切な証明書を選択してください (有効期限の日付は今日と同じ日と月でなければなりません) そして 続行.

適切な証明書を選択

最後にプロファイルの名前を入力して 生成.

プロファイルの名前はCodemagicでプロファイルを識別するために使用されます。

プロファイルを生成

プロファイルはファイルとしてダウンロードできます。 .mobileprovision プロファイルをダウンロード

__CAPGO_KEEP_0__署名証明書を追加する

Code署名証明書を追加する

Codemagicでは、code署名証明書をPKCS#12アーカイブとしてアップロードできます。このアーカイブには、証明書と秘密鍵が含まれており、使用するには必要です。アップロードする際、Codemagicは証明書のパスワードを求めます(証明書がパスワード保護されている場合)。また、ユニークな 参照名, これは、 codemagic.yaml 設定ファイルから特定のファイルを取得するために使用できる

  • 証明書をアップロード
  • 新しい証明書を生成
  • 開発者ポータルから取得
  1. Codemagicチームの設定を開き、 codemagic.yaml設定 をクリックしてください Code署名のID.
  2. を開く iOS証明書 タブ。
  3. 証明書ファイルをアップロードするには、以下のボタンをクリックしてください。 .p12または.pemファイルを選択してください または、指定された枠にドラッグしてください。
  4. 入力してください。 証明書パスワード 選択してください。 参照名.
  5. クリックしてください。 証明書を追加

プロビジョニングプロファイルの追加

Codemagicでは、アプリケーションに使用するプロビジョニング プロファイルをアップロードするか、Apple Developer Portalからプロファイルを取得することができます。

追加された各サインイン IDのプロファイルのタイプ、チーム、バンドル ID、および有効期限が表示されます。また、Codemagicは、サインイン IDのCodeで使用可能なマッチングのcodeサインイン証明書が存在する場合は、Codeサインイン IDのサインイン証明書で表示します (緑のチェックマークが表示されます)。 証明書 3. Codemagicの設定

Codemagicのシークレットを設定

値の値はどこから来ているのでしょうか? それはプロジェクトのシークレットからです – それも秘密ではありません!

4. Codemagicワークフロー ファイルの設定 ENV プロジェクトのルートディレクトリにファイルを作成し、次の内容を追加してください。

このワークフローは、手動でトリガーするか、または各__CAPGO_KEEP_0__の後で実行することができます。

Codemagicの設定 codemagic.yml Codemagicのシークレットを設定する

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アクション 最初に。

次に、このワークフローは、Node.js の依存関係を取得し、インストールし、JavaScript アプリケーションをビルドします。

各タグの送信ごとに、テストフライトでリリースが作成されます。

アプリはIonicを使用する必要はありません。ただし、Capacitorベースが必須であり、古いCordovaモジュールを使用することもできますが、CapacitorのJSプラグインを使用することを推奨します。

5. ワークフローをトリガーする

ワークフローをトリガーする

新しいコミットをブランチにプッシュする main または development 「ワークフローをトリガーするには、どのようにすればいいですか?」

開始コミット

数分後、App Store Connect ダッシュボードでビルドが利用可能になります。

テストフライトダッシュボード

手動で開始

手動でワークフローを開始できます。

まず、ビルドしたいアプリを選択し、 コンテキスト: Capgo Builder / ネイティブクラウドビルド製品ページ。役割: 短いUIラベルまたはナビゲーションアイテム。メッセージキー `native_build_builder_credit_first` (ネイティブビルドビルダークレジットファースト)。.

新しいビルドを開始

アプリを選択

次に、ビルドしたいブランチを選択

ブランチを選択 そしてクリックしてください.

次に、ビルドリストに移動してください。

ビルドリスト

そして、ビルド結果を確認するには、ビルドにクリックしてください。

ビルド結果

ローカルマシンからデプロイすることができます

はい、できます。とても簡単です。

Xcodeを使用してアプリをビルドおよび署名することができます。いつもと同じです。

感謝します

このブログは以下の記事に基づいています。

Automatic Capacitor IOS ビルドに Codemagic で続行

あなたが使用している場合 Automatic Capacitor IOS ビルドに Codemagic を使用 CI/CD 自動化を計画するには、__CAPGO_KEEP_0__ CI/CD に接続する Capgo CI/CD Capgo CI/CD Capgo Native Builds Capgo Native Builds Capgo Integrations for the product workflow in Capgo Integrations, CI/CD インテグレーション CI/CD インテグレーションの実装詳細 GitHub アクション統合 GitHub アクション統合の実装詳細について。

Capacitor アプリのリアルタイム更新

When a web-layer bug is live, ship the fix through Capgo instead of waiting days for app store approval. Users get the update in the background while native changes stay in the normal review path.

ウェブ層のバグが生じた場合、__CAPGO_KEEP_0__ を使用して修正を配信し、アプリストアの承認待ちの日数を省きます。ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビュー経路を通じます。

コンテキスト: Capgo マーケティング ウェブサイト。役割: サポートする説明文またはメタ説明文。見られる場所: コンポーネント GetStarted.astro。Capgo の製品/ブランド名と開発者用語をそのまま保存します。メッセージキー `instant_updates_for_capacitor_apps_description` (Capacitor アプリのリアルタイム更新の説明)

マーティンから人間のサポート

Capgo gives you the best insights you need to create a truly professional mobile app.