FlutterのWebアプリをデプロイする方法まとめ！Firebase Hostingでの公開手順も解説
生徒
「FlutterでWebアプリを作ったんですが、インターネットに公開するにはどうすればいいですか？」
先生
「それならWebアプリをビルドしたあとに、Firebase Hostingなどのサービスを使ってデプロイする方法がありますよ。」
生徒
「Firebase Hostingって簡単に使えるんですか？初心者でも設定できますか？」
先生
「はい、Flutter Webの公開にぴったりなサービスです。Firebase Hostingの他にもいくつか方法があるので、まとめて解説していきますね。」
1. Flutter Webアプリのデプロイとは？
Flutterで作ったWebアプリをインターネット上に公開することを「デプロイ（deploy）」と呼びます。作成したアプリを誰でもアクセスできるようにするには、まずFlutterでWeb向けにビルドしたあと、ホスティングサービスにアップロードする必要があります。
Flutter Webのデプロイ方法としては、以下のような選択肢があります：
- Firebase Hosting（公式にも紹介されている定番）
- GitHub Pages
- Netlify
- Vercel
- 自前のWebサーバーやVPS
この記事では、特に初心者でも使いやすいFirebase Hostingを中心に、Flutter Webのデプロイ方法を解説していきます。
2. Flutter Webアプリのビルドを行う
まずFlutterで作成したWebアプリをbuild/webというフォルダにビルドします。これによって、ブラウザ上で動作するHTML・JavaScript形式のファイルが生成されます。
flutter build web
このコマンドを実行するだけで、Web公開に必要なファイルが一式準備されます。
3. Firebase Hostingでのデプロイ手順
Firebase Hostingを使えば、Flutter Webアプリを無料で簡単に公開できます。以下の手順で行います。
ステップ1：Firebase CLIのインストール
Node.jsがインストールされた環境で、以下のコマンドを実行します。
npm install -g firebase-tools
ステップ2：Firebaseプロジェクトへのログイン
firebase login
Googleアカウントでログインします。
ステップ3：Firebaseプロジェクトの初期化
firebase init
いくつかの選択肢が出てくるので、次のように選択します：
- Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action
- プロジェクトの選択：既存のFirebaseプロジェクトを選択（なければコンソールから作成）
publicディレクトリにbuild/webを指定- シングルページアプリケーションかどうか：Yes
ステップ4：Flutter Webアプリをデプロイ
firebase deploy
これで、Firebase Hosting上にFlutterのWebアプリが公開されます。デプロイ後に表示されるURLにアクセスすると、誰でもWebアプリを使うことができます。
4. GitHub PagesでFlutter Webアプリを公開する
Firebase以外の選択肢として、GitHub PagesでもFlutter Webアプリを公開可能です。
- GitHubリポジトリを作成
build/webの内容をそのリポジトリのgh-pagesブランチにpush- GitHubの設定でPages公開設定を行う
ビルド結果をgh-pagesブランチに配置するためのnpmツールやCI/CDを使うと、デプロイが自動化できます。
5. NetlifyやVercelを使ったFlutter Webの公開
NetlifyやVercelといったホスティングサービスもFlutter Webに対応しており、GitHubとの連携で自動デプロイが可能です。
主な手順は次の通りです：
- GitHubにFlutterアプリをPush
- NetlifyやVercelのアカウントを作成してGitHubと連携
- ビルドコマンドに
flutter build webを設定 - 公開ディレクトリに
build/webを指定
これだけでビルドから公開まで自動で行ってくれるため、継続的デプロイ（CI/CD）にも最適です。
6. デプロイ時の注意点・トラブル対策
Flutter Webアプリをデプロイする際、以下のような注意点があります。
- ルーティングがうまく動かない：Firebase Hostingでは
404.htmlを使うより、リライト設定が必要です。 - キャッシュ問題：更新内容が反映されないときは、ブラウザのキャッシュ削除やキャッシュバスティングが必要。
- 画像・アセットが表示されない：
pubspec.yamlにアセットの指定がされているか確認しましょう。
特にSPA（シングルページアプリケーション）としての挙動を意識したホスティング設定が重要です。
