【ITニュース解説】Supabase config in your Expo project - the proper way

システムエンジニアを目指す方々にとって、ExpoとSupabaseはアプリ開発を効率化する強力なツールである。ExpoはJavaScriptでiOS/Androidアプリを開発でき、Supabaseはデータベースや認証機能を簡単に提供する。

しかし、これらのツールを組み合わせて使う際、ExpoのOTA (Over-The-Air) アップデート後に「SupabaseのURLが必要です」といったエラーが発生することがある。これは、SupabaseのキーやURLなどの環境変数が、アプリの更新時にランタイムバンドルに正しく含まれていないために起こる問題だ。

この問題の根本原因は、ExpoのOTAアップデートの仕組みにある。OTAアップデートは、主にJavaScriptコードやアセット（画像など）の更新に特化しており、アプリの核となるネイティブコードは更新されない。SupabaseのURLやAPIキーといった環境変数は、通常、アプリがビルドされる際にネイティブバイナリに「焼き込まれる」形で含まれる。初回ビルド時にこれらの情報が適切に焼き込まれていない場合や、OTAアップデートで更新されない部分に情報が依存していると、アプリはそれらをundefined（未定義）として認識し、エラーとなる。

この解決策は、Supabaseの設定情報をExpoのextra設定領域に移動させることである。これはapp.config.tsという設定ファイルを使って行う。なぜapp.jsonでは不十分なのかから説明する。

Expoプロジェクトでは、通常app.jsonファイルでアプリ設定を管理する。このファイルは、アプリ名やアイコンなどの静的な値を設定するのに適している。しかし、app.jsonはJSON (JavaScript Object Notation) 形式で記述されており、JSONはJavaScriptのコードやprocess.envのような動的な値を直接解釈できない。

具体的に、app.json内でprocess.env.SUPABASE_URLのように環境変数を使おうとすると、SyntaxErrorが発生する。これはJSONがprocess.envというJavaScriptの構文を不正な文字として認識するためだ。JSONはデータ記述形式であり、プログラムコードを実行する機能を持たない。

そのため、最初のステップとしてapp.jsonの代わりにapp.config.tsを使用する。まず、mv app.json app.config.tsコマンドでファイルをリネームする。.ts拡張子により、このファイルはJavaScript（またはTypeScript）のコードとして実行されるようになる。

app.config.tsファイルの中身は、次のように記述する。まずimport 'dotenv/config';を追加し、プロジェクトのルートにある.envファイル（環境変数を定義するファイル）から変数を読み込めるようにする。そして、export defaultでアプリの設定オブジェクトをエクスポートする。この設定オブジェクトの中にexpoキー、さらにextraキーを追加し、そのextraの中にsupabaseUrl: process.env.SUPABASE_URLのようにprocess.envを使って環境変数を記述する。app.config.tsはJavaScriptとして解釈されるため、process.envの値を正しく読み込むことができる。これにより、Expoはビルド時に.envファイルに定義された値を読み込み、アプリのネイティブバイナリに適切に焼き込む。

次に、アプリのコード内でこれらの設定値を安全に利用できるようにする。プロジェクト内にenv.tsというファイルを作成（または更新）する。このファイルでは、expo-constantsライブラリからConstantsオブジェクトをインポートする。Constants.expoConfig?.extraを介して、app.config.tsで定義したextraオブジェクトにアクセスできる。もしextraが存在しない場合は空のオブジェクトを返すように設定することで、エラーを回避する。このextraオブジェクトからSupabaseのURLやキーなどの値を取り出し、CONFIGという名前のオブジェクトとしてエクスポートする。

このようにenv.tsを設定することで、アプリの他の部分、例えばSupabaseクライアントを初期化するファイルなどから、import { CONFIG } from './env';としてCONFIGオブジェクトをインポートし、createClient(CONFIG.supabaseUrl, CONFIG.supabaseAnonKey);のようにいつでも確実に定義された値を使ってSupabaseクライアントを生成できるようになる。これにより、Supabaseの利用に必要な情報が、アプリのどこからでも安定してアクセスできる。

開発環境で.envファイルに機密情報を記述するのは一般的だが、このファイルを直接バージョン管理システム（GitHubなど）にコミットすることはセキュリティ上のリスクとなる。公開リポジトリへの機密情報漏洩を防ぐため、本番環境のビルドでは「EAS secrets」というExpoのクラウドビルド環境が提供するシークレット管理機能を使用する。

EAS secretsを使うには、コマンドラインでeas secret:create --name SUPABASE_URL --value https://xxxx.supabase.coのようにコマンドを実行し、必要なシークレットを登録する。SupabaseのURLや匿名キー、その他のAPIキーなどを個別に登録していく。EAS (Expo Application Services) を使ってアプリをビルドまたは提出する際、Expoのクラウドビルド環境はこれらのEAS secretsにアクセスし、それらの値をprocess.envに注入する。これにより、app.config.tsがこれらのシークレットを正しく読み込み、アプリに安全に組み込むことができる。開発環境と本番環境で異なる環境変数を使い分けつつ、機密情報を安全に管理できるメリットがある。

最後に、この解決策の重要なポイントは、「一度はフルネイティブビルドが必要である」という点だ。OTAアップデートは新しい環境変数を追加したり、ネイティブコードに新しい情報を焼き込んだりすることはできない。SupabaseのキーやURLといった情報が正しくアプリに組み込まれるためには、app.config.tsでの設定変更後、少なくとも一度はEAS (Expo Application Services) を使ってアプリ全体のフルビルドを実行し、新しいネイティブバイナリを作成する必要がある。この最初のフルビルドでSupabaseのキーがネイティブバイナリにしっかり焼き込まれれば、その後はeas updateコマンドを使ったOTAアップデートでJavaScriptやアセットの変更を安全にプッシュできるようになる。つまり、一度ビルドしてしまえば、以降はSupabase関連で問題を起こすことなく、手軽にアプリを更新できる。

まとめると、ExpoアプリでSupabaseやその他のAPIキーを使用する際は、process.envをapp.jsonに直接書くのは避け、設定はapp.config.tsのextraプロパティに移動させるべきである。アプリのコード内ではexpo-constantsを使ってこれらの設定値を安全に読み込み、重要なキーやシークレットはEAS secretsに保存することで、セキュリティと管理のしやすさを両立させる。この変更が、OTAアップデート時のデバッグ作業を大幅に削減する。