🌏

React Native × ExpoでGoogle Mapsを組み込んだ際のEAS Buildについて

に公開
React Native
Expo
tech

はじめに

React Native & Expoで開発しているアプリにGoogle Mapsを表示したく、react-native-mapsというライブラリを使用しました。

Google Mapsのイメージ

Google Mapsを使用する場合にはAPI keyが必要となりますが、webとは異なったビルドプロセスと環境変数の管理に悩まされたので、ここにまとめておきます。

やりたかったこと

  • ただ単にGoogle Mapsを使いたい
  • 上記を実現するためにはAPI keyが必要なので環境変数にて管理したい
  • ExpoのEASビルドを行う場合、クラウドビルド or ローカルビルドの選択肢があるが、どちらの場合でも環境変数による注入ができるようにしたい

前提情報

  • expo: 54.0.9
  • react-native-maps: 1.20.1
  • 検証時は両OSともにシミュレータ上からの確認

ビルド

Expoでビルドを行う場合、Expoのクラウド環境でビルドを行うのが一番簡単ですが、無料枠としては月30回という制約があります。

また、ビルド可能回数とは別に、時間帯？によってはビルド待ちで数十分待つ必要があり、開発サイクルを早めるためにもローカルでもビルドできるように備えておきたいところです。

ビルド方法ごとのトレードオフは下記の通りです。

ビルド方法 メリット デメリット
クラウドビルド 環境構築なしで楽に使える／ExpoコンソールのProject → VariablesでSecretを登録するだけでビルド時に自動参照される 月30回の無料枠制限とビルド待ちがある／キー更新時に手動で登録し直す必要がある
ローカルビルド 手元で素早くビルドできる／クラウド制限に左右されない／端末に定義した環境変数やSecret以外のExpo設定を組み合わせて柔軟に運用できる 端末ごとに環境変数を整備する手間がある／Secretはローカルで適切に管理する運用が求められる／設定のばらつきが生じやすい

今回は下記のようなapp.config.tsに対して、環境変数で設定した内容を適用するようにします。

ここでは、IOS_GOOGLE_MAPS_API_KEYという名前とANDROID_GOOGLE_MAPS_API_KEYという名前でAPI keyを受け取るようにしています。

app.config.ts
import type { ConfigContext, ExpoConfig } from "expo/config";

export default ({ config }: ConfigContext): ExpoConfig => ({
  ...config,
  name: config?.name ?? "app name",
  slug: config?.slug ?? "my project",
  ios: {
    ...config.ios,
    config: {
      ...config.ios?.config,
      googleMapsApiKey: process.env.IOS_GOOGLE_MAPS_API_KEY
    },
  },
  android: {
    ...config.android,
    config: {
      ...config.android?.config,
      googleMaps: {
        apiKey: process.env.ANDROID_GOOGLE_MAPS_API_KEY
      },
    },
  },  
});

クラウドビルド

クラウドビルドは特に難しいことを考えず、ドキュメント通りに進めてビルドすることができます。

Expoのコンソール上のEnvironment variablesからSecretとしてAPI keyを登録します。

Project → Variables から環境変数を追加

  • ANDROID_GOOGLE_MAPS_API_KEY
  • IOS_GOOGLE_MAPS_API_KEY

環境変数の設定

あとは下記のようなコマンドで実行するだけで上記で設定した内容を参照してくれます。

eas build -p android --profile preview

ローカルビルド

問題のローカルビルドです。

何が問題かというと、EASビルドをローカルで行う場合は基本的に.envを読み込んでくれません。（また、読み込まれない状態が望ましいはず）

ローカルのEASビルドはクラウドのEASビルドをミュレートするように実行されますが、その際に.envのようなgitignoreされているファイルは参照することができません。

この問題に対しては、例えばexportによる環境変数の宣言を行い、eas buildコマンドを実行することで解決することができますが、毎回手動で実行するのは現実的ではないので何とかしたいところです。

スクリプトを用意する方法やdirenvを使う方法も考えましたが、やりたいことに対して無駄な複雑性を持ち込むことはしたくなかったため、結局下記のように.envを用意したうえでその内容をシェルに展開する方法を採りました。

.env
IOS_GOOGLE_MAPS_API_KEY=hogehoge
ANDROID_GOOGLE_MAPS_API_KEY=fugafuga

export $(cat .env | xargs) && eas build -p android --profile preview --local

補足

検証中に知り得たことを雑に書いておきます。

  • expo startによるExpo Goでの起動の場合は、API keyを設定しなくてもmapが表示される
  • API keyが正しく設定されていない状態でビルドされたアプリを起動すると、アプリがクラッシュする（アプリを開いてもホームに戻ってしまう）挙動となる
  • API keyが正しく設定されている場合でも、エミュレータ上の設定不足によりマップが描画されない場合がある
    • 私の場合は、Android Studio側でGoogle APIsのイメージを追加したところ表示することができました。
      android studioの設定

参考

GitHubで編集を提案

Discussion