先生と生徒の会話形式で理解しよう

生徒

「FlutterでWebアプリを作ったんですけど、これを公開したいときってどうすればいいんですか？」

先生

「それならFlutterのビルド機能を使えば、Web用のファイルを出力できますよ。作ったアプリをHTMLやJavaScriptに変換して、サーバーにアップロードするだけです。」

生徒

「なるほど！でも、ビルドの方法とか気をつけることがあれば知りたいです！」

先生

「それではFlutterでWebアプリをビルドする方法と、初心者が注意すべきポイントを一緒に見ていきましょう！」

1. Flutter Webアプリをビルドする基本ステップ

FlutterでWebアプリを開発した後は、それをユーザーに見せるために「ビルド（build）」作業が必要です。ビルドとは、Dartで書いたFlutterアプリをHTML・CSS・JavaScriptに変換し、Webブラウザで動作可能な形にするプロセスです。

ビルドした成果物は、build/webというフォルダに出力されます。この中のファイルをWebサーバーにアップロードすることで、インターネット上にFlutter Webアプリを公開できます。

2. Flutter Webビルドの基本コマンド

Flutter Webアプリをビルドするには、以下のコマンドを実行します。


flutter build web

このコマンドを実行すると、Flutterはwebフォルダの内容をもとに、Web向けの静的ファイル（index.html、main.dart.jsなど）を生成します。

ビルドが成功すると、次のようなディレクトリ構造ができます：


build/
  └─ web/
       ├─ index.html
       ├─ main.dart.js
       ├─ flutter.js
       └─ assets/

これらのファイルをそのままWebサーバーにアップロードすれば、誰でもアクセスできるWebアプリになります。

flutter build webコマンドは、デフォルトで--releaseモードでビルドされます。これは本番環境向けで、コードが最適化・圧縮され、ファイルサイズも軽量になります。

一方、開発中はflutter run -d chromeのように、debugモードでアプリを起動して動作確認を行います。ビルド時には明示的にモード指定も可能です：


flutter build web --release

公開時には必ずreleaseモードでビルドしましょう。debugモードのままでは、動作が遅くなったり、ファイルサイズが大きくなってしまいます。

ビルドが完了したら、次はFlutter Webアプリを公開する作業です。代表的なデプロイ先として以下が挙げられます：

たとえばFirebase Hostingにデプロイする場合、以下の手順で行います：


firebase init
firebase deploy

その際、ホスティング対象のディレクトリをbuild/webに設定するのを忘れないようにしましょう。

Flutter Webのビルドでは、初心者がつまずきやすい注意点がいくつかあります。以下にまとめておきます。

Flutter Webでは、描画方式にCanvasKitとHTMLレンダラの2種類があります。ビルド時に下記のように指定します：


flutter build web --web-renderer canvaskit
flutter build web --web-renderer html

CanvasKitは描画がきれいですがファイルサイズが大きく、HTMLレンダラは軽量ですが細かな描画に制限が出る場合もあります。用途に応じて使い分けましょう。

Flutter Webで作成したアプリは、基本的にはJavaScriptベースで動作するため、通常のHTMLと比べてSEOに不利な面があります。

Googleのクローラーはある程度のJavaScriptを解析できますが、動的に描画されるFlutter UIはインデックス化されにくい傾向があります。

どうしてもSEOが重要なWebサイトの場合は、FlutterよりもNext.jsやNuxt.jsのようなサーバーサイドレンダリングフレームワークの利用を検討してもよいでしょう。

Flutter Webでも画像やフォントなどのアセットを利用できますが、pubspec.yamlでの正しい記述が必要です。


flutter:
  assets:
    - assets/images/logo.png

アセットはImage.asset()などで呼び出し可能ですが、ビルド後のパスが変わる可能性があるため、特にCDN配信時などは注意が必要です。