React Nativeプロジェクトを使い始める

Expo プロジェクト

React NativeプロジェクトでExpoを使用する場合は、専用のガイドをご用意しています。Expoプロジェクトを使ってみる。

BitriseでReact Nativeプロジェクトを簡単にセットアップおよび設定できます。React NativeリポジトリはAndroidとiOSプロジェクトで構成される場合があるため、通常のAndroidアプリおよびiOSアプリと同様に設定を行う必要があります。BitriseでReact Nativeプロジェクトを実行すると、最初にAndroid、その後iOSビルドがビルドされることが確認できます。

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

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

• メールでのサインアップ
• Git プロバイダーでのサインアップ

BitriseにReact Nativeプロジェクトを追加する

プロジェクトの追加方法は他の場合と同じです。ウィザードの詳しい手順については、新しいプロジェクトの追加を参照してください。このセクションでは、React Nativeに固有の内容について説明します。

スキャナーがReact Nativeプロジェクトを検出する仕組み

プロジェクトスキャナーは、react-nativeを依存関係としてリストしているpackage.jsonファイルを探し、node_modules配下のものはスキップします。次に、その隣にios/ディレクトリとandroid/ディレクトリがあるかどうかを確認し、いずれか一方でも存在する場合にのみ、プロジェクトをReact Nativeとして登録します。

また、スキャナーはプロジェクトがExpoを使用しているかどうかも確認します。package.jsonがexpoを依存関係としてリストしており、その隣にapp.json、app.config.js、またはapp.config.tsファイルがある場合、BitriseはプロジェクトをExpoベースとして扱い、ネイティブのios//android/チェックをスキップします。この流れについては、Expoプロジェクトを使ってみるを参照してください。

設定できる項目

CI configurationの段階では、ウィザードに次の項目が表示されます。

• React Native project directory: package.jsonファイルが含まれるディレクトリです。
• プロジェクトのFor theAndroid部分: Project root directory、Module（デフォルトはapp）、Variant（デフォルトはDebug）。
• プロジェクトのFor theiOS部分: Project or workspace path、Scheme name、Distribution method。

JavaScriptの依存関係のインストール

Bitriseの プロジェクトスキャナーがプロジェクトのスキャンに成功すると、Run npm command または Run yarn command Stepsがデフォルトの Workflows に含まれます。これらのStepsは、アプリに不足しているJavaScriptの依存関係をインストールできます。

ネイティブのAndroidの依存関係には、Install missing Android SDK components Stepを使用できます。

ネイティブの iOS の依存関係には、Brew install Stepや Run CocoaPods install Stepなどを使用できます。

npm でJavaScriptの依存関係をインストールするには、次の手順を実行します。

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

このガイドでは、JavaScriptの依存関係のインストールに npm を使用しています。ただし、Run yarn command Stepを使用することもできます。追加の設定なしで、不足している JS の依存関係をインストールできます。

1. Log inでBitriseに移動し、左側で Bitrise CI を選択して、プロジェクトを選択してください。

2. メインページで Workflows ボタンをクリックしてください。

3. Workflowに Run npm command Stepが含まれていることを確認してください。

4. The 'npm' command with arguments to run 入力変数に install と入力してください。

   

   npm installの代わりにnpm ciコマンドを使用する

   プロジェクトに最新の package-lock.json ファイルがある場合は、The 'npm' command with arguments to run 入力で ci コマンドを使用することを推奨します。npm ciを使用すると、npm installに比べてビルド時間が大幅に短縮されるだけでなく、ビルドの信頼性も向上します。

React NativeプロジェクトのCode signing

React NativeプロジェクトはAndroidとiOSプロジェクトで構成される場合があります。両者は署名の手順が異なります。iOSとAndroidの両方でモバイルアプリにcode signingを行うには、それぞれのプラットフォーム別の手順に従ってください。

Androidプロジェクトの署名

すべてのAndroidアプリは、Androidデバイスにインストールする前に証明書でデジタル署名する必要があります。Bitriseでは、この目的のために専用のStepを使用できますが、その前にキーストアファイルが必要です。

