Zenn
🍎

人生で一番詰まったReactNativeのiOS実機ビルドの話

2022/06/07に公開
React Native
macOS
ビルド
tech

概要

タイトル通り、React Native（以下、RN）の実機ビルドに人生で一番詰まったため、そこでうまくいった設定を書いていきます。

そのため、概論的な話ではなく、あくまで一例の紹介となるので、ご注意ください。
画像いっぱい使ってお伝えしますね！

ちなみに、今回出力されていたエラーは以下のもの。

module map file 
'/Users/nyaru/Library/Developer/Xcode/DerivedData/HogeLatestRN-fxykdtxawpjayhbjphilfuvyjduv/Build/Products/Debug-iphoneos/YogaKit/YogaKit.modulemap' not found

開発環境

  • Intel
  • macOS Monterey (12.4)
  • Xcode (13.4)
  • node (16.13.0)
  • watchman (2022.05.30.00)
  • cocoapods (1.11.3)
  • react-native ←npxで実行しています。

ビルド時に踏んだ手順（エラーが起きるまで）

下記の公式ドキュメント通りに忠実に環境構築を進めました。
https://reactnative.dev/docs/environment-setup
↑上記のドキュメント通りに進めて、シミュレータでアプリがビルドできることを確認しました。

https://reactnative.dev/docs/running-on-device
↑忠実に進めていたつもりが、重大なことに気づいておらずビルドに失敗…！

ビルド失敗に至った重大なこととは…？

https://reactnative.dev/docs/running-on-device
上記の公式ドキュメントの1章に、こんなことが書いてあります。

Connect your iOS device to your Mac using a USB to Lightning cable. Navigate to the ios folder in your project, then open the .xcodeproj file, or if you are using CocoaPods open .xcworkspace, within it using Xcode.

僕は英語が不得手なもので、「ほ〜ん。.xcodeprojを開けばいいのね。把握把握。」と考えていました…

でも後になってね！
気づいた！
Macでのビルドだったらcocoapods使うから.xcworkspaceで開いて設定する必要あるじゃん！！！という事実に…

ということで、MacでiOS実機ビルドの設定のためには、下記の通りコマンドラインから.xcworkspaceを開くか、Finderから.xcworkspaceを開いて設定を進めていきます。（.xcodeprojの方を設定するだけだとエラーで詰まりまくります。僕のように…）

$ open AwesomeApp/ios/AwesomeApp.xcworkspace

エラーを解決するために行なった設定

.xcworkspaceを開くと、下記の写真の通り、左サイドバーにアプリ名とPodsというディレクトリが表示されます。

PodsはiOS/Mac向けのライブラリを管理するcocoapadの設定ディレクトリです。
MacユーザーがRNの公式ドキュメント通りビルドを行うと、cocoapadを使用するため、このPodsの設定も行う必要があったのですね。
先に言って欲しかった（公式ドキュメントに書いてあった）

基本的には、設定項目は下記の1点を意識してください！

  • iOS向けにビルドする

というわけで、まずはPods側の設定から行なっていきます。

Podsの設定

下記の通り、「PROJECT > Pods」を開きます。

下記のタブから「Build Settings」を開きます。

下記の通り、「Architectures > Base SDK」で「iOS」を選択します。←僕はここの設定ができてなくてエラー起きてたみたいです…

下記の通り、「Deployment > iOS Development Target」で「iOS {ビルドしたいOSのversion}」を選択します。

右のサイドバーは下記のように、Xcodeのバージョンを自分のバージョンに合わせて設定しました。

アプリの設定&テストの設定

以下、アプリの設定方法についてご説明します。
テスト用のTARGETSについても、以下にご紹介する項目を確認してみて、ビルド対象のiOSの設定と異なる場合（例えば、iOS15.4をビルドしたいのにiOS12.4になっているとか）は修正しましょう。

下記の通り、「PROJECT > アプリ」を開きます。

下記のタブから「Info」タブを開きます。

下記の通り、「Deployment Target」から、自分がビルドしたいiOSのバージョンを指定します。

下記のタブから「Build Settings」を開きます。

下記の通り、「Architectures > Base SDK」で「iOS」を選択します。

次は、下記の通り、「TARGETS > アプリ名」を開きます。また、以下の設定はTARGETSにあるアプリ名Testsでも全く同じことを繰り返してください！

下記のタブから「General」を開きます。

下記の通り、「Deployment Info」からiOSのバージョンを指定します。

下記のタブから「Signing & Capabilities」を開きます。

下記の通り、「Singing」の設定を行なってください。

※ Teamの設定に関しては、下記のサイトからデベロッパーアカウントを作って、それを使ってください。
https://developer.apple.com/

下記のタブから「Build Settings」を開きます。

下記の通り、「Architectures > Base SDK」で「iOS」を選択します。

下記の通り、「Deployment > iOS Development Target」で「iOS {ビルドしたいOSのversion}」を選択します。

右のサイドバーは下記のように、Xcodeのバージョンを自分のバージョンに合わせて設定しました。

まとめ

  • MacでReact NativeのiOSビルドするときはcocoapodsを使うから、.xcworkspaceから設定を行いましょう！
  • 設定を行うときは、iOSをターゲットに設定をすることを意識しましょう！

Discussion