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

自動CapacitorのiOSビルド

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

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

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

コンテンツマーケター

自動CapacitorのiOSビルド

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

前提条件

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

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

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

価格: Codemagic Action

https://codemagic.io/pricing/

サービスは ‘無料’ 月に 500 分間の macOS M1 分钟 / 月、選択したマシンに依存します。
このチュートリアルで使用するのは ‘ macOS M1 マシンです。スクリーンショットでその価格と制限を確認できます (価格はこのチュートリアルの作成時点のもので、将来の変更が可能です)

🔴 価格と要件についての注意を出してから、続ける場合はどうですか?

📣 このチュートリアルでは、iTunes Connectでアプリを作成し、Apple Ecosystemの証明書を持っていることを前提としています。Codemagicがすべての設定を完了します!

🤿はじめましょう

この記事の手順

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

1. Using App Store Connect API with Codemagic

2021年2月以降、すべてのユーザーはApp Store Connectにサインインするために2要素認証または2段階認証が必要になります。この追加のセキュリティ層は、Apple IDのセキュリティを確保するために役立ちます。
参考 Apple Support

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

要件

App Store Connectを使用するには、CodemagicがAPIを実行できるようにする必要があります。 3 ものです。

  1. Issuer ID.
  2. Key ID.
  3. Key fileまたはKey content.

App Store ConnectAPI Keyの作成

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

1 — App Store Connectにログインする App Store Connectにログインする.

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

App Store Connectユーザーアクセス

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

App Store Connect API キー

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

App Store Connect API キーを作成する

5 — キーの名前を入力し、権限のレベルを選択してください。 App Manager 権限の設定については、Apple Developer Programのロールパーミッションを参照してください。 App Store Connect __CAPGO_KEEP_0__ キーの作成

App Store Connect API keys create name

__CAPGO_KEEP_0__ キーの作成

API キーのアクセスは特定のアプリに制限できません。

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

App Store Connect ダウンロードキー

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

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

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

  1. Codemagic チーム設定を開いてください。 チーム統合を選択してください。 チームを開いてください。 code 署名識別子を選択してください。 Select code を選択 And the には証明書をアップロード Upload the certificate

  2. Click the Add key をクリック

  3. Enter the App Store Connect API key name. このキーには、後でアプリケーション設定で参照するために使用される人間が読みやすい名前を入力してください。

  4. Enter the Issuer IDKey ID 値を入力

  5. Click on .p8ファイルを選択してください または、App Store ConnectのAPIキーをダウンロードした前のアップロードファイルをドラッグしてください

  6. Click Save.

CodemagicをApp Store ConnectのAPIキーで管理できるようになりました。すばらしい!

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

証明書

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

Code signing identities

Click on 証明書を管理 > + と選択 Apple Distribution.

Apple Distribution

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

__CAPGO_KEEP_0__をダウンロードするには、キーチェーンにアクセスする必要があります。 .p12 ファイルとしてダウンロードする必要があります。

このようにするには、キーチェーンにアクセスし、ログインキーチェーンに切り替え、次にタブ「My Certificates」を選択します。 My Certificates My Certificates 次に、ダウンロードしたい証明書を選択できます。 (証明書の日付で検索してください) .

右クリックして証明書を選択し、次に「エクスポート」を選択します。

ファイル形式を選択してください

Personal Information Exchange (.p12) __CAPGO_KEEP_0__ .

__CAPGO_KEEP_0__ __CAPGO_KEEP_0__ .

__CAPGO_KEEP_0__をダウンロードします。 .p12 ファイルとして。

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

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

新しいプロファイルを作成するには、__CAPGO_KEEP_1__をクリックしてください。 +

Create a new profile

と、適切なチームを選択してください。 App Store Connect.

App Store Connectを選択してください。

App Store Connectを選択してください。Then you need to select the right app, be careful you cannot use wildcard otherwise signing will fail.

適切なアプリを選択してください

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

適切な証明書を選択してください

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

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

プロファイルを生成する

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

__CAPGO_KEEP_0__署名証明書を追加する

Code署名証明書を追加する

codeをアップロードすることができます。Codemagicは、証明書と秘密鍵が含まれるPKCS#12アーカイブとしてアップロードする必要があります。 「Reference name」、を使用して特定のファイルを取得するための設定を指定します。 codemagic.yaml 証明書をアップロード

  • 新しい証明書を生成
  • 開発者ポータルから取得
  • Codemagicチームの設定を開き、
  1. codemagic.yamlの設定 > __CAPGO_KEEP_0__の署名識別子 Code signing identities.
  2. targetLanguage iOS証明書 タブ。
  3. 証明書ファイルをアップロードするには、 または、指定された枠にドラッグしてください。 入力する
  4. 証明書パスワード 参照名 クリック.
  5. 証明書を追加 プロビジョニングプロファイルを追加中

__CAPGO_KEEP_0__

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

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

Codemagicのシークレットを設定

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

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

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

3. Codemagicの設定 codemagic.yml 4. 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 tagtagを自動化するには、 自動ビルドとリリースのためのGitHubアクション 最初に。

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

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

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.

Ionicを使用する必要はありません。

__CAPGO_KEEP_1__ JS プラグインは、古いCordovaモジュールとともに使用できます。

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

__CAPGO_KEEP_0__

__CAPGO_KEEP_1__

__CAPGO_KEEP_2__

__CAPGO_KEEP_3__

__CAPGO_KEEP_4__

__CAPGO_KEEP_5__ __CAPGO_KEEP_6__.

__CAPGO_KEEP_7__

__CAPGO_KEEP_8__

__CAPGO_KEEP_9__

__CAPGO_KEEP_10__ __CAPGO_KEEP_11__.

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

ビルドリスト

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

ビルド結果

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

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

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

感謝します。

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

自動でCapacitorのiOSビルドをCodemagicから続ける

Capgoを使用している場合 自動でCapacitorのiOSビルドをCodemagicから続ける CI/CDの自動化を計画する場合、Capgoと接続する Capgo CI/CD Capgo CI/CDの製品ワークフロー Capgo Native Builds Capgo Native Buildsの製品ワークフロー Capgo Integrations Capgo Integrationsの製品ワークフロー CI/CDの統合 CI/CD統合の実装詳細 GitHub アクション統合 GitHub アクション統合の実装詳細について

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

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

Get Started Now

ブログの最新記事

Capgo を使うことで、プロフェッショナルなモバイルアプリを作成するために必要な最良の洞察を得ることができます。