1. キーストアファイルを生成する。

2. プロジェクトに対するAdminのロールを持つユーザー、またはEdit workflow権限を持つカスタムロールを持つユーザーで、Bitrise上のプロジェクトを開きます。

3. プロジェクトのメインページで、Project settingsボタンをクリックします。

4. 左側のメニューからCode signingを選択します。

5. AndroidタブでAdd keystore fileをクリックします。

6. ダイアログでファイルをドラッグ&ドロップし、必須項目を入力してからContinueをクリックします。

   

7. Workflow Editorを開きます。

8. Android Sign StepをWorkflowに追加します。

   キーストアファイルをアップロードしてメタデータを入力していれば、Stepの必須入力項目はすでに入力されており、それ以上の設定は必要ありません。

   Android Sign Stepの前提条件

   Workflow内で、ビルドのStep（Android Build StepまたはGradle Runner Step）の後に必ずAndroid Sign Stepを追加してください。

Xcodeプロジェクト用の署名済みIPAの作成

BitriseでのiOS code signingの概要

code signingのアセット管理に利用できるStepsについて詳しくは、iOS code signingのページをご覧ください。

Bitriseを使用すると、Xcodeプロジェクト用の署名済みIPAファイルを簡単に作成できます。

• BitriseでApple service connectionがYou have設定されている。
• code signingファイルが正しく管理されている。
• Xcode Archive & Export for iOS Stepの関連する入力項目を設定している。

配布用と開発用の両方のsigning certificateをアップロードする

プロジェクトには、開発用と配布用の両方のsigning certificateをアップロードすることを強くおすすめします。開発用のsigning certificateをアップロードしていない場合、自動プロビジョニングオプションを使用したStepsは、ビルドを開始するたびにその場で新しく生成します。これにより、最終的に証明書の最大数に達し、新しいビルドを開始できなくなる可能性があります。

準備が整ったら、WorkflowでIPAのエクスポート設定に進みます。

Workflow Editor

1. 必要なcode signingファイルが収集およびアップロードされていることを確認します。

2. WorkflowにXcode Archive & Export for iOS Stepがあることを確認します。

3. StepのDistribution method入力項目を設定します。

   

   選択肢は次のとおりです。

   • app-store: アプリをApp Storeにデプロイする場合に選択します。Distribution証明書とApp Storeプロビジョニングプロファイルが必要です。
   • ad-hoc: アプリをアドホックのテスターにデプロイする場合に選択します。Distribution証明書とAd Hocプロビジョニングプロファイルが必要です。
   • enterprise: AppleのEnterpriseアカウントを持っていて、それを使ってアプリを配布したい場合に選択します。
   • development: 社内テスト用に選択します。Developer証明書とDevelopmentプロビジョニングプロファイルが必要です。

4. Automatic code signing入力項目に、code signingに使用したいApple service connectionを設定します。使用できる選択肢は次のとおりです。

   • automatic code signingを使用しない場合はoff。
   • api-key if you use API key authorization。
   • apple-id if you use Apple ID authorization。

5. Workflowを保存し、新しいビルドを開始します。

Configuration YAML

1. ビルドに必要なcode signingファイルがすべて利用可能であることを確認します。

2. アプリのbitrise.ymlファイルを開きます。

3. Workflowにxcode-archive Stepがあることを確認します。

   my-workflow:
     steps:
     - xcode-archive:
         inputs:

4. distribution_method入力項目を正しい値に設定します。使用できる選択肢は次のとおりです。

   • app-store: アプリをApp Storeにデプロイする場合に選択します。Distribution証明書とApp Storeプロビジョニングプロファイルが必要です。
   • ad-hoc: アプリをアドホックのテスターにデプロイする場合に選択します。Distribution証明書とAd Hocプロビジョニングプロファイルが必要です。
   • enterprise: AppleのEnterpriseアカウントを持っていて、それを使ってアプリを配布したい場合に選択します。
   • development: 社内テスト用に選択します。Developer証明書とDevelopmentプロビジョニングプロファイルが必要です。

   my-workflow:
     steps:
     - xcode-archive:
         inputs:
         - distribution_method: development

