Flutter Web で作ったアプリを、Firebase Hosting で公開するまでの手順をまとめます。
私自身、元々アプリ開発の経験はゼロ。介護士として20年働きながら、AIと一緒にアプリ開発を始めた身です。最初は「Firebase？ホスティング？」状態でしたが、何度か失敗しながらなんとか公開までたどり着きました。
この記事は 自分用の備忘録 でもあり、同じように初めてデプロイする人 の参考になればと思って書いています。
1. 環境準備
必要なツールのインストール
まず、Firebase CLI と FlutterFire CLI をインストールします。
bash
# Firebase CLI
npm install -g firebase-tools
# FlutterFire CLI
dart pub global activate flutterfire_cli私がつまずいた点：最初、npm コマンドが使えず「え、Node.js入ってないの？」となりました。Node.js が未インストールの場合は、公式サイトからインストールしてください。
Firebase にログイン
bash
firebase loginブラウザが開いて Google アカウントでログインを求められます。ここは素直に進めば OK。
2. Firebase プロジェクト作成
- Firebase コンソールで新しいプロジェクトを作成
- プロジェクト ID をメモ（例:
my-flutter-web-app）
既存の設定ファイルがある場合の注意
以前に Firebase を使っていた場合、古い firebase.json や .firebaserc が残っていると、意図しないプロジェクトに接続されてしまう ことがあります。不安な場合は一度削除しておくとスッキリします。
bash
del firebase.json .firebaserc lib\firebase_options.dart(Mac/Linux の場合は rm コマンドを使用)
3. Flutter プロジェクトと Firebase の接続
Flutter プロジェクトのルートディレクトリで以下を実行。
bash
flutterfire configure- 先ほど作った Firebase プロジェクトを選択
- プラットフォームに web をチェック（将来的に Android/iOS も使うなら一緒に選択してもOK）
- 実行すると
lib/firebase_options.dartが自動生成される
このファイルが生成されていれば成功です。中身を見ると、Firebase の設定情報が記述されています。
4. Firebase Hosting の初期化
bash
firebase init対話形式で以下を選択：
- Firestore → Yes（データベースを使う予定がなくても、rules/indexes のファイル名はデフォルトで OK）
- Hosting → Yes
- Public directory →
build/web（重要！） - SPA（Single Page Application）として設定するか？ → Yes
生成されるファイル：
firebase.json（Hosting の設定）.firebaserc（プロジェクト紐付け情報）firestore.rules（Firestore のセキュリティルール）firestore.indexes.json（複合インデックス設定）
ここでのミス体験：最初、Public directory を build にしてしまい、デプロイ後に真っ白な画面が表示されました。正しくは build/web です。
5. Flutter Web のビルド
bash
flutter build web- ビルド成果物は
build/webに出力されます - この
build/webが Firebase Hosting にアップロードされるディレクトリになります
初回ビルドは少し時間がかかります。コーヒーでも飲みながら待ちましょう。
6. Firebase Hosting へデプロイ
bash
firebase deploy
```
成功すると、以下のような Hosting URL が表示されます 🎉
```
https://my-flutter-web-app.web.appこのURLにアクセスすれば、あなたの Flutter Web アプリが世界中から見られる状態になっています。
初めてデプロイできたときの感動
正直、最初は「本当に公開されてるの？」と半信半疑でしたが、スマホで URL を開いたら自分のアプリが表示されて、ちょっと感動しました。
7. Firestore・Storage 設定（必要に応じて）
Firestore のルール設定
firestore.rules を編集して、データベースのアクセス権限を設定します。
bash
firebase deploy --only firestore複合インデックスの設定
firestore.indexes.json を編集して、必要なインデックスを追加。
bash
firebase deploy --only firestoreStorage を使う場合
同様に storage.rules ファイルを設定して、firebase deploy --only storage でデプロイします。
8. まとめ（最短手順）
おさらいとして、最短手順をまとめます。
bash
# 1. 必要なツールをインストール
npm install -g firebase-tools
dart pub global activate flutterfire_cli
# 2. Firebase にログイン
firebase login
# 3. Flutter プロジェクトと Firebase を接続
flutterfire configure # プロジェクト選択、web + android など
# 4. Hosting 初期化
firebase init hosting # public=build/web, SPA=Yes
# 5. Web アプリをビルド
flutter build web
# 6. デプロイ
firebase deployこれで Flutter Web アプリが Firebase Hosting に公開されます 🎉
💡 つまずいたポイント（正直に書きます）
① Node.js が入っていなかった
npm コマンドが使えず、最初の一歩で止まりました。Node.js をインストールすれば解決。
② Public directory を間違えた
build にしてしまい、デプロイ後に真っ白な画面。正解は build/web。
③ 古い firebase.json が残っていた
過去の実験プロジェクトの設定が残っていて、意図しないプロジェクトに接続されてしまいました。初期化前に古いファイルを削除 するのが安全です。
④ ビルドを忘れてデプロイした
「なんで更新されないんだ？」と悩んでいたら、flutter build web を忘れていました。デプロイ前には必ずビルド。
おわりに
プログラミング初心者だった私でも、なんとか Flutter Web アプリを公開できました。
失敗も含めて、全部正直に書く のが私のスタンスです。この記事が、同じように初めてデプロイする方の参考になれば嬉しいです。
📌 この記事を書いた人
IT×ライフケア／きまいら（ペンネーム）
Flutter/Dart で AI と共同開発中。失敗も成功も、全部正直に書いています。
コメント