🗿
中略。 Expo Development Buildでつまずきました。
対象読者
-
Expoでネイティブアプリの開発を検討してる人
- → つまずきポイントを知ることができます。
-
Development Buildを導入しようとしている人
- → 全体の流れと「やらなくてもいいこと」がわかります。
記事の内容を3行でまとめ
- Development Buildについてかんたんに説明
- Development Buildで失敗する方法
- Development Buildを成功させる方法を紹介します！
自己紹介
zacker（ざっかー）といいます。
アプリ開発が大好きな大学院生です。
「komichi」という2時間くらいの暇つぶしプランを作ってくれるサービスを作っています。
ぜひ、一度触ってみてください！
Development Buildとは
「ネイティブライブラリをインストールしたい」というときに使えます
- ネイティブライブラリをインストールするとExpo Goが使えなくなります 😢
- => Development Buildを利用すると、Expo Goと同じような開発体験を維持しつつ、ネイティブライブラリをインストールすることができます
- 多くの人が
Firebaseを利用するときにDevelopment Buildの導入を要求されることになると思います。
メンドウなネイティブの設定はExpoにおまかせ！
- Development Buildを行うと、自動的にandroid, iosディレクトリが出力されます
- この中身はapp.json（Expoの設定ファイル）を修正することでExpoがよしなに書き換えてくれます
- ⇒ 自分でネイティブの設定を編集したり、ビルドの設定をする必要がない！
- 例 Firebase：jsonファイルやplistファイルをネイティブディレクトリに設置
{
"expo": {
"android": {
"googleServicesFile": "./google-services.json",
"package": "com.mycorp.myapp"
},
"ios": {
"googleServicesFile": "./GoogleService-Info.plist",
"bundleIdentifier": "com.mycorp.myapp"
},
}
}
最初のセットアップだけすれば、Expo Goとほぼ同じように使えます
- 一度ビルドすれば、Expo Goと同様にホットリロードが有効になります
- ただ、このビルド作業がとーーーーーっても長いというデメリットはあります（Expo Goが良すぎた）
Development Buildを導入してみる
失敗パターン
- 設定が失敗している状態でビルドすると以下のようなエラーが発生します。
- ※ シミュレータでは起動できても、実機だと上記のようなエラーが発生することがあります。
There was a problem loading the project
unexpected end of stream…
成功パターン
-
nodeのバージョンを18にする（これが最重要！）
https://expo.dev/changelog/2023/11-03-node-default
- EASでNode 18を利用しており、これに合わせる必要があります
- nodenv を利用するとプロジェクトごとにNodeバージョンを指定することができるため、おすすめです。
- Universal App（Webアプリも同じプロジェクトで開発）を採用している場合は、Webの方のビルドをDockerで行うのも一つの手だと思います。
-
dev-clientをインストールするnpx expo install expo-dev-client -
起動スクリプトを修正する
{ "scripts": { "start": "expo start -c", "android": "expo run:android", "ios": "expo run:ios", }, } -
ビルドをしてから起動をする
yarn startの代わりに以下のコマンドを実行すると、ネイティブビルドをしてからDevelopment Serverが起動します。yarn android yarn ios
Appendix
EAS Build
公式ドキュメントを見ると、以下のようにEASビルドの設定を修正するような言及があります。
{
"build": {
"development": {
"developmentClient": true,
"distribution": "internal"
},
"preview": {
"distribution": "internal"
},
"production": {}
}
}
Development Buildを導入するだけの場合は、この設定は不要なのですが
これが何をしているのかがあまり分からなかったので、実際にやってみて調べました。
-
"distribution": "internal"- App StoreやGoogle Play Storeを介さずインストール可能な形式でビルドされます（APKなど）
-
"developmentClient": true- dev clientが動作する状態でビルドされます。
- つまり、自分のPC上でビルドされていたものがリアルタイムに反映されます。
- 完成したアプリをプレビューするする目的であれば、falseにしたほうが良さそうです。
Discussion