最近M1チップ搭載のMacBook Airを購入しました。2020年代の記事の情報では、多くのソフトが新しいM1チップのAppleのアーキテクチャに対応していないようで、Rosettaを使ってインストールを進める手順が多く紹介されていました。
自分としては同じPCの中でソフトウェアごとにアーキテクチャを切り替えるというのが気持ち悪かったので、なんとかRosettaを使わずに、Appleのアーキテクチャのみで構築できないかと調べていました。
結論をいうと、2021年4月時点ではRosettaを使わずにnpx react-native run-iosまで実行してサンプルプロジェクトを立ち上げられることが確認できました。
以下環境構築までの手順を紹介したいと思います。
全体の流れはこちらを参考にしました。
M1 (Apple Silicon) Macで既存のReact Nativeプロジェクトの開発環境が整うまで
M1 Mac を購入して arm64 縛りでインストールしたもの (更新中)
Xcodeのインストール
Mac App StoreからXcodeをインストールします。
もしくはterminal上でインストール
$ xcode-select --installHomebrewのインストール
2021/2/5のアップデートでM1チップに対応したそうです。問題なくインストールできました
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"パスを通す
~/.zshrcを作成して以下を記入。
export PATH=/opt/homebrew/bin:/usr/local/bin:$PATHNodebrewのインストール
Nodeのバージョン管理をしたいので、Nodebrewをインストールします。
$ brew install nodebrewパスを通す
export PATH=$HOME/.nodebrew/current/bin:$PATH本来Nodebrewでは nodebrew install (nodeのバージョン) でインストールができるのですが、2021年4月時点では、M1チップのarm64アーキテクチャに対応したバイナリが用意されていないため、インストールするには自前でコンパイルする必要があります。以下の手順でコンパイルまで行いました。
Nodeコンパイル時のアーキテクチャの変更
/opt/homebrew/bin/nodebrew 上のsystem_infoの部分を修正してarm64アーキテクチャを指定します。
参考：M1 Mac を購入して arm64 縛りでインストールしたもの (更新中)
sub system_info {
my $arch;
my ($sysname, $machine) = (POSIX::uname)[0, 4];
if ($machine =~ m/x86_64|arm64/) {
$arch = 'arm64';
} elsif ($machine =~ m/i\d86/) {Nodeのコンパイル
コンパイル前にディレクトリを作成しておきます。
$ mkdir -p ~/.nodebrew/srcようやくコンパイルできます。コンパイルにはめちゃくちゃ時間がかかるので寝る前に開始して朝インストール完了を確認しました。
$ nodebrew compile v15.12.0
$ nodebrew use v15.12.0ここで、Nodeのバージョンが低いとReact Nativeのビルド時にエラーが発生するため、最新版をインストールします（v15.6.0をインストールしていて、ここで結構ハマりました。）
Cocoapodsをインストール
$ sudo gem install cocoapods
$ sudo gem install ffiちなみに二つ目のffiをインストールしないとReact Native内でpod installが実行できませんでした。
React Nativeのサンプルプログラムを実行
公式の記事をもとに実行しました。
必要なパッケージのインストール
$ brew install watchman
$ npm install -g react-native-cliXcode上でコマンドラインツールが指定されているか確認
「Preference」→「locations」→「Command Line Tools」からXcode12以上が設定されているか確認(バージョンに指定があるかは不明ですが、最新版を指定しました。)
React Nativeのサンプルプロジェクトをインストール
$ npx react-native init AwesomeProjectこのコマンドがうまくいかない時なんらかの環境が設定できていない可能性があります。僕はCocoapods周りで詰まっていました。（sudo gem install ffiで解決）
ビルド、エミュレータ上での実行確認
$ cd AwesomeProject
$ npx react-native start
$ npx react-native run-iosこちらの画面が出てきたらサンプルプロジェクトのビルドが成功しています。
当初ここで、「No bundle URL present」というエラーが発生していたのですが、Nodeのバージョンをv15.6.0からv15.12.0に変えたところ問題なく起動できました。
まとめ
現在のところM1チップへの対応はまだまだですが、徐々に対応が進んでいると思います。この記事も2021年4月時点の情報で、すぐに古くなってしまうかもしれません。詰まって記事を調べるときはなるべく最新の情報を参考にしたほうが良いかもしれません。
コメント