はじめに
こんにちは、もんすんです。
今回は、やっと使えるようになったFirebase Data Connectを使ってみました。
Firebase Data Connectは、Firebaseが提供する初のリレーショナルデータベースソリューションです。
モバイルやWebアプリ向けに、Cloud SQL for PostgreSQLを基盤としたフルマネージドなデータベースを提供します。GraphQLを利用してデータスキーマやクエリ・ミューテーションを管理してくれます。また、Firebase Authenticationと統合することで、安全なアプリケーションを構築してくれます。また、複数プラットフォーム(Kotlin Android、iOS、Flutter、Web)向けの型安全なSDKも生成され、クライアントコードの簡易化を実現してくれます。
ワックワクしますね！
さて、早速触っていきます。
2024年11月現在、Firebase Data Connect は公開プレビュー版です。
「Firebase Data Connectを使ってみる」
以下のページを基にFirebase Data Connectを触っていきます。
1. Firebase プロジェクトに接続する
まず、通常通り、Firebaseプロジェクトをコンソールから作成していきます。
Data Connect特有の作業ではない部分の詳細は割愛します。
プロジェクト名はnuxt3-fb-trialとしました。
Data Connectの設定
こちらが、Data Connectの設定前の画面です。
「始める」を押して設定していきます。
DBは、ローカルかCloud SQLから選択できます。
ローカルは無料で使えますが、今回はCloud SQLを使用することにしました。
こちらを利用する場合は、有料設定に切り替える必要があるので、クレジットカードの準備をしておきましょう。
あとは、ぽちぽちと画面の指示に従って、進めていくと、
こんな感じで設定が完了しました。
Firebaseは初めての機能であっても、比較的設定の操作が容易に感じます。
ありがたい...
2. 開発環境を選択して設定する
今回はNuxt.jsの環境を整備しました。
基本的にVSCodeであれば、対応言語のいずれでも同じような設定になるかと思います。
プロジェクト作成の詳細は割愛します。
VSCode拡張機能追加
こちらが必須の拡張機能なので、「Install」からインストールしていきます。
もちろんVSCode上から追加することも可能です。
3. ローカル プロジェクトを設定する
手順と同様に以下のコマンド実行。
これで環境(もしくはローカルPC)にFirebase CLIがインストールされます。
既にインストールされていた場合は、最新バージョンを利用することが推奨されています。
npm install -g firebase-tools
4. プロジェクト ディレクトリを設定する
このステップでは、そのまま操作しても、うまくいかなかったので、以下のような手順で進めました。
firebaseログイン
以下のコマンドを実行して、firebaseにログインしました。
firebase login
拡張機能からGoogleログイン
VSCodeの左側のFirebase Data Connect拡張機能のボタンをクリックし、「Sign in with Google」を押します。
その後、VSCodeを再起動すると、接続が完了しました。
その後、さらに「Connect a Firebase project」を選択し、「1. Firebase プロジェクトに接続する」で作成したFirebaseプロジェクトを選択しました。
さらに「Run firebase init」をクリックし、ターミナルの指示に従い、設定していきました。
設定は完了し、dataconnect.yamlファイルが生成されていましたが、拡張機能のところの「No dataconnect.yaml detected in this project」と表示されたままだったので、VSCodeを再起動したところ、以下のように正しく、接続できました。
Start emulators
公式ドキュメントには、[Start emulators] ボタンをクリックします。 とありますが、基本的にこのままではエラーになってしまいます。
エミュレータを起動するにはJavaの環境が必要とのことでした。
Javaのバージョンは11以上必要とのこと
私は、DevContainerを利用していたので、以下のコマンドを実行してJavaをインストールしておきました。
sudo mkdir /opt/java
cd /opt/java/
wget https://download.oracle.com/java/21/latest/jdk-21_linux-x64_bin.tar.gz
tar zxvf jdk-21_linux-x64_bin.tar.gz
export JAVA_HOME=/opt/java/jdk-21.0.5
export PATH=$JAVA_HOME/bin:$PATH
export CLASSPATH=.:$JAVA_HOME/jre/lib:$JAVA_HOME/lib
さて、Javaをインストールし終えたら、[Start emulators] ボタンをクリックします。
このように様々なFirebaseのサービスのエミュレータを起動することができました。
5. スキーマの作成
さて、やっとここからFirebase Data Connectが触れる状態になりました。
長い道のりでした。
今回は、お試しなので、公式ドキュメントにあるようにMovieテーブルとMovieMetadataテーブルを作成していきます。
指示に従って、プロジェクトの/dataconnect/schema/schema.gqlのMovieテーブルとMovieMetadataテーブルのクエリのコメントアウトを除去しました。
6. スキーマを本番環境にデプロイする
拡張機能から「Deploy to production」を押します。
Cloud SQL for PostgreSQL インスタンスのプロビジョニングには、最大 15 分かかることがあるらしいです。インスタンスの準備が整うまでデプロイすることはできません。
私もそれに気づかず、デプロイに失敗し、焦りました。
デプロイが完了すると、Firebaseのコンソールでも生成したテーブルが確認できます。
7. テーブルにデータを追加する
/dataconnect/schema/schema.gqlのMovieテーブルの上に表示されているAdd dataからデータをインサートします。
これをクリックすると、Movie_insert.gqlファイルが生成されます。
mutationの上の「Run (Production)」をクリックすると、Firebase Data Connectにデータが追加されます。
コンソールにも表示されました。
8. クエリを定義する
公式ドキュメントに従って、クエリの定義をしました。
/dataconnect/connector/queries.gql ファイルを以下のように編集しました。
こちらも「Run (Production)」をクリックすると、クエリが実行されます。
実行結果はVSCodeの下の方に正しくデータが取得されました。
9. SDK を生成し、アプリで使用する
拡張機能の「Add SDK to app」ボタンをクリックし、SDKを生成します。
SDKは、Web、Android、iOS、Flutterから選択できます。
今回は、Nuxt.js用でしたので、Web(JavaScript)を選択しました。
実行後、/dataconnect/connector/dataconnect-generated/js/default-connectorにSDKが生成されました。
10. スキーマとクエリを本番環境にデプロイする
これは、「6. スキーマを本番環境にデプロイする」とやることは同じなので、割愛します。
終わりに
今回は、Firebase初のリレーショナルデータベースソリューションである「Firebase Data Connect」を実際に触りながら、その設定手順からクエリ実行までの流れを体験しました。
触ってみて、Firebaseの特徴である「簡単に始められる」部分と、最新のデータベース技術の融合が印象的でした。
一方で、GraphQLの記法をもう少し理解する必要があるように感じました。
また、初期設定やエミュレータの動作環境整備など、事前準備に時間がかかる部分もありました。
ただ、そこを乗り越えればスムーズに操作できると感じました。
まだ公開プレビュー版ということで今後のアップデートが期待されますが、現段階でも試す価値は十分にあります。これからも引き続き利用しながら、その可能性を探っていきたいと思います。