Skip to main content

Ionic / Cordovaアプリの使用を開始する

概要

メールまたはGitプロバイダーを介してサインアップし、リポジトリに接続して、Ionic / Cordovaアプリの最初のビルドを実行することにより、Bitriseの使用を開始します。

CordovaおよびIonicフレームワークを使用して、クロスプラットフォームアプリを開発できます。 Bitriseは、自動テスト、コード署名、および展開手順を支援するため、iOSおよび/またはAndroidアプリをそれぞれのマーケットプレイスにすぐに出荷できます。ワークスペースに複数の同時実行性がある場合は、AndroidとiOSのビルドを同時に実行できます。それでは、プロセスをご案内します。

Bitriseアカウントをお持ちですか？

サインアップしていることを確認してください bitrise.io Bitriseアカウントにアクセスできます。アカウントを登録する方法は複数あります。

BitriseにIonic / Cordovaアプリを追加する

Bitriseがプロジェクトを検証している間待ちます。構成ファイルを探し、それらに基づいてアプリをセットアップします。

  1. あなたのBitriseに行きます ダッシュボード。

  2. クリック + 上部のメニューバーにサインオンして、 WebUIに新しいアプリを追加する、に移動します 新しいアプリを作成する ページ。

    または、CLIを使用してアプリを追加することもできます。詳細については、チェックアウトしてください CLIからの新しいアプリの追加。

  3. アプリを追加するアカウントを選択します。

  4. アプリのプライバシーを次のいずれかに設定します 民間 また 公衆 をクリックします 次。

    プライベート アプリとパブリック アプリ

    パブリック アプリとプライベート アプリの最も重要な違いは、アプリがパブリックの場合、ビルド URL を知っている全員がビルド ログを表示できることです。 公開アプリ.プライベート アプリを使用すると、誰がアプリにアクセスできるかを完全に制御できます。

  5. リポジトリをホストするGitホスティングサービスを選択してから、プロジェクトをホストする独自のリポジトリを見つけて選択します。

  6. リポジトリアクセスを設定するように求められたら、をクリックします いいえ、SSHキーを自動追加します。

  7. プロジェクトの構成を含むブランチの名前を入力します- 主要たとえば、-次にクリックします 次。

  8. で プロジェクトビルド構成、アプリをビルドするプラットフォームを選択できます。次を選択できます。

    • iOS。

    • アンドロイド。

    • iOSおよびAndroid（Androidビルドが最初にビルドされる場所）。

    Getting started with Ionic/Cordova apps
    Getting started with Ionic/Cordova apps

  9. プロンプトが表示されたらWebhookを登録して、コードがリポジトリにプッシュされたときにBitriseがビルドを自動的に開始できるようにします。

    これにより、プライマリワークフローでの最初のビルドも開始されます。メッセージをクリックすると、ビルドページに移動します。最初のビルドではまだ.apkと.ipaは生成されませんが、ビルドのページでプロジェクトのログを確認できます。

の依存関係のインストール Ionic / Cordova アプリ

Bitriseプロジェクトスキャナーが正常にスキャンした場合 Ionic / Cordova 事業、 npmコマンドを実行します また ヤーンコマンドを実行する ステップはデフォルトのワークフローに含まれます。これらの手順により、不足しているJavascriptの依存関係をアプリにインストールできます。

ネイティブAndroidの依存関係については、 不足しているAndroidSDKコンポーネントをインストールする ステップ。

ネイティブiOSの依存関係については、特に、 Homebrewインストール ステップまたは CocoaPodsインストールを実行します ステップ。

npmを使用してJavascriptの依存関係をインストールするには：

npmの代わりにYarnを使用する

このガイドでは、npmを使用してJavascriptの依存関係をインストールしています。ただし、 ヤーンコマンドを実行する 手順：追加の構成を必要とせずに、不足しているJS依存関係をインストールできます。

  1. でアプリを開きます ビットライズ。

  2. クリック ワークフロー メインページのボタン。

  3. からワークフローを選択します ワークフロー ドロップダウンメニュー。

    select-workflow.png

  4. ワークフローに npmコマンドを実行します ステップ。

  5. の中に 実行する引数を指定したnpmコマンド 入力フィールド、タイプ インストール。

    Getting started with React Native apps

    を使用して npm ci コマンドの代わりに npm install

    すでに最新版をお持ちの場合 package-lock.json プロジェクトでファイルを使用することをお勧めします。 シ コマンドイン 実行する引数を指定した「npm」コマンド 入力。使用する npm ci に比べてビルド時間が大幅に短縮されるだけでなく、 npm install しかし、より信頼性の高いビルドも同様です。

Ionic / Cordovaアプリのテスト

BitriseでIonic / Cordovaアプリの単体テストを実行するには、 カルマジャスミンテストランナー また ジャスミンテストランナー ステップ。

Cordova / IonicプロジェクトにKarmaJasmine依存関係がある場合 package.json ファイルの場合、アプリを追加するときにスキャナーがそれを検出し、それぞれのテストステップをワークフローに自動的に挿入します。この依存関係がプロジェクトにない場合は、ワークフローエディターを使用して、テスト手順の1つをワークフローに手動で挿入できます。

  1. でアプリを開きます ビットライズ。

  2. クリック ワークフロー メインページのボタン。

    opening-workflow-editor.png

  3. ワークフローにテストステップがあることを確認してください。

    依存関係のインストール

    依存関係をインストールする必要があります テストを実行する前に。

    あなたはから選ぶことができます カルマジャスミンテストランナー そしてその ジャスミンテストランナー ステップ。

例1 Karma Jasmine TestRunnerを使用したCordovaアプリの構成

この例では、 bitrise.yml と呼ばれるワークフローを含む構成 主要な。このワークフローには、 カルマジャスミンテストランナー ステップ。

primary:
    steps:
    - [email protected]:
        run_if: '{{getenv "SSH_RSA_PRIVATE_KEY" | ne ""}}'
    - [email protected]: {}
    - [email protected]:
        title: Do anything with Script step
    - [email protected]:
        inputs:
        - command: install
    - [email protected]: {}
    - [email protected]: {}

Ionic / Cordovaアプリのコード署名

iOSまたはAndroid用のアプリを作成する場合は、プラットフォーム固有のファイルをにアップロードする必要があります。 コード署名 ワークフローエディタのタブ。プラットフォームのすべてのコード署名ファイルをアップロードする必要がある両方のプラットフォームのビルドを生成することもできます。

IonicおよびCordovaプロジェクトのiOSコード署名

概要

Bitriseは、IonicアプリとCordovaアプリのiOSコード署名の手動プロビジョニングと自動プロビジョニングの両方をサポートしています。

当然、Bitriseはどちらかで構築されたiOSアプリケーションをサポートします イオン また コルドバ。ただし、コード署名プロセスは、ネイティブXcodeプロジェクトとは少し異なります。

Bitriseは、IonicアプリとCordovaアプリの手動プロビジョニングと自動プロビジョニングの両方をサポートしています。また、プロセスは多少異なります。

手動プロビジョニングによるIonic / Cordovaコード署名

  1. を呼び出して、IonicまたはCordovaプロジェクトからローカルにネイティブXcodeプロジェクトを生成します cordova platform add ios また ionic cordova platform add ios。

  2. 私たちを使用してください codesigndoc するツール コード署名ファイルを収集する。

  3. ファイルをにアップロードする bitrise.io。

    これは、WebサイトのUIまたは codesigndoc ツール自体。

    Uploading certificates and Provisioning Profiles

  4. あなたが持っていることを確認してください 証明書とプロファイルのインストーラー ワークフローにステップインします。

  5. 追加します Cordovaビルド構成を生成する ワークフローに進みます。それは後に来なければなりません 証明書とプロファイルのインストーラー ステップ。

  6. ステップに必要な入力を入力します。両方が コード署名ID そしてその プロビジョニングプロファイル そのようにマークされていなくても、iOSアプリに必要な入力です。

    • ビルド構成：どちらかに設定できます debug また release。

    • コードサインアイデンティティ：開発者またはディストリビューションIDを入力します。

    • プロビジョニングプロファイル：適切なプロビジョニングプロファイルを入力します。

    • 包装タイプ：これは、Xcodeによって生成されるビルドのタイプを制御します。必要なコード署名のタイプを設定します。

      Code signing with Ionic and Cordova projects

  7. 追加します Cordova archive または Ionic archive ワークフローへのステップ。

  8. 必要な入力を入力します。

    • NS プラットホーム 入力は次のように設定する必要があります。 device。

    • NS ビルドコマンド構成 入力は一致する必要があります ビルド構成 の入力 Cordovaビルド構成を生成する ステップ。

    このステップは、 Cordovaビルド構成を生成する ワークフローにステップインします。

  9. ビルドを実行してください！

