はじめに
フロントエンドの開発を行う際、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の指定は、デフォルトで環境ごとに指定できるようになっています。
Discussion