FlutterFlowでの開発環境、本番環境の設定方法

FlutterFlowでの開発を始める際、適切な開発環境を整えることはプロジェクトをスムーズに進行させるために非常に重要です。この記事では、FlutterFlowの開発環境の設定手順を簡潔に説明します。

これにより、初めてFlutterFlowに触れる方でも迷わずに設定を行えるようになります。また、開発環境の各種設定を行うことで、チームの効率を向上させたり、テストを容易に行ったりすることが可能です。

株式会社Spovisorではノーコード・ローコードツールを使ったシステム開発、アプリ開発を実施しています。
要件定義から伴走して支援し、安価・スピーディー・柔軟な開発を行います。無料でご相談もお受けしております。

開発環境とは？
環境設定の手順
まとめ

開発環境とは？

FlutterFlowの開発環境では、異なるバージョンのアプリケーションをテストしたり、チームメンバーと効率よく連携したりすることができます。特に、本番環境とテスト環境を分けることで、ユーザーに影響を与えずに新機能のテストが可能です。また、開発環境を利用することで、バグ修正や新機能のリリースに伴うリスクを低減することができます。

以下のようなイメージです。

開発環境をうまく設定することで、以下のようなメリットがあります。

リスク低減: 本番環境に影響を与えない形で機能のテストが可能になります。
効率的なバグ修正: 問題を素早く特定し、修正を行うための独立した環境を提供します。
チームの効率化: 開発チーム内での役割分担やテストの進行がスムーズになります。

以下では、FlutterFlowでの開発環境の設定方法を順を追って解説します。

環境設定の手順

1. 開発環境の追加

FlutterFlowのプロジェクトにログインし、左側のメニューから “Settings & Integrations” を選択します。
次に、“App Settings” を開き、“Dev Environments” タブに移動します。
“Add New Environment” ボタンをクリックし、新しい開発環境を追加します。
- Environment Name: 開発環境の名前を入力します（例: “Development” や “Staging” など）。

新しい環境を追加することで、異なる目的に応じたバージョン管理が可能になります。

例えば、開発環境では新機能を自由に追加してテストを行い、ステージング環境では本番リリース直前の確認を行うなどの使い分けができます。

2. 環境ごとの設定

各環境には異なる設定を行うことができます。例えば、異なるAPIキーやデータベースのエンドポイントを指定することで、環境ごとに異なるバックエンドと連携が可能です。これにより、開発中に本番データを誤って変更するリスクを回避することができます。

API キー: 各環境に特定のAPIキーを設定し、本番環境とテスト環境を分離します。
- 本番APIキーと開発APIキーを分けることで、データの整合性とセキュリティを確保します。
データベース設定: 各環境で異なるデータベースを使用することで、開発中のデータが本番に影響しないようにします。
- 例えば、開発用データベースでは、テスト用のサンプルデータを使って検証を行うことが可能です。
その他の設定: 各種エンドポイントや外部サービスとの連携も環境ごとに設定することができ、設定ミスによる問題発生を未然に防ぎます。

具体的にはDev Environmenets配下のEnvironment Valuesの”+ Add Value“をクリックして環境ごとの値を設定します。

以下はAPI keyとSupabaseのEdge Function (FirebaseでいうCloud Function)のエンドポイントのURLを設定したケースをイメージしています。