Codemagic による Capacitor iOS 自動ビルド

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

前提条件

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

iOS Developer Programへの登録
続きが気になりますね 😆…

料金に関する重要事項

Codemagic Action の料金

本サービスは「無料」 選択するマシンにより、毎月最大500分の macOS M1 利用が可能です。
今回は macOS M1 マシンの料金と制限はスクリーンショットで確認できます（料金はチュートリアル作成時点のもので、将来変更される可能性があります）。

🔴 要件と料金について把握いただけたら、さっそく進めていきましょう…

📣 この記事では、iTunes Connect でアプリが作成済みで、Apple エコシステムの証明書も用意されている前提で進めます。設定はすべて Codemagic が行います！

詳しく見ていきましょう 🤿

この記事の手順

CodemagicでApp Store Connect APIを使用する
要件
App Store Connect API Keyの作成
App Store Connect API Key の使用
Fastlaneファイルをコピー
Codemagicの設定

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

2021年2月より、App Store Connectへのサインインには、すべてのユーザーに対して2要素認証または2段階認証が必須となりました。Apple IDにこのセキュリティレイヤーを追加することで、アカウントへのアクセスを本人だけに限定できます。
から Appleサポート

matchを使用するには、既存の証明書を失効させる必要があります。でもご安心ください、すぐに新しい証明書が発行されます。

要件

App Store ConnectのAPIを利用するために、Codemagicには 3つの 要素が必要です。

Issuer ID。
Key ID
KeyファイルまたはKeyの内容

App Store Connect API Keyの作成

キーを生成するには、App Store ConnectのAdmin権限が必要です。権限がない場合は、担当者にこの記事を案内し、以下の手順に従ってもらってください。

1 — ログイン App Store Connect.

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

App Store Connectのユーザーアクセス

3 — API Keys タブを選択します。

App Store Connect API キー

4 — Generate API Key、または追加 (+) ボタンをクリックします。

App Store Connect API keys の作成

5 — キーの名前を入力し、アクセスレベルを選択します。推奨設定は App Manager アクセス権限です。Apple Developer Program のロール権限についてはこちらこちら

App Store Connect API keys 作成名

6 — Generate をクリックします。

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

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

App Store Connect ダウンロードキー

必要な3つの情報をここで取得してください： <1> Issue ID。
<2> Key ID。
<3> “Download API Key” をクリックして、API の秘密鍵をダウンロードしてください。ダウンロードリンクは、秘密鍵がまだダウンロードされていない場合にのみ表示されます。Apple は秘密鍵のコピーを保持しません。そのため、ダウンロードできるのは一度だけです。

🔴 秘密鍵は安全な場所に保管してください。キーを他人と共有したり、code リポジトリに保存したり、クライアント側の code に含めたりしないでください。

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

Codemagic の Team 設定を開き、 code signing identities を選択します次に証明書をアップロードします
次をクリックします： キーを追加 ボタンをクリックしてください。
以下を入力してください App Store Connect API key nameこれは、後でアプリケーション設定から参照するための、キーの人間が読みやすい名前です。
以下を入力してください Issuer ID と Key ID 値
次をクリックします： .p8ファイルを選択 または、先ほどダウンロードしたApp Store ConnectのAPIキーをドラッグ＆ドロップしてアップロードしてください。
クリック保存.

これでApp Store ConnectのAPIキーを使用してCodemagicを管理できるようになりました。完璧です！

2. 証明書とプロビジョニングプロファイルの作成

証明書

Xcode を開き、以下へ移動します設定 > アカウント > Apple ID > チーム チームを選択します。

Code の署名ID

次をクリックします： 証明書の管理 > + を選択し、 Apple Distribution.

Apple Distribution

を選択してください。これで新しい証明書を作成できます。

次に、証明書をダウンロードするためにKeychain Accessを開きます。 .p12 ファイル。

そのために、Keychain Accessを開き、 ログイン キーチェーンを選択し、次に 証明書.

証明書

タブから、ダウンロードしたい証明書を選択します。（日付を目安に探してください）

次に、証明書を右クリックして 書き出す.

ファイル形式を選択します 個人情報交換用証明書 (.p12).

これにより、証明書が次のようにダウンロードされます： .p12 ファイル。

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

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

次に、「 +

Create a new profile」をクリックして、新しいプロファイルを作成します。

そして、以下を選択します： App Store Connect.

「Select App Store Connect」を選択します。

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

適切なアプリを選択

事前に作成した適切な証明書を選択してください（有効期限が今日と同じ月日であることを確認してください）。その後、以下をクリックします：続行.

適切な証明書を選択

最後にプロファイル名を入力し、以下をクリックします：生成.

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

プロファイルを生成

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

プロファイルをダウンロード

Code 署名証明書の追加

Codemagicでは、証明書とその使用に必要な秘密鍵の両方を含むPKCS#12アーカイブとして、code署名証明書をアップロードできます。アップロード時に、Codemagicは証明書のパスワード（パスワードで保護されている場合）と一意の 参照名の入力を求めます。この名前は、 codemagic.yaml 設定で特定のファイルを取得するために使用できます。

証明書をアップロード
新しい証明書を生成
Developer Portalから取得

Codemagicのチーム設定を開き、以下に移動します: codemagic.yamlの設定 > Code の署名ID.
開く iOS証明書 タブ。
証明書ファイルを以下をクリックしてアップロード、 .p12または.pemファイルを選択 もしくは指定の枠内にドラッグしてください。
以下を入力してください： 証明書のパスワード 次に以下を選択します： 参照名.
クリック 証明書を追加

プロビジョニングプロファイルを登録中

Codemagicでは、アプリで使用するプロビジョニングプロファイルをアップロードするか、Apple Developer Portalからプロファイルをフェッチできます。

Code の署名アイデンティティに追加された各プロファイルについて、プロファイルのタイプ、チーム、bundle id、有効期限が表示されます。さらに、Codemagicは Code の署名アイデンティティ内に、一致する code 署名証明書が利用可能かどうかを（ 証明書 （フィールド内の緑色のチェックマークで）通知します）。

3. Codemagicのセットアップ

CodemagicのSecretsを設定する

これらの値がどこから ENV 来ているのか不思議に思ったことはありませんか？実はもう秘密ではありません。プロジェクトのSecretから取得しています。🤦

4. Codemagicのワークフローファイルを構成する

プロジェクトのルートに 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

このワークフローは、手動または各 GitHub の後にトリガーされるように設定してください。タグタグの自動化が必要な場合は、こちらを参照してください： GitHub アクションによるビルドとリリースの自動化してください。

このワークフローは、NodeJS の依存関係を取得・インストールし、JavaScript アプリをビルドします。

新しいタグを送信するたびに、TestFlight 用のリリースがビルドされます。

Ionic を使う必要はありません。Capacitor のベースがあれば十分です。従来の Cordova モジュールも利用可能ですが、Capacitor JS プラグインの使用を推奨します。

5. ワークフローの実行

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

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

コミットから開始

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

TestFlight ダッシュボード

手動で開始

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

まずビルドしたいアプリを選択し、次に以下をクリックしてください： 新規ビルドを開始.

アプリを選択

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

ブランチを選択

そして、以下をクリックしてください： 新規ビルドを開始.

次にビルド一覧へ移動します

ビルド一覧

ビルドをクリックして結果を確認します。

ビルド結果

ローカルマシンからデプロイ可能

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

従来通り、Xcodeを使用してアプリのビルドと署名を行うことができます。

ありがとうございます

この記事は以下の記事に基づいています：

Codemagicによる自動 Capacitor iOS buildからさらに一歩先へ

使用している場合 Codemagic による Capacitor iOS 自動ビルド CI/CD自動化を計画するには、次と連携してください Capgo での CI/CD 設定 Capgo CI/CDでのプロダクトワークフローについては、 Capgo Native Build Capgo Native Buildsでのプロダクトワークフローについては、 Capgo インテグレーション Capgo インテグレーションでのプロダクトワークフロー向けに、 CI/CD 連携 CI/CD Integrationの実装詳細については、 GitHub Actions 連携 GitHub Actions Integrationの実装詳細については。