ExpoでEAS Buildを有効にした際にハマった箇所の紹介

memoirでEAS Buildを試してみた。実際にやってみたら結構ハマりどころがあったので記事にした。

PR

github.com

EAS Buildとは

docs.expo.dev

EAS BuildはExpoの提供しているクラウドのビルド環境で、こちらを使用することでビルドの速度アップ、Hermes Engineを有効化 や Storeに直接アップロード 等が可能になる。

代わりに環境変数や一部の設定が従来のexpo buildとは異なるため、ハマったポイントを以下にまとめた。

実装

docs.expo.dev

EAS Buildは上記を参考に実装。

以下のコマンドでconfigファイルを作成。

$ eas build:configure

configファイルを作成した状態で以下のコマンドを実行でEAS Buildを実行。

$ eas build --profile production

以下、ビルドが成功するまで対応した内容を記載。

①. EAS Buildの環境変数の設定方法

expo buildではprocess.envで環境変数にアクセスできたが、 EAS Buildではapp.config.tsのextraを使用して環境変数を設定する実装に変更。

docs.expo.dev

以下のように app.config.tsを修正

■ app.config.ts

export default ({ config }: ConfigContext): ExpoConfig => ({
  ...config,
  extra: {
    API_HOST: process.env.API_HOST,
    FIRE_BASE_API_KEY: process.env.FIRE_BASE_API_KEY,
    FIRE_BASE_AUTH_DOMAIN: process.env.FIRE_BASE_AUTH_DOMAIN,
    FIRE_BASE_PROJECT_ID: process.env.FIRE_BASE_PROJECT_ID,
    FIRE_BASE_STORAGE_BUCKET: process.env.FIRE_BASE_STORAGE_BUCKET,
    FIRE_BASE_MESSAGING_SENDER_ID: process.env.FIRE_BASE_MESSAGING_SENDER_ID,
    FIRE_BASE_APP_ID: process.env.FIRE_BASE_APP_ID,
    FIRE_BASE_MEASUREMENT_ID: process.env.FIRE_BASE_MEASUREMENT_ID,
    GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
    EXPO_GOOGLE_CLIENT_ID: process.env.EXPO_GOOGLE_CLIENT_ID,
    ANDROID_GOOGLE_CLIENT_ID: process.env.ANDROID_GOOGLE_CLIENT_ID,

実際にコードで使用する場合は、expo-constantsを使用して値を参照する。

import Constants from 'expo-constants';

export const firebaseConfig = {
  apiKey: Constants.manifest?.extra?.FIRE_BASE_API_KEY,
  authDomain: Constants.manifest?.extra?.FIRE_BASE_AUTH_DOMAIN,
  projectId: Constants.manifest?.extra?.FIRE_BASE_PROJECT_ID,
  storageBucket: Constants.manifest?.extra?.FIRE_BASE_STORAGE_BUCKET,
  messagingSenderId: Constants.manifest?.extra?.FIRE_BASE_MESSAGING_SENDER_ID,
  appId: Constants.manifest?.extra?.FIRE_BASE_APP_ID,
  measurementId: Constants.manifest?.extra?.FIRE_BASE_MEASUREMENT_ID,
};

上記を設定した上で以下のコマンドでEAS Buildの環境変数を設定。

$ eas secret:create project  API_HOST *****

設定した環境変数は以下で確認可能。

$ eas secret:list

これでEAS Buildで環境設定の値を使用可能になる。

②. ビルドに必要なファイルが、EAS Buildのサーバーにアップロードされない

実際EAS Buildを実行したところ、必要なファイルが存在せずにエラーになった。

原因は以下の通り

github.com

デフォルトでは.gitignoreに設定されているファイルはアップロードされないようになっている。 .easignoreを追加すると、こちらの設定が優先されてアップロードするファイルを制御できる。

memoirでは以下を設定した。

■ .easignore

node_modules/**/*
.expo/*
npm-debug.*
*.orig.*
web-build/
web-report/

# macOS
.DS_Store

# Project
.tmp/*
.env

③.EAS Buildでgoogle-services.jsonとGoogleService-Info.plistが見つからない

EAS Buildでgoogle-services.jsonとGoogleService-Info.plistが見つからない状態になったが、以下にpathを変更したら直った。

■ app.config.ts

export default ({ config }: ConfigContext): ExpoConfig => ({
  （略）
     ios: {
        googleServicesFile: './GoogleService-Info.plist'  // './ios/GoogleService-Info.plist' だと見つからないエラーになる
     },
     android: {
        googleServicesFile: './google-services.json'　 // './android/google-services.json' だと見つからないエラーになる
     }
})

google-services.jsonとGoogleService-Info.plistはカレントのディレクトリに置くのが正解（っぽい？）。

④. Buildに成功してPlay Storeにアップロードするとフィンガープリントが違うのエラーが表示

Buildに成功してPlay Storeにアップロードすると以下のエラーが発生。

こちらは既にリリース済みのアプリをEAS Buildに移行した場合のみ発生するエラー。対応方法は、以下の通りでcredentialsの情報をlocalで設定するように変更すればOK。

docs.expo.dev

まず、credentialsに必要な情報を以下のコマンドで取得する

# 以下のコマンドでiOSのファイル、プロビジョニングファイル、androidのkeystorePassword、keyAlias、keyPasswordを取得
$ expo credentials:manager


# 以下のコマンドでiOSの証明書のパスワード
$ expo fetch:ios:certs

# 以下のコマンドでandroidのkeystoreを取得
$ expo fetch:android:keystore

上記で取得した情報を元にcredentials.jsonを作成する

■ credentials.json

{
  "android": {
    "keystore": {
      "keystorePath": "android/keystores/release.keystore",
      "keystorePassword": "*******",
      "keyAlias": "*******",
      "keyPassword": "*******"
    }
  },
  "ios": {
    "provisioningProfilePath": "ios/certs/profile.mobileprovision",
    "distributionCertificate": {
      "path": "ios/certs/dist-cert.p12",
      "password": "*******"
    }
  }
}