Expo EASビルドへの移行

こんにちは。株式会社リンクネット、ソリューション事業部の森正です。
弊社ではExpoを使用したモバイル開発を行っており、Classic Buildを利用しビルドを行っていましたが、
2023年1月4日でClassic Buildが終了するためEAS Buildへの移行が必要となりました。
本記事ではClassic BuildからEAS Buildへ移行する手順を紹介したいと思います。

■ 環境

$ node -v
v16.17.1

$ npm -v
7.24.2

$ expo -V
5.4.12

■ 事前準備

EASビルドへ移行するにはSDK41以上が必要です。
そのため、SDKのバージョンが41以前の場合は事前にバージョンを上げておきましょう。
（参考サイト）https://blog.expo.dev/expo-sdk-45-f4e332954a68

■ EASサービス導入

１．EAS CLI をインストール

$ npm install -g eas-cli

２．Expoアカウントにログイン
※既にExpoアカウントにログインしている場合、この手順は不要です。

$ eas login

３．設定ファイルを生成

$ eas build:configure

■ eas.json設定

今回はこのように設定しました。

{
  "cli": {
    "version": ">= 2.1.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "env": {
        "CUSTOM_ENV": "develop"
      }
    },
    "staging": {
      "env": {
        "CUSTOM_ENV": "staging"
      }
    },
    "production": {
      "env": {
        "CUSTOM_ENV": "production"
      }
    }
  },
  "submit": {
    "production": {}
  }
}

● distribution

distribution: "internal"と指定することでIOS、Androidともにストアを通さずに直接インストールすることが可能です。
※IOSで直接インストールする場合は追加でプロファイルのインストールが必要になります。
（参考サイト）https://docs.expo.dev/build/internal-distribution/

● 環境変数

EASビルドで環境変数を使用する場合は、eas.jsonに設定します。
上記の env に書かれた箇所が環境変数です。
実際にコードで使用する場合は、expo-constants を使用して値を参照できます。

■ ビルド確認

staging環境でビルドを試してみます。
今回は既にexpo buildでアプリをビルドしているため、同じ資格情報を使用します。

$ eas build --platform all --profile staging

生成されたビルドファイルを実機にダウンロードし確認してみます。

結果、ダウンロードは問題なくできましたが、アプリを開くとクラッシュしてしまいました。

調べてみると expo-splash-screen と react-native-safe-area-context が不足していると分かったので追加でインストールします。

■ expo-splash-screen

//... 省略

"splash": {
    "image": "./assets/splash.png",
    "resizeMode": "contain",
    "backgroundColor": "#ffffff"
},

//... 省略

app.json で スプラッシュ画像を設定している場合は、expo-splash-screen が必要なためインストールします。

$ expo install expo-splash-screen

他にもapp.jsonの設定によって追加でパッケージが必要になるので、
下記サイトで必要なパッケージを確認しインストールしてください。
https://docs.expo.dev/build-reference/migrating/

■ react-native-safe-area-context

import React from 'react';
import { SafeAreaView } from 'react-native';

const App = () => {
    <SafeAreaView>
        //... コンポーネント
    </SafeAreaView>
}

export default App;

開発時にReact Nativeの SafeAreaView を使用しており、Androidでも動作していたのですが、
本来 SafeAreaView はIOSのみ適用されるものなので、クラッシュの原因となっていました。

そのためAndroidでも動作するよう react-native-safe-area-context をインストールします。

$ expo install react-native-safe-area-context

■ 再度ビルド確認

クラッシュ原因を修正したので、再度ビルドを行い確認してみます。

$ eas build --platform all --profile staging

実機にダウンロードし確認したところ、問題なく動作するようになりました。

■ まとめ

今回は Classic Build から EAS Build への移行を行いました。
クラッシュの原因を特定するのに苦労しましたが、最終的にはAppStoreConnect、GooglePlayConsoleともに
クラッシュログを参照することができたので、無事に解決することができました。
次回はアプリの申請を行いたいと思います。