Gatsby.jsでFirebase Remote Configを簡単に利用するには

# はじめに
アプリで有効にする機能や設定などを外部サービスで作成・設定しておいて、その情報を動的に取得してアプリの動作を切り替えるフィーチャーフラグという手法があります。そのような外部サービスには、OptimizelyやLaunchDarklyなどありますが（主要サービスの比較は以下の記事を参照）、ここでは簡単かつ無料で使えるFirebase Remote Configを使って、Gatsbyサイトの構成情報を取得する設定方法を紹介します。

https://codezine.jp/article/detail/14662

ここで紹介する方法は、Remote Configの設定情報をGraphQLで取得できるようにするものであり、設定情報の取得はビルド時に行われてGatsbyサイト内に静的に埋め込まれることになります。サイトの動作時に設定情報を取得して機能・構成を動的に切り替えるわけではないので利用シーンは限られるかもしれません。動的に取得してサイト構成を切り替えるにはServer-side Renderingを利用することになりますが、こちらは別の機会に紹介します。

# 前提
- Firebase (Spark(無料)プラン)
- Gatsby v4.6.2
- @mstoduto/gatsby-source-remote-config v1.0.2

# Firebase Remote Configの設定
Firebaseのアカウントは作成済みとします。

## Firebaseプロジェクトの作成
Firebaseコンソールにログインして、まずFirebaseプロジェクトを作成します。

1. **プロジェクトを追加**ボタンを押す
![スクリーンショット 2022-02-07 9.48.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520595/8943b509-00d5-a41c-50e4-8eca28fec039.png)

2. プロジェクトの名前を入力する (手順1/3)
ここでは```sample```とします。

3. Googleアナリティクスの設定はデフォルト(オン)のまま (手順2/3)

4. Googleアナリティクスの構成では```Default Account for Firebase```を選択する (手順3/3)

以上で```sample```プロジェクトが作成され、そのプロジェクトが開かれた状態となります。

## Firebaseアクセストークンの取得
**プロジェクトの概要**の右側にあるギアアイコンをクリックして、**プロジェクトの設定**を選択すると（下図）、**プロジェクトの設定**画面になります。
![スクリーンショット 2022-02-07 9.55.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520595/1f1b516a-993c-9080-2866-1b971aca6b62.png)

設定画面にて**サービスアカウント**タブを選択して開きます（下図）。
![スクリーンショット 2022-02-07 9.59.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520595/cd01efe8-dc1c-b21c-4775-253d3ef81be8.png)

Firebase Admin SDKの情報が表示されるので、一番下にある青い**新しい秘密鍵の生成**ボタンを押します。すると、Firebaseサービスに接続するためのアクセストークンがJSONファイルとしてダウンロードされますので、このファイルを```firebase.json```として保存しておきます。

## Firebase Remote Configでフラグを追加
Firebaseコンソール画面の左端にあるサービスメニューから、エンゲージメントの中にあるRemote Configを選択します（下図）。
![スクリーンショット 2022-02-07 10.06.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520595/c26faace-8550-6385-21fd-858870175edc.png)

次に表示されるRemote Configの画面から**構成を作成**ボタンを押すと、フラグ情報の設定ダイアログが現れるので、必要なフラグ情報を作成・追加します（下図）。別のフラグを追加するには、一旦、**保存**ボタンでこのダイアログを閉じ、Remote Config画面の中程にある**パラメータを追加**ボタンで新しいフラグの情報を入力します。
![スクリーンショット 2022-02-07 10.09.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520595/795a8d0c-f541-4727-ed65-5ec240fe84f4.png)

こうして作成したフラグはまだ外部から取得できるようになっていませんので、最後に、Remote Config画面上部にある**変更を公開**ボタンを押して外から見えるようにします。

ここでは、```flag1```というブール値フラグ（値はtrue）と、```flag2```という文字列値フラグ（値は```sample```）の２つを作成しました（下図）。
![スクリーンショット 2022-02-07 10.17.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520595/13acaa79-f23c-ef46-db54-978cc717cf7b.png)


# Gatsbyサイトの初期構築
VSCodeのDev Containerを使ってGatsbyのスターターサイトを立ち上げるまでの作業は以下の別記事を参照ください。以下では```gatsby develop```でスターターサイトがブラウザ表示できているものとします。

https://qiita.com/rhetoris/items/86c6311babb97a4e94ae

# プラグインの導入・設定
GatsbyでFirebase Remote Configを利用するプラグインは以下のgatsby-source-remote-configです。

https://www.gatsbyjs.com/plugins/@mstoduto/gatsby-source-remote-config/

Node.jsコンテナに接続されているVSCodeのコンソールから、以下のようにプラグインをインストールします。

```
node ➜ /workspaces/site/site (master ✗) $ npm install @mstoduto/gatsby-source-remote-config
```

先ほど保存しておいた```firebase.json```ファイルをGatsbyサイトが作成されているフォルダ内に置きます。このアクセス情報ファイルは、gitリポジトリに格納されないように、```.gitignore```ファイルに追加しておくようにしてください。

VSCodeで```gatsby-config.js```を開き、以下の設定を追加します（34〜41行目）。
![スクリーンショット 2022-02-07 10.32.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520595/64483d72-a20f-5764-c043-b047ec7d5052.png)

# GraphQLでのフラグ情報の確認
Firebase Remote Configで追加したフラグ情報をGraphQLで取得できるようになっているかを確認します。

```gatsby develop```で開発サーバを動かしてから、```localhost:8000/___graphql```をブラウザで開いてください。以下のように、**allRemoteConfigParam**, **remoteConfigParam**という情報ソースが追加されており、適切なクエリを実行することでFirebase Remote Configで作成した二つのフラグを取得できていることが分かります。
![スクリーンショット 2022-02-07 10.40.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2520595/2f7d1543-a0bb-394a-4dc1-0f847c391049.png)

あとは、適切なクエリをJSプログラムにて記述して、フラグ情報を活用してください。

以上
2022/2/7 初版