Web版をビルドして公開する

この章で学ぶこと

• Flutter Webのrelease成果物を作る
• Firebase Hostingの接続先と公開先を確認する
• プレビューURLから本番へ段階的に公開する

1. releaseビルドを作る

プロジェクトのルートで実行します。

flutter clean
flutter pub get
flutter build web --release --dart-define=APP_ENV=prod

成果物はbuild/webに作られます。ソースコードのlibフォルダをアップロードするのではありません。Flutter公式のWeb公開ガイド

ビルド時の設定は成果物へ組み込まれます。公開後にサーバーの環境変数だけを変えても、既に生成されたFlutter Webの接続先は変わりません。

ローカルのHTTPサーバーで成果物を確認します。file://でindex.htmlを直接開く方法では、Webアプリの動作を正しく確認できないことがあります。

firebase emulators:start --only hosting --project idea-pocket-prod

表示されたURLで、ログイン、保存、再読込、直接URL、スマートフォン幅を確認します。

2. Hostingを初期設定する

初回だけ、対象Project IDを指定して設定します。

firebase login:list
firebase projects:list
firebase init hosting --project idea-pocket-prod

主な回答は次のとおりです。CLIの版で表示は変わることがあります。

質問	回答例
public directory	build/web
single-page app	Yes
GitHubの自動デプロイ	最初はNo
既存index.htmlの上書き	No

firebase.jsonでpublicとSPAのrewriteを確認します。

{
  "hosting": {
    "public": "build/web",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [{ "source": "**", "destination": "/index.html" }]
  }
}

FirestoreやFunctionsなど既存設定がある場合、ファイル全体をこの例で上書きせず、hosting部分を統合します。

3. プレビューへ公開する

本番URLを置き換える前に、期限付きの確認URLを作ります。

firebase hosting:channel:deploy release-check \
  --expires 1d \
  --project idea-pocket-prod

PowerShellでは1行にしてもかまいません。プレビューURLでも、ビルドに含まれたFirebase本番環境へ接続します。確認用URLだからデータも自動で分離されるわけではありません。

4. 本番へデプロイする

確認者がビルド番号とプレビューURLを承認したら公開します。

firebase deploy --only hosting --project idea-pocket-prod

完了後、表示されたHosting URLで再度スモークテストを行います。

• トップページと直接URLを開く。
• 新規ログインと既存ログインを試す。
• データを1件作成し、再読込後も残ることを確認する。
• ブラウザーのConsoleとNetworkに失敗がないか見る。
• プライバシーポリシーと問い合わせ先を開く。

5. 更新と切り戻しを記録する

コードを直しただけでは公開物は変わりません。毎回、テスト、ビルド、プレビュー、本番デプロイを行います。

flutter test
flutter build web --release --dart-define=APP_ENV=prod
firebase hosting:channel:deploy release-check --expires 1d --project idea-pocket-prod
firebase deploy --only hosting --project idea-pocket-prod

Firebase Consoleのリリース履歴から以前のHostingリリースへ戻せます。ただし、FirestoreのデータやSecurity Rules、FunctionsはHostingの切り戻し対象ではありません。データ形式を変えるリリースは、旧版との互換性も設計します。

うまくいかないとき

症状	確認すること
Firebaseの初期ページ	hosting.publicと再ビルド
白い画面	Console、base URL、Firebase初期化
ローカルだけ動く	承認済みドメイン、CORS、App Check、Rules
別環境のデータが見える	APP_ENVと生成したoptions、Project ID
変更が反映されない	build/webの時刻、公開URL、キャッシュ
権限エラー	CLIのGoogleアカウントとIAMロール

やってみよう

プレビューURLで別の人に公開判定表を確認してもらい、承認したコミットIDと本番デプロイ日時をリリース記録へ残してください。