BubbleのAPI Connectorで環境ごとにURLを分ける方法

はじめに

フロントエンドの開発を行う際、APIのURLを環境に応じて変更することがあります。
API Connectorでも、APIを二重に定義することなく、環境ごとにURLを分けることができます。

早速、設定していきます！

APIを定義する

以下の項目以外は、いつも通り設定してください。
すべての設定が完了したら、Initialize callします。

URL

環境ごとに変更したい部分を[foo]に置き換えて変数化します。
部分的でも、全体的でも、どちらでも問題ありません。

https://api.[environment].sample.com/v1

https://[domain]/v1

[url]

デフォルト値

変数化をすると、URLの入力欄の下に、Key:Valueの項目が表示されます。
ここに、デフォルト値を設定します。Initialize callするために設定は必須です。
開発環境の値を設定するのがおすすめです。

今回の場合

api.staging.sample.com

Privateチェックを外す

Key:Valueの右のチェックを外します。
これにチェックが入っていると、APIを呼び出す際、環境ごとに値を変更できません。

変数の値を列挙する

変数に入る値を、Option setsを使用して列挙していきます。
Bubbleのサイドメニュー > Data > Option sets に移動して定義してください。

ここに列挙しておくことで、APIを呼び出す際に毎回、値を入力する必要がなくなります。また、URLが変わっても変更が容易です。

APIを呼び出す

ActionまたはDataとして、APIを呼び出します。
このとき、環境ごとにURLが変更されるようにします。

1. Isn't live version を選択

2. formatted as text を選択

3. 環境ごとの値を設定

yesに開発環境の値を、noに本番環境の値を設定します。
Get an optionを選択して、先ほどOption setsで列挙した値を設定してください。

動作確認

設定が完了しました！
LIVE環境とプレビュー環境で動作確認してみてください！🎉

API Keyも環境ごとに分ける方法

ちなみに、API Keyの指定は、デフォルトで環境ごとに指定できるようになっています。