🔧
【Flutter】flutter_dotenv：Flutter Webのデプロイ時に'.env'が読み込まれない
前提条件
・FirebaseHostingを用いてデプロイ
記事で使用するフォルダ構成
project(root)
├─ .github
│ └─ workflows
│ └─ actions.yaml
├─ lib
│ └─ main.dart
├─ .env
├─ firebase.json
└─ pubspec.yaml
解決方法
【案①】
環境変数の設定ファイルを”.env”から"env"にする。
main.dart
Future<void> main() async {
// .envファイルの読み込み
+ await dotenv.load(fileName: "env");
- await dotenv.load(fileName: ".env");
runApp(const MyApp());
}
actions.yaml
# .envファイルの作成
- name: create .env
run: |
+ touch env
+ echo TEST_KEY=${{secrets.TEST_KEY}} >> env
- touch .env
- echo TEST_KEY=${{secrets.TEST_KEY}} >> .env
pubspec.yaml
flutter:
assets:
+ - env
- - .env
【案②】
firebase.jsonのignore設定を修正する。
firebase.json
"hosting": {
"public": "public", // the only required attribute for Hosting
"ignore": [
"firebase.json",
- "**/.*",
+ "**/.* !**/.env",
"**/node_modules/**"
]
}
詳細
flutter_dotenvのReadmeには".env"がデフォルトだと記載がある。[1]
ローカル環境だとReadmeに記載通り、ルートディレクトリに".env"を作成すれば正常に動作する。
main.dart
Future<void> main() async {
// .envファイルの読み込み
await dotenv.load(fileName: ".env");
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(
title: const Text("flutter_dotenv sample app"),
),
body: Center(
// .envに設定した環境変数の呼び出し
child: Text("【TEST_KEY】：${dotenv.env['TEST_KEY']}"),
),
),
);
}
}
.env
TEST_KEY = "test_key_hoge"
pubspec.yaml
flutter:
assets:
- .env
".env"はgithub上で管理はしないので、デプロイ時には以下の設定が必要。
- github上で環境変数の設定[2]
- actionsに".env"作成に関する処理の記載
actions.yaml
# .envファイルの作成
- name: create .env
run: |
touch .env
echo TEST_KEY=${{secrets.TEST_KEY}} >> .env
上記で問題なくデプロイできると思ったが、デプロイしたWebを開いてDevToolsのConsoleで確認すると、以下のように怒られる。
設定した".env"が上手く読み込まれていないらしい。。。
「Error while trying to load an asset: Failed to load asset at "assets/.env" (404)」
どうやら、Firebase Hostingのデフォルトでは"."から始まるファイルはignore設定なので、読み込まれない。[3] [4]
Firebaseドキュメント
"ignore": [
"firebase.json", // the Firebase configuration file (the file described on this page)
"**/.*", // files with a leading period should be hidden from the system
"**/node_modules/**" // contains dependencies used to create your site but not run it
]
結果、上記の結論に記載したように、①" . "を外すか、②firebase.jsonにて.envだけを有効にするか、でデプロイしても問題なく環境変数が読み込まれるようになる。
Discussion