自動プロビジョニングによるIonic / Cordovaコード署名

  1. .p12署名証明書がにアップロードされていることを確認してください bitrise.io。

    使用する場合 codesigndoc ファイルを収集するには、次のコマンドを呼び出すことで、証明書のみをエクスポートするようにツールに指示できることに注意してください。

    codesigndoc scan --certs-only xcode

    codesigndoc ファイルをWebサイトにアップロードすることも、手動でアップロードすることもできます。

  2. 追加します コルドバ準備 または イオン準備 ワークフローに進みます。これらのステップは、 platform rm と platform add コマンド。

  3. 追加します iOS自動プロビジョニング ワークフローに進みます。最新バージョンであることを確認してください！

    ステップはエクスポートします：

    • プロジェクトの開発チーム。

    • インストールされたコードサインIDの名前。

    • インストールされたプロビジョニングプロファイル。

    1つのコード署名ステップのみ

    あなたが両方を持っている場合 証明書とプロファイルのインストーラー そしてその iOS自動プロビジョニング ワークフローのステップで、ビルドで予期しない問題が発生する可能性があります。

  4. を選択 Appleサービスの接続方法 （に基づく Bitriseで設定したAppleサービス） そしてその 配布方法。

    manageioscodesigning.png

  5. 追加します Cordovaビルド構成を生成する ワークフローに進みます。

  6. によってエクスポートされたコード署名設定を使用するようにステップを構成します。 iOS自動予見 ステップ：

    開発配布例：

    - generate-cordova-build-configuration:
    inputs:
    - development_team: $BITRISE_DEVELOPER_TEAM 
    - package_type: development 
    - code_sign_identity: iPhone Developer
    - configuration: debug

    生産流通例：

    - generate-cordova-build-configuration:
    inputs:
    - development_team: $BITRISE_DEVELOPER_TEAM 
    - package_type: app-store 
    - code_sign_identity: iPhone Developer
    - configuration: release

  7. 追加します コルドバアーカイブ または イオンアーカイブ ワークフローに進みます。

  8. 必要な入力を入力します。

    • NS プラットホーム 入力は次のように設定する必要があります。 device。

    • NS ビルドコマンド構成 入力は一致する必要があります ビルド構成 の入力 Cordovaビルド構成を生成する ステップ。

      Code signing with Ionic and Cordova projects

  9. をセットする 準備ステップとしてプラットフォームを削除する必要がありますか？ に false。これは非常に重要です。これにより、ステップで生成されたネイティブプロジェクトのプラットフォームが削除および再追加されないようになります。 コルドバ準備 または イオン準備 ステップ。

  10. ビルドを実行してください！

Androidサインステップを使用したAndroidコード署名

概要

を使用して署名されたAPKを作成できますAndroidサインBitriseワークフローにステップインします。このステップは、ワークフローエディターの[コード署名]タブにキーストアファイルを既にアップロードしている場合に実行するように構成されています。

を使用して署名されたAPKを作成できますAndroidサインステップ あなたのBitriseで ワークフロー。このステップは、キーストアファイルをすでにアップロードしている場合に実行するように構成されています。コード署名ワークフローエディタのタブ。

TheAndroidサインプロジェクトで署名が構成されている場合は、手順は不要です。 build.gradle ファイル。もしそうなら、実行Androidビルド ステップ（またはGradleランナーステップ）出力（APKまたはAAB）に自動的に署名します。それでも、を使用することをお勧めしますAndroidサイン簡単で安全な方法でプロジェクトに署名するステップ。

jarsignとapksigner

APKはどちらかで署名できます jarsigner また apksigner。 APKの場合、apksignerを使用してプロジェクトに署名する場合は、Androidの署名ステップで最初に有効化を設定する必要があります apksigner trueに入力し、APK署名スキーム入力を自動のままにします。こちらです apksigner APKの最小およびターゲットSDKバージョンをチェックし、必要なスキームを選択します。サポートされている最小バージョンが低い場合はV1スキームでプロジェクトに署名し、新しいシステムでは他のスキームでも署名します。

AABファイルはjarsignerでのみ署名できることに注意してください。ステップは使用します jarsigner で終わるファイルを検出した場合.aab

  1. でアプリを開きます ビットライズ。

  2. クリック ワークフロー メインページのボタン。

    opening-workflow-editor.png

  3. に移動 コード署名 >> Androidコード署名。

  4. キーストアファイルをにドラッグアンドドロップしますファイルをアップロードするのフィールドAndroidキーストアファイルセクション。

    キーストアファイルをアップロードすると、キーストアURLが自動的に生成されます。 Bitriseは環境変数を割り当てます（BITRISEIO_ANDROID_KEYSTORE_URL）値としてファイルのダウンロードURL（期間限定の読み取り専用ダウンロードURL）に。 Android Sign Stepが自動的にダウンロードするため、手動でダウンロードする必要はありません。

  5. 表示された3つの入力フィールドに資格情報を入力します。

    • キーストアのパスワード

    • キーストアエイリアス

    • 秘密鍵のパスワード

  6. クリック メタデータを保存する。

    キーストアファイルをANDROIDKEYSTORE FILEセクションに正常にアップロードすると、Bitriseは入力に基づいて次の環境変数を自動的にエクスポートします。

    • $BITRISEIO_ANDROID_KEYSTORE_ALIAS

    • $BITRISEIO_ANDROID_KEYSTORE_PASSWORD

    • $BITRISEIO_ANDROID_KEYSTORE_PRIVATE_KEY_PASSWORD

    • $BITRISEIO_ANDROID_KEYSTORE_URL

  7. 追加します Androidサイン APKまたはAABファイルをビルドするステップの後にワークフローにステップします。

    Bitriseは上記の環境変数を使用し、それらをのそれぞれのフィールドへの入力として設定します。Androidサインステップ。ステップが実行されると、署名されたAPKまたはAABのいずれかが生成されます。署名されたAPKまたはAABは、デプロイ手順で使用されます。たとえば、GooglePlayデプロイステップまたはBitrise.ioにデプロイしますステップ。後者はAPK / AABをにデプロイします アプリとアーティファクトタブ。使用することもできます 船 APK / AABファイルを作成したら、アプリをデプロイします。

キーストアファイルのダウンロード

キーストア ファイルは、ANDROID KEYSTORE FILE セクションからプロジェクト ディレクトリにダウンロードできます。ファイルダウンローダステップ：

- file-downloader:
   inputs:
   - source: $BITRISEIO_ANDROID_KEYSTORE_URL
   - destination: "$HOME/keystores/my_keystore.jks" #native android#

ステップでキーストア ファイルが必要な場合は、必ずそのステップを ファイルダウンローダ ステップ。

このステップの後、my_keystore.jksで利用可能になります$HOME/keystores/my_keystore.jks。

Ionic / Cordovaアプリのデプロイ

BitriseでIonicまたはCordovaアプリをビルドしてデプロイするには、AndroidプロジェクトとiOSプロジェクトの両方にデジタル署名し（両方をビルドしている場合）、デプロイする前に、CordovaアーカイブまたはIonicアーカイブステップを使用してアプリをビルドする必要があります。

正常にビルドされたアプリは、次の場所にデプロイできます。

  • GooglePlayストアやAppleのAppStoreなどのオンラインストア。

  • Bitrise.io：生成されたバイナリは アーティファクト ビルドのページのタブ。そこからダウンロードするか、公開インストールページから他の人と共有することができます。

クロスプラットフォームアプリをbitrise.ioにデプロイする

The bitrise.ioにデプロイします ステップは、ビルドに関連するすべてのアーティファクトをにアップロードします アーティファクト ビルドのページのタブ。

パブリックインストールページを使用して、生成されたアプリファイル（Androidの場合はAAB、iOSの場合はIPAファイル）をチームメンバーと共有できます。パブリックインストールページは、生成されたアプリバイナリをデバイスにインストールできる他のユーザーと共有できるURLです。 AAB / APKまたはIPAファイルが作成されたことをユーザーグループまたは個々のユーザーに通知することもできます。

  1. でアプリを開きます ビットライズ。

  2. クリック ワークフロー メインページのボタン。

  3. からワークフローを選択します ワークフロー ドロップダウンメニュー。

    select-workflow.png

  4. あなたが持っていることを確認してください bitrise.ioにデプロイします ワークフローにステップインします。

  5. の中に 通知：ユーザーの役割、この役割が付与されている人だけに通知されるように、役割を追加します。または、 通知：メール 通知するユーザーの電子メールアドレスを含むフィールド。

    これらのメールアドレスを次のように設定してください 秘密！これらの詳細は、以下で変更することもできます。 通知 クリックすると 目 で生成されたバイナリの横にあるアイコン アーティファクト タブ。

  6. ステップでパブリックインストールページを生成する場合は、 アプリの公開ページを有効にしますか？ への入力 NS。

AndroidプロジェクトをGooglePlayにデプロイする

あなたは使用することができます GooglePlayにデプロイする ワークフローにステップインして、デジタル署名されたAAB / APKをGooglePlayストアにアップロードします。

  1. 追加します コルドバアーカイブ または イオンアーカイブ ワークフローに進みます。

    1つのプロジェクトでiOSとAndroidの両方をビルドしていて、どちらかのアプリが失敗した場合、全体が失敗することに注意してください コルドバアーカイブ/イオンアーカイブ ステップは失敗します。

  2. 必要な入力を入力します。

    • NS プラットホーム 入力をに設定する必要があります 端末。

    • NS ビルドコマンド構成 入力は一致する必要があります ビルド構成 の入力 Cordovaビルド構成を生成する ステップ。

    アーカイブステップは、 Cordovaビルド構成を生成する ワークフローにステップインします。

  3. コード署名を構成する あなたのアプリのために。

  4. GooglePlayアクセスを構成します。

    これを行う必要があるのは、アプリの最初のGooglePlayデプロイの場合のみです。

  5. あなたが持っていることを確認してください GooglePlayにデプロイする 後のステップ コルドバアーカイブ また イオンアーカイブ ワークフローにステップインします。

  6. 次のように、必須の入力フィールドに入力します。

    • サービスアカウントのJSONキーファイルパス：このフィールドはリモートURLを受け入れることができるため、アップロードされたサービスアカウントのJSONキーを含むEnvVarを指定する必要があります。例えば： $BITRISEIO_SERVICE_ACCOUNT_JSON_KEY_URL。

    • パッケージ名：Androidアプリのパッケージ名。

    • 追跡：APKをデプロイするトラック（たとえば、alpha / beta / rollout / productまたは設定したカスタムトラック）。

iOSプロジェクトをAppStoreにデプロイする

  1. 追加します コルドバアーカイブ または イオンアーカイブ ワークフローに進みます。

    1つのプロジェクトでiOSとAndroidの両方を対象にビルドしていて、どちらかのアプリが失敗した場合、全体が失敗することに注意してください コルドバアーカイブ/イオンアーカイブ ステップは失敗します。

  2. 必要な入力を入力します。

    • NS プラットホーム 入力をに設定する必要があります 端末。

    • NS ビルドコマンド構成 入力は一致する必要があります ビルド構成 の入力 Cordovaビルド構成を生成する ステップ。

    アーカイブステップは、 Cordovaビルド構成を生成する ワークフローにステップインします。

  3. iOSコード署名を構成する iOSプロジェクト用。

  4. 追加します App Store Connectへのデプロイ-アプリケーションローダー（以前のiTunes Connect） 後、ワークフローに進みます iOS用のXcodeアーカイブとエクスポート ステップ、できれば前に Bitrise.ioにデプロイします ステップ。

  5. Appleのクレデンシャルを App Store Connectへのデプロイ-アプリケーションローダー（以前のiTunes Connect） ステップ。

    ステップには次のものが必要です。

    • Apple ID。

    • パスワード、またはApp Store Connectで2要素認証を使用する場合は、アプリケーションのパスワード。

    心配しないでください。パスワードはログに表示されたり、公開されたりすることはありません。

  6. ビルドを開始します。

このセクションの内容:
ステップワークフロー