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

Capacitorの自動Capacitor IOSビルドとCodemagic

CapacitorのIOS IonicアプリのためのCodemagicとCodemagicを使用したCI/CDパイプラインの設定方法

記事のクレジット

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

ライター

バレリア

レビュアー

ジョーダン

エディター

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

Codemagicを使用したiOSの継続的デリバリー

前提条件

このチュートリアルに進む前に…

  • iOS開発者プログラムの会員資格
  • 読むことを楽しむ…

価格についての重要なこと

価格: Codemagic アクション

https://codemagic.io/pricing/

サービスは…無料 1か月あたり500時間までのmacOS M1分数 / 月、選択したマシンに依存します。
この記事では、以下のものを使用します。 macOS M1 スクリーンショットに表示されている価格と制限を確認できます (価格はこの記事の作成時点のもので、将来の変更が可能です)。

🔴 要件と価格についてはご了承いただけましたか?もし好きなら、続きましょう。

📣 この記事では、iTunes Connectでアプリを作成し、Appleのエコシステムの証明書を取得していることを前提としています。Codemagicがすべての設定を完了します!

では始めましょう!

この記事で説明する手順

  1. App Store Connect APIをCodemagicで使用する
  2. 必要なもの
  3. App Store Connect API Keyを作成する
  4. App Store Connect API Keyを使用する
  5. ファイルをコピー
  6. Codemagicを設定

1. App Store Connect APIとCodemagicの使用

2021年2月以降、すべてのユーザーがApp Store Connectにサインインするには、2要素認証または2段階認証が必要になります。この追加のセキュリティ層により、Apple IDのアクセス権限が保証され、ユーザー自身のみがアカウントにアクセスできるようになります。
From Apple Support

matchの使用を開始するには、既存の証明書を削除する必要があります。ただし、問題ありません。新しい証明書は直接取得できます。

要件

App Store Connect APIを使用するには、Codemagicには 3 のものが必要です。

  1. Issuer ID
  2. キーID。
  3. キーファイルまたはキー内容。

App Store ConnectのAPIキーを作成する

App Store Connectのキーを生成するには、App Store Connectで管理者権限が必要です。管理者権限がない場合は、この記事を参照して、以下の手順に従ってください。

1 — App Store Connectにログインします。 App Store Connect.

2 — "ユーザーとアクセス"を選択します。 App Store Connectユーザーアクセス.

3 — __CAPGO_KEEP_0__キーのタブを選択します。

App Store ConnectのAPIキー

4 — "APIキーを生成"または「+」ボタンをクリックします。

App Store ConnectのAPIキーセクション

App Store Connect API keys create

5 — __CAPGO_KEEP_0__ keysの作成名を入力し、権限を選択してください。 App Manager 権限を選択する際は、Apple Developer Programのロールパーミッションについて詳しく読んでください。 ここ

API keys create name

6 — 生成をクリックしてください。

API keyの権限は特定のアプリに制限することはできません。

新しい__CAPGO_KEEP_0__ keyの名前、キーID、ダウンロードリンク、その他の情報が表示されます。

App Store Connect download keys

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

🔴 秘密鍵を安全な場所に保存してください。鍵を共有したり、code リポジトリに鍵を保存したり、クライアントサイドの code に鍵を含めたりしてはいけません。

CodemagicにApp Store Connect API キーを追加する

  1. Codemagic Team設定を開きます チーム統合を選択します チームを開きます code署名の特性を選択します code署名の特性を選択します 証明書をアップロードします 証明書をアップロードします

  2. ボタンをクリックします キーを追加します ボタン

  3. エントリーメイド App Store Connect API key nameこのキーは、後でアプリケーション設定で参照するために使用される人間が読める名前です。

  4. エントリーメイド Issuer ID と Key ID 値。

  5. クリックしてください App Store Connectの__CAPGO_KEEP_0__キーをダウンロードしたものをアップロードするために.p8ファイルを選択してください or drag the file to upload the App Store Connect API key downloaded earlier.

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

Now we can manage Codemagic with the App Store Connect API key, great!

context

証明書

__CAPGO_KEEP_0__の署名識別子 XCodeを開いて 設定 > アカウント > Apple ID > チーム

Code signing identities

Click on 証明書を管理する &gt; + and select Apple配布.

Apple配布

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