5. automatic_code_signing入力項目に、code signingに使用したいApple service connectionを設定します。使用できる選択肢は次のとおりです。

   • automatic code signingを行わない場合はoff。
   • api-key if you use API key authorization。
   • apple-id if you use Apple ID authorization。

   my-workflow:
     steps:
     - xcode-archive:
         inputs:
         - automatic_code_signing: api-key
         - distribution_method: development

以上です。Xcodeは、プロジェクトのBundle IDとTeam IDの設定、および設定したエクスポート方法に基づいて、適切な署名ファイルを自動的に選択します。

別のチームのcode signingファイルでIPAファイルに署名する

IPAファイルに、別のチームのcode signingファイルで署名したい場合があります。例:

• 社内ビルドには自社のcode signingファイルを使用しているが、App Store配布にはクライアントのcode signingファイルを使用している場合。
• automatic code signingにApple IDを使用しており、Apple IDが複数のチームに属している場合は、The Developer Portal team to use for this export入力項目を使用して、automatic code signingのアセット管理に使用するチームを指定します。

その方法は次のとおりです。

1. 新しい開発チームの正しいcode signingファイルがBitriseにアップロードされていることを確認します。
2. Distribution methodに加えて、The Developer Portal team to use for this exportオプションも設定します。
3. Distribution methodを設定します。

React Native アプリのテスト

React Native の組み込みテスト方法である jest を使用して、ユニットテストを実行できます。

1. Bitrise にアクセスして Log in、左側の Bitrise CI を選択し、プロジェクトを選択します。

2. メインページの Workflows ボタンをクリックします。

3. run npm command Step を Workflow に追加します。

4. npm command with arguments to run 入力フィールドに test と入力します。

   

React Native のテストの詳細なガイドについては、Testing React Native apps を参照してください。

React Native のテスト結果の表示

Bitrise では、テスト結果を 1 か所で確認して分析できます。詳しくは テスト結果の表示 を参照してください。

デフォルトでは、Run npm command Step で実行したテストはテストレポートに表示されません。ただし、結果をエクスポートできます。基本的な手順は次のとおりです。

1. ビルド中に junit.xml ファイルを生成します。

   たとえば、jest-junit を使用してレポートを準備できます。

2. Export test results to Test Reports Step を Workflow に追加します。

   

3. Path where custom test results reside 入力に、junit.xml ファイルとその他のテスト結果が保存されているフォルダーを追加します。

4. Test result search pattern 入力に *.xml を設定します。

5. The name of the test 入力に、実行を示す the name of the test を設定します。

   テスト結果は、この名前で表示されます。

6. Workflow に Deploy to Bitrise.io Step が含まれていることを確認します。

React Nativeアプリのデプロイ

React Nativeアプリは以下にデプロイできます。

• bitrise.io: 生成されたバイナリをダウンロードしたり、公開インストールページを通じて他のユーザーと共有したりできます。
• オンラインストア: さまざまなオンラインストアとの連携機能を用意しています。これらのガイドでは、Google PlayおよびAppleのApp Storeへの公開方法を説明します。

CodePush

Bitrise CodePushを使用すると、ユーザーのデバイスにアップデートをデプロイできます。CodePushはRelease Managementの一部であり、React NativeおよびExpoアプリでサポートされています。

CodePushの詳細については、公式ガイドをご覧ください: CodePush。

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

Deploy to bitrise.io Stepは、ビルドに関連するすべてのアーティファクトを、BuildのページにあるArtifactsタブにアップロードします。

公開インストールページを使用すると、生成されたバイナリファイル（Androidの場合はAPK、iOSの場合はIPAファイル）をチームメンバーと共有できます。公開インストールページはURLであり、他のユーザーと共有することで、生成されたアプリバイナリを自分のデバイスにインストールしてもらえます。また、APKまたはIPAファイルがビルドされたことをユーザーグループや個々のユーザーに通知することもできます。

Publishing to expo.io

Deploy to Bitrise.io StepはExpoコマンドを使用せず、expo.ioへの公開も行いません。このStepはアーティファクトをBitriseに公開するものであり、特定のプラットフォームに限定されません。

