React Native 環境構築（iOS編）
最初に
- Xcode の インストール or 最新へのアップデート
- iOS シミュレータ のダウンロード
を先に行っておくことを推奨。
Xcode は 12GB、iOSシミュレータは 5GB 程度のダウンロードが必要で、両方合わせると1時間半程度かかるため。
公式 に手順があるため、概ねはこれに従っている。
前提
- 環境：Apple Silicon Mac（MacOS Monterey 12.5.1 / M1 Max）
- React Native は Ruby 2.7.5 に依存しているため、Rubyをバージョン指定でインストールする必要がある（MacOS 12 に標準でインストールされているのは 2.6.8）
- Ruby 2.7.5 のインストール時に
openssl@1.1とXcodeが必要なため、インストールする必要がある
node & watchman インストール
ReactNative の推奨する node.js のバージョン は（2022-09-21現在では）14以上なので、14以上がすでにインストールされているならばインストールしなくて良い。
$ brew install node # 14以上がすでにインストールされているならば不要
$ brew install watchman
React Native の要求するバージョンの Ruby インストール
2022-09-20 現在の最新Mac OSにインストールされているRubyは 2.6.8 だが、ReactNative は 2.7.5 でないといけないとのこと。そのため rbenv をインストールし、それを経由して Ruby をインストールする。（参考：https://github.com/rbenv/rbenv ）
rbenv のインストール
rbenv で Ruby のバージョン管理を行う。もし rbenv がインストール済みでない場合は、以下コマンドにてインストールする。
$ brew install rbenv ruby-build
$ rbenv init
$ echo 'eval "$(rbenv init - bash)"' >> ~/.bash_profile
$ curl -fsSL https://github.com/rbenv/rbenv-installer/raw/main/bin/rbenv-doctor | bash
- rubyのインストール時にビルドが走るため、 ruby-build も必要
- 最後のコマンドは正常にインストールされているかチェックするもの
openssl インストール
「Macに（LibreSSLではない）opensslをインストールしておく」 + 「Rubyがビルドで使用するopensslを、明示的に（LibreSSLではない）opensslとする」という設定をしておく必要がある。これを行わない場合、こちらのエラーが発生してしまう。
ちなみに openssl は 最新LTS は 3.0.5 だが、 こちらにあるように Ruby 2.7.5 のビルド時にダウンロードしているのは 1.1.1g である。
そのため、 インストールするバージョンは 1.1系 を明示的に指定する。
$ brew install openssl@1.1
$ echo 'export RUBY_CONFIGURE_OPTS="--with-openssl-dir=$(brew --prefix openssl@1.1)"' >> ~/.bash_profile
- ちなみに私の環境の場合は
brew install openssl@1.1を実行したところopenssl@1.1 1.1.1q is already installed and up-to-date.とのメッセージが出たため、何かしらのパッケージの依存関係で、すでにインストールされていたのだと思われる brew --prefixは そのパッケージがどのパスにあるかを返すコマンドであるbrew --prefix opensslだと openssl@3 のパスが表示されてしまうため、brew --prefix openssl@1.1で明示的に 1.1系 を指定しているRUBY_CONFIGURE_OPTSは Ruby のビルド時に使用する openSSL のバージョンを指定する変数である
Xcode & Xcode Command Line Tools インストール
- Mac App Store から Xcode を探してインストールする。
- インストールしたら、起動し、Command Line Tools をインストールするか聞かれるので、
はいを選択する。
これをやっておかないと、 こちら のエラーが発生し、Ruby のインストールに失敗する。
rbenv にて 2.7.5 をインストール
以下コマンドで バージョンを探し
$ rbenv install --list-all | grep 2.7.5
以下コマンドで インストールする。 Apple Silicon マシンにおいては RUBY_CFLAGS="-w" が無いと、インストール時のビルド失敗するようなので、これを追加している。
$ RUBY_CFLAGS="-w" rbenv install 2.7.5
To follow progress, use 'tail -f /var/folders/z8/6w1xyxv559gcw_vnhqgxr2rw0000gn/T/ruby-build.20220921094609.76803.log' or pass --verbose
Downloading ruby-2.7.5.tar.bz2...
-> https://cache.ruby-lang.org/pub/ruby/2.7/ruby-2.7.5.tar.bz2
Installing ruby-2.7.5...
ruby-build: using readline from homebrew
Installed ruby-2.7.5 to ~/.rbenv/versions/2.7.5
念のため、rbenv コマンドで 2.7.5 が選択肢にあることを確認する。プロジェクトごと（厳密にはディレクトリごと）に使用するRubyのバージョンは選択できるため、グローバルに使用するRuby は System のままでも問題ない。
$ rbenv versions
* system
2.7.5
ここでインストールした Ruby 2.7.5 が rbenv による最初のインストールだった場合、自動でグローバルに設定されている。もし
-> rbenv versions で 2.7.5 が選択されていない場合は、 rbenv global 2.7.5 を実行する。npx react-native init app で作成したプロジェクトには .ruby-version ファイルがあらかじめ作成されており、これによって 2.7.5 が最初からローカルに指定されているだけだった。（一度勘違いした）
iOSシュミレータのダウンロード
Xcode を起動し、 Preference > Components で 使用したい シミュレータをダウンロードする。
リストの (↓) ボタン を押すと、そのバージョンがダウンロードできるので、今回は ダウンロード可能な中で最新のiOSである iOS15.4 をダウンロードしておく。
cocoapods インストール
Apple Silicon Mac においては公式の手順だとうまくいかないため、 homebrew 経由でインストールする。
$ brew install cocoapods
React Native Project 作成
ここまで環境構築は完了。 あとは以下のコマンドで React のプロジェクトを作成可能。
$ npx react-native init app --template react-native-template-typescript
init の後ろの app の部分に指定した名前でディレクトリが作成され、その中に必要なファイルが一式作成される。
以下のように表示されれば環境構築は完了。
###### ######
### #### #### ###
## ### ### ##
## #### ##
## #### ##
## ## ## ##
## ### ### ##
## ######################## ##
###### ### ### ######
### ## ## ## ## ###
### ## ### #### ### ## ###
## #### ######## #### ##
## ### ########## ### ##
## #### ######## #### ##
### ## ### #### ### ## ###
### ## ## ## ## ###
###### ### ### ######
## ######################## ##
## ### ### ##
## ## ## ##
## #### ##
## #### ##
## ### ### ##
### #### #### ###
###### ######
Welcome to React Native!
Learn once, write anywhere
✔ Downloading template
✔ Copying template
✔ Processing template
✔ Installing CocoaPods dependencies (this may take a few minutes)
Run instructions for Android:
• Have an Android emulator running (quickest way to get started), or a device connected.
• cd "~/Develop/ReactNative-with-TypeScript/app" && npx react-native run-android
Run instructions for iOS:
• cd "~/Develop/ReactNative-with-TypeScript/app" && npx react-native run-ios
- or -
• Open app/ios/app.xcworkspace in Xcode or run "xed -b ios"
• Hit the Run button
Run instructions for macOS:
• See https://aka.ms/ReactNativeGuideMacOS for the latest up-to-date instructions.
.node-version バージョンを修正する
試しに npx react-native run-ios コマンドで起動してみたところ、以下のエラーが発生した。
$ cd app && npx react-native run-ios
nodenv: version `16' is not installed (set by ~/Develop/ReactNative-with-TypeScript/app/.node-version)
これは npx react-native init app で自動作成された app デイレクトリ内に .node-version というファイルが作成されているのだが、そのファイルには以下のようにメジャーバージョンしか記載されていないために発生する。
16
これは、例えば nodenv でインストールしているNode.jsのバージョンが 16.0.0 だとした場合、 .node-version にも 16 ではなく 16.0.0 まで正確に書いてあげないと一致するバージョンが nodenv 側に無い、と判定されてしまうために発生するものだと思われる。
つまり、.node-version の記述を以下の通り変更すれば、このエラーは発生しなくなる。
- 16
+ 16.0.0
エラー対応
ここから先は、自分の環境で発生したエラーとその原因を備忘として残す。
エラー1 openSSLが無い
$ RUBY_CFLAGS="-w" rbenv install 2.7.5
To follow progress, use 'tail -f /var/folders/z8/6w1xyxv559gcw_vnhqgxr2rw0000gn/T/ruby-build.20220920202730.72226.log' or pass --verbose
Downloading openssl-1.1.1q.tar.gz...
-> https://dqw8nmjcqpjn7.cloudfront.net/d7939ce614029cdff0b6c20f0e2e5703158a489a72b2507b8bd51bf8c8fd10ca
Installing openssl-1.1.1q...
patching file test/v3ext.c
BUILD FAILED (macOS 12.5.1 using ruby-build 20220910.1)
Inspect or clean up the working tree at /var/folders/z8/6w1xyxv559gcw_vnhqgxr2rw0000gn/T/ruby-build.20220920202730.72226.fQQRlo
Results logged to /var/folders/z8/6w1xyxv559gcw_vnhqgxr2rw0000gn/T/ruby-build.20220920202730.72226.log
Last 10 log lines:
make[1]: *** [apps/bf_prefix.o] Error 1
make[1]: *** [apps/app_rand.o] Error 1
make[1]: *** [apps/opt.o] Error 1
20 errors generated.
make[1]: *** [apps/s_cb.o] Error 1
20 errors generated.
make[1]: *** [apps/apps.o] Error 1
20 errors generated.
make[1]: *** [apps/s_socket.o] Error 1
make: *** [all] Error 2
これは、以下のことが原因で発生していると思われる。
- rbenv による Ruby のインストール（&ビルド）を行う際 「
opensslを都度ダウンロードし、ダウンロードしたopensslを実行」という処理が、そのビルドの中で行われている - しかし最近のMacでは
opensslコマンドで実行される実体は LibreSSL という「openSSLのfork」である。つまり、rbenv は 都度ダウンロードしたほうの openssl を実行しようとするのだが、実際には LibreSSL が実行される、ということが起きてしまう - LibreSSL は openSSL から fork されたプロジェクトではあるものの、完全な互換性があるわけではないため、途中でエラーが発生する
この問題は #openssl インストール の項で書いた手順を実行することで解決される。
エラー2 Cコンパイラが動かない
上記の openssl問題を解決した後に rbenv install 2.7.5 実行したところ、次は以下のエラーが発生した。
$ RUBY_CFLAGS="-w" rbenv install 2.7.5
To follow progress, use 'tail -f /var/folders/z8/6w1xyxv559gcw_vnhqgxr2rw0000gn/T/ruby-build.20220921083211.75563.log' or pass --verbose
Downloading ruby-2.7.5.tar.bz2...
-> https://cache.ruby-lang.org/pub/ruby/2.7/ruby-2.7.5.tar.bz2
Installing ruby-2.7.5...
ruby-build: using readline from homebrew
BUILD FAILED (macOS 12.5.1 using ruby-build 20220910.1)
Inspect or clean up the working tree at /var/folders/z8/6w1xyxv559gcw_vnhqgxr2rw0000gn/T/ruby-build.20220921083211.75563.LfPlUu
Results logged to /var/folders/z8/6w1xyxv559gcw_vnhqgxr2rw0000gn/T/ruby-build.20220921083211.75563.log
Last 10 log lines:
tool/config.guess already exists
tool/config.sub already exists
checking build system type... aarch64-apple-darwin21.6.0
checking host system type... aarch64-apple-darwin21.6.0
checking target system type... aarch64-apple-darwin21.6.0
checking whether the C compiler works... no
configure: error: in `/var/folders/z8/6w1xyxv559gcw_vnhqgxr2rw0000gn/T/ruby-build.20220921083211.75563.LfPlUu/ruby-2.7.5':
configure: error: C compiler cannot create executables
See `config.log' for more details
make: *** No targets specified and no makefile found. Stop.
C compiler cannot create executables つまり Cのコンパイラが実行できない、と言われているわけだが、これは以下の手順を踏むことで解決した。
- Xcodeを最新にアップデート（12GB程度のダウンロードが必要でかなり時間がかかるため注意）
- Xcodeを起動
xcode command line toolsをインストールするか聞かれるので、はいを選択