すると、キーチェーンに移動して証明書をファイルとしてダウンロードする必要があります。 .p12 これを行うには、キーチェーンに移動し、ログイン

キーチェーンに切り替え、次にタブ My Certificates 証明書 証明書.

私の証明書

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

そして、証明書の右クリックして エクスポート.

ファイル形式を選択 Personal Information Exchange (.p12).

証明書をファイルとしてダウンロードします。 .p12 プロビジョニング プロファイル

Open

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

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

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

そして、 App Store Connect.

App Store Connectを選択する

次に、正しいアプリを選択する必要があります。ワイルドカードを使用すると署名が失敗するため、注意してください。

正しいアプリを選択する

前に作成した正しい証明書を選択し、 続行する.

正しい証明書を選択する

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

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

プロファイルを生成する

プロファイルをダウンロードすることができます。 .mobileprovision プロファイルをダウンロードする

 __CAPGO_KEEP_0__署名証明書を追加する

Codemagicでは、PKCS#12アーカイブに証明書と秘密鍵が含まれている Code署名証明書をアップロードすることができます。アップロードする際、証明書がパスワード保護されている場合、証明書のパスワードと一意の

Codemagic lets you upload code signing certificates as PKCS#12 archives containing both the certificate and the private key which is needed to use it. When uploading, Codemagic will ask you to provide the certificate password (if the certificate is password-protected) along with a unique ,を指定する必要があります。これは、特定のファイルを取得するために使用することができます。証明書をアップロードする codemagic.yaml 新しい証明書を生成する

  • プロファイルの
  • ファイル
  • 開発者ポータルから取得
  1. Codemagic Team設定を開き、 codemagic.yaml設定 > Code署名のID.
  2. Open iOS証明書 タブを開きます。
  3. 証明書ファイルをアップロードするには、 Choose a .p12 or .pem file または、指定されたフレームにドラッグしてください。
  4. 証明書ファイルのパスを入力してください 証明書のパスワード そしてプロビジョニング プロファイルを選択してください 参照名.
  5. クリック プロビジョニング プロファイルの追加

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

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

プロファイルのタイプ、チーム、バンドルID、有効期限は、Code署名の識別子に追加された各プロファイルの表示されます。また、Codemagicは、code署名証明書がCode署名の識別子に存在する場合に、緑のチェックマークが表示されます。 証明書 3. Codemagicの設定

Codemagicのシークレットを設定

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

Ever wonder where the values of the ENV are coming from? Well, it’s not a secret anymore – it’s from your project’s secret.

4.

Create a file named codemagic.yml at the root of your project and add the following.

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 tag, if you need to automatize tag please, refer to Automatic build and release with GitHub actions Then this workflow will pull your NodeJS deps, install them and build your JavaScript app.

Each time you send a new tag, a release will be built in TestFlight.

4. Codemagicのワークフロー設定ファイルの設定

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

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

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

新しいコミットをブランチにプッシュする main または development ワークフローをトリガーする

コミットが開始されました

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

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

手動で開始する

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

まず、ビルドしたいアプリを選択し、次に 新しいビルドを開始する.

アプリを選択する

次に、ビルドしたいブランチを選択してください。

ブランチを選択する

そして 新しいビルドを開始する.

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

ビルドリスト

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

ビルド結果

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

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

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

感謝します。

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

AutomaticCapacitorIOSビルドのCodemagicから続けてください。

Codemagicを使用している場合 AutomaticCapacitorIOSビルドのCodemagic CI/CDの自動化を計画する場合、__CAPGO_KEEP_0__ CI/CDに接続します。 Capgo CI/CDの製品ワークフロー Capgo CI/CD Capgo Native Builds Capgo による製品ワークフロー Capgo インテグレーション Capgo による製品ワークフロー CI/CD インテグレーション __CAPGO_KEEP_0__ Actions インテグレーション GitHub Actions インテグレーション for the implementation detail in GitHub Actions Integration.

リアルタイムの更新はCapacitorアプリに適用されます。

ウェブ層のバグが生じた場合、Capgoを通じて修正を配信し、数日間待つ必要のあるアプリストアの承認を待つのではなく、ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビュー経路を通じて進む。

マーティンから人間のサポートを受けます。

今すぐ始めましょう。

最新のブログ記事

Capgoは、プロフェッショナルなモバイルアプリを作成するために必要な最良の洞察を提供します。