expo.ioに公開する必要がある場合は、Expo Eject StepのRun expo publish after eject?入力項目をyesに設定します。その場合、expo.ioに公開するためにExpoアカウントのユーザー名とパスワードを指定する必要がある点に注意してください。

1. Bitrise にアクセスして Log in、左側の Bitrise CI を選択し、プロジェクトを選択します。

2. メインページの Workflows ボタンをクリックします。

3. WorkflowにDeploy to bitrise.io Stepがあることを確認します。

4. Notify: User Rolesでロールを追加すると、そのロールを付与されたユーザーのみに通知されます。または、通知したいユーザーのメールアドレスをNotify: Emailsフィールドに入力します。

   これらのメールアドレスは必ずSecretsとして設定してください。これらの詳細は、Artifactsタブで生成されたバイナリの横にあるeyeアイコンをクリックすると、Notificationsからも変更できます。

5. Stepに公開インストールページを生成させたい場合は、Enable public page for the App?入力項目をtrueに設定します。

アプリをApp Store Connectにデプロイする

アプリをApp Store Connectにプッシュするたびに、一意のビルド番号とバージョン番号が必要になる点に注意してください。デプロイする前に、いずれか、または両方をインクリメントしてください。

1. AppleのDeveloperアカウントへの接続が正常に機能していることを確認します。

2. 自分のマシンで少なくとも一度はIPAファイルを生成します。

3. 必要なcode signingファイルをすべてBitriseにアップロードします。

   アプリをApp Store Connectにデプロイするには、Distributionタイプの証明書とApp Storeタイプのプロビジョニングプロファイルが必要です。

4. WorkflowにXcode Archive & Export for iOS Stepがあることを確認します。

5. Automatic code signing入力項目に、code signingに使用したいApple service connectionを設定します。使用できる選択肢は次のとおりです。

   • automatic code signingを使用しない場合、またはAppleサービスの認証にStep inputsのみを使用する場合はoff。
   • APIキー認証を使用する場合はapi-key。
   • Apple ID認証を使用する場合はapple-id。

6. StepのDistribution method入力項目をapp-storeに設定します。

   Stepは、エクスポートされた.ipaファイルのパスを$BITRISE_IPA_PATH環境変数に保存します。

7. Deploy to App Store Connect StepをWorkflowに追加します。

8. 必須の入力項目を入力します。

   • アプリのApple IDまたはBundle IDのいずれかが必須の入力項目です。どちらか一方を指定する必要があります。
   • Submit for Reviewをyesに設定すると、StepはApp Store Connectでの提出処理が完了するのを待ってから、指定したバージョンのアプリを審査に提出します。
   • Skip App Version Update入力項目のdefault valueはNoです。別の方法でアプリのバージョン番号をインクリメントした場合にのみ変更してください。
   • 複数のチームにリンクされたApp Store Connectアカウントを使用している場合は、Team IDまたはTeam nameのいずれかを指定してください。

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

すべてが正常に完了すると、アプリはApp Storeに送信され、TestflightまたはApp Store経由で配布できるようになります。

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

Workflow内のDeploy to Google Play Stepを使用して、デジタル署名されたAAB/APKをGoogle Play Storeにアップロードできます。

1. WorkflowにAndroid Build Stepが含まれており、Android Sign Stepより前に実行されることを確認します。

2. アプリのcode signingを設定します。

3. Google Playアクセスを設定します。

   これは、アプリの最初のGoogle Playデプロイの際にのみ行う必要があります。

4. Workflow内で、Android Sign Stepの後にDeploy to Google Play Stepがあることを確認します。

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

   • Service Account JSON key file path: このフィールドはリモートのURLを受け付けるため、アップロードしたサービスアカウントのJSONキーを含むEnv Varを指定する必要があります。例: $BITRISEIO_SERVICE_ACCOUNT_JSON_KEY_URL。
   • Package name: Androidアプリのpackage name。
   • Track: APKをデプロイしたいトラック（例: alpha/beta/rollout/production、または設定した任意のカスタムトラック）。