EASの導入について

EASの導入について

はじめに

ゆとり世代の中野です。

今回チャレンジした内容は【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の設定

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

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でプロダクトを作っています

image
GitHubXInstagram

©ゆとりちゃれんじ