メインコンテンツにジャンプ
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がすべての設定を完了します。

始めましょう!

この記事で説明する手順

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

1. App Store Connect API を使用して Codemagic

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

matchの使用を開始するには、既存の証明書を取り消す必要があります。心配する必要はありません。新しい証明書は直接取得できます。

要件

CodemagicがApp Store Connect API を使用できるようにするには、3つのものが必要です。 3 発行者ID。

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

App Store Connect API Keyの作成

__CAPGO_KEEP_0__キーを生成するには、App Store ConnectでAdmin権限が必要です。権限がなければ、この記事を参照し、以下の手順に従ってください。

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

__CAPGO_KEEP_0__キー生成の推奨アクセスレベルは App Manager アクセス権限、Apple Developer Programの役割パーミッションについてもっと知りたい ここ

App Store Connect API キーを作成する名前

6 — Generate をクリック。

API キーのアクセスは、特定のアプリに制限できない。

新しいキーの名前、キーアイデンティファー、ダウンロードリンク、他の情報がページに表示される。

App Store Connect キーをダウンロード

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

🔴 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.

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

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

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

  3. このキー名は、後でアプリケーション設定で参照するために使用されます。 App Store Connect API key nameボタンをクリックします

  4. Capgoの設定に Issuer IDKey ID 値を入力してください。

  5. をクリックしてください。 App Store Connectの.p8ファイルを選択してください or drag the file to upload the App Store Connect API key downloaded earlier.

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

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

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

証明書

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

Code署名のID

Click on 証明書を管理 > + そして選択 Apple Distribution.

Apple Distribution

次に、新しい証明書を作成できます。

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

ログイン キーチェーン マイ・証明書 マイ・証明書.

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

証明書の日付で検索してください

そして右クリックして証明書を選択 __CAPGO_KEEP_0__.

__CAPGO_KEEP_0__ __CAPGO_KEEP_0__.

パーソナル情報交換(.p12)を選択 .p12 __CAPGO_KEEP_0__

ファイルがダウンロードされます。

__CAPGO_KEEP_0__ Apple Developerを開き、適切なチームを選択 __CAPGO_KEEP_0__

新しいプロファイルを作成するには、右クリックして +

__CAPGO_KEEP_0__

そして選択 App Store Connect.

App Store Connectを選択

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

正しいアプリを選択

前に作成した正しい証明書を選択し、有効期限の日付を確認して、今日と同じ日と月の有効期限を確認し、 Continue.

正しい証明書を選択

最後に、プロファイルの名前を入力し、 Generate.

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

プロファイルを生成

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

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

Code署名証明書を追加

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

  • 証明書をアップロード
  • 新しい証明書を生成
  • 開発者ポータルから取得
  1. Codemagicチームの設定を開き、 Codemagic.yaml設定 > Code署名のID.
  2. 開く iOS証明書 タブ。
  3. 証明書ファイルをアップロードするには、次のボタンをクリックしてください。 または、指定されたフレームにドラッグしてください。 Enter the
  4. 証明書パスワード と選択してください 証明書の種類 Reference name.
  5. クリック 証明書の追加

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

Codemagicでは、Apple Developer Portalからプロファイルを取得することもできます。

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

Codemagicのシークレットの設定

プロジェクトのシークレットから値が来ているのを気にしていたら、もう気にしなくていい – それはプロジェクトのシークレットからだよ。 🤦

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

4. Codemagic ワークフロー ファイルを設定する

プロジェクトのルートディレクトリにファイルを作成し、以下の内容を追加してください。 codemagic.yml このワークフローは、手動でトリガーするか、各 __CAPGO_KEEP_0__ タグの後で実行されるように設定してください。タグの自動化については、

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

Automatic build and release with GitHub actions を参照してください。最初に、このワークフローは NodeJS の依存関係を取得し、JavaScript アプリをビルドします。 Automatic build and release with GitHub actions アプリは Ionic を使用する必要はありません。ただし、__CAPGO_KEEP_0__ ベースは必須です。古い Cordova モジュールを含むアプリでもかまいませんが、__CAPGO_KEEP_1__ JS プラグインを使用することを推奨します。

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

__CAPGO_KEEP_0__

Your App doesn’t need to use Ionic, only Capacitor base is mandatory, it can have old Cordova module, but Capacitor JS plugin should be preferred.

__CAPGO_KEEP_0__

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

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

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

コミット

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

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

手動で開始する

ワークフローを手動で開始できます。 まず、ビルドしたいアプリを選択し、.

新しいビルドを開始する

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

ブランチを選択

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

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

ビルドリスト

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

ビルド結果

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

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

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

感謝します

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

CodemagicとCapacitorを使用したIOSの自動ビルドから続きます。

Codemagicと__CAPGO_KEEP_0__を使用したIOSの自動ビルド CI/CDの自動化を計画する場合は、Capacitor CI/CDに接続してください。 __CAPGO_KEEP_0__ CI/CD Capgo CI/CDの製品ワークフロー Capgo Native Builds Capgo Native Buildsの製品ワークフロー CodemagicとCapgoを使用したIOSの自動ビルド Capgo 連携 Capgo 連携の製品ワークフローに CI/CD 連携 __CAPGO_KEEP_0__ アクション連携 GitHub アクション連携の実装詳細 GitHub アクション連携の実装詳細

Live updates for Capacitor apps

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