はじめに

ゆとり世代の中野です。

今回チャレンジした内容は【EASの導入について】です。

さっそくチャレンジについて書いていきます。

チャレンジする背景

• EASの導入時に知っておきたいことを忘備録として残しておく

チャレンジ内容

• iOSとAndroidの実機にインストールしてアプリが動く
• SimulatorとEmulatorにインストールしてアプリが動く

EASとは

ExpoおよびReactNativeアプリ向けの緊密に統合されたクラウドサービスです

アプリのビルドからストアの配信まで自動で行うことができます

Expoを使う理由はこのEASがあるからと言っても過言ではないと思います

準備

• nodeを準備しておく
• 個人はv16系がおすすめ
• 下記のパッケージをインストールする
• npm install -g eas-cli

EASのbuildで利用するeas.jsonを生成する

• cli上でログインする
• eas account:login
• buildの設定ファイル(eas.json)を作成する
• eas build:configure

EASのbuildで利用するprofileについて

profileとは

• EASのbuildコマンドにはprofileという概念があります
• 簡単に言えばbuildの設定をまとめて名前をつけたものです
• buildを実行する時にどのprofileを利用するか指定できます
• 作成したeas.jsonにprofileを定義します

具体例

• development
• 開発者が共通の環境を使ってbuildで利用するprofile
• eas build --platform all --profile development
• preview
• いわゆるstage環境のbuildで利用するprofile
• eas build --platform all --profile preview
• production
• 本番向けのbuildで利用するprofile
• eas build --platform all --profile production

eas.jsonの設定

スタンドアローンアプリをビルドするための設定

ゆとり世代の中野です。

yutanakano.com

ビルドした成果物の動作確認方法

iOS

• 実機
• EAS上でインストールしたいiOSのbuildを選択する
• 選択したbuildの詳細画面にInstallがあるのでクリックする
• QRコードのモーダルが表示されるのでiPhoneで読み込む
• アプリを検索して起動する
• Simulator
• EAS上でインストールしたいiOSのbuildを選択する
• 選択したbuildの詳細画面にDownloadがあるのでクリックする
• 圧縮ファイルがダウンロードされるので下記コマンドで解凍する
• tar -xvzf Downloadしたファイル名.tar.gz
• 実行するとproute.appが作成されている
• Downloadしたファイル名.tar.gzと同じ階層にある
• 解凍したファイルをシュミレーターにドラッグアンドドロップして起動する

Android

• 実機
• EAS上でインストールしたいAndroidのbuildを選択する
• 選択したbuildの詳細画面にInstallがあるのでクリックする
• QRコードのモーダルが表示されるのでAndroidで読み込む
• 選択すると.apkファイルをダウンロードできるのでダウンロードする
• ファイル関連のアプリを開きダウンロードしたファイルがあることを確認する
• ダウンロードしたファイルを選択するとインストールするか聞かれるのインストールを選択
• 開発者モードにしておく必要があるかも
• アプリを検索して起動する
• Emulator
• EAS上でインストールしたいAndroidのbuildを選択する
• 選択したbuildの詳細画面にOptionsがあるのでクリックするとDownload buildが表示されるのでクリックする
• DownloadしたファイルをEmulatorにドラッグアンドドロップしてインストールする
• インストールしたアプリを起動する

補足

expo build と eas buildどっち使えば？

• EAS Build に書いてありますが 次世代のexpo buildです
• 新しく作るプロジェクトはeas buildを使いましょう

WEBのbuildはどうすれば？

• eas buildにwebは含まれていないためexpo build でビルドしましょう

まとめ

• 1コマンドで簡単にeas.jsonが作成可能
• Profileにbuildの設定をまとめることが可能
• SimulatorとEmulatorで動かすにはProfileに設定が必要
• 実際にbuildしたものを実機やSimulatorとEmulatorにインストールが可能

さいごに

EASを使うことで簡単にスタンドアローンアプリとして動作確認ができます

またストアへのリリースも自動でやってくれるためExpoを使う上では切っても切り離せないサービスです！

yutanakano

WEBエンジニア

大阪生まれのゆとり世代です

趣味はバイクでツーリングに行くこと

愛車は Ninja ZX-25R SE KRT EDITION

Expoでプロダクトを作っています