• 2026/5/9
• 4分

【Flutter/Dart】Webアプリのデプロイ方法！サーバー/MAMP向けとビルドモードと描画エンジンの違いも解説！

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

• Android Studio Panda 1 | 2025.3.1 Patch1
• Flutter：3.38.3
• Dart：3.10.1
• macOS(M1)：Tahoe 26.2

FlutterではiOS/Androidのモバイルアプリだけでなく、Flutter Webを使用することで、Webブラウザ上で動作するアプリを簡単に作成できます。今回はFlutter WebでWebアプリをデプロイする方法について紹介します。

Flutter WebでWebアプリをデプロイする方法

Flutter WebでWebアプリをデプロイするためには意外と簡単で以下のステップを踏むだけです。肝になるのは「2.デプロイ用のファイルを生成」の箇所のみです。

1. Flutter Webアプリの作成
2. デプロイ用のファイルを生成
3. サーバーにファイルをアップロード

2.デプロイ用のファイルを生成

デプロイ用のファイルを生成するためには、以下のコマンドを実行します。ただ実はビルドモードや描画方法(レンダラー)を指定することも可能になっており、それらによりパフォーマンスに差がありますのでその辺りは後述します。

$ flutter build web 

生成されたファイルはbuild/webディレクトリに保存されます。中身はざっくり以下のような構造になっています。

├── build/web
│   ├── index.html・・・アプリの入り口。ブラウザが最初に読み込む司令塔
│   ├── main.dart.js・・・DartコードをJSに変換したアプリ本体
│   ├── flutter.js・・・Flutterエンジンの初期化とJS読み込みを制御するスクリプト
│   │
│   ├── assets/・・・画像・フォントなどの静的ファイル
│   ├── canvaskit/・・・高度な描画エンジン
│   ├── icons/・・・アプリアイコン
│   ・
│   ・

3.サーバーにデプロイする

サーバーにアップロードするのはbuild/webディレクトリ内のすべてのファイルです。FTPやSSHなどの方法を使用してアップロードするだけでWebアプリが動作するようになります。以下の記事ではXServerに対してSSHで接続する手順を紹介しているので参考にしてください。

2つのビルドモード

Flutter Webでは「default」と「WebAssembly」の2つのビルドモードが用意されています。ここでいうビルドとはDartで開発したコードをどの形式に変換するかという意味になります、

default

「default」モードはDartコードをJavaScriptに変換してビルドします。従来の方法のため互換性が高くほとんどのブラウザで正しく動作します。デフォルトでは「default」モードになっているので以下のコマンドまたは--no-wasmを明示的に付与したコマンドを実行するとこのモードでビルドできます。

$ flutter build web
$ flutter build web --no-wasm

WebAssembly

「WebAssembly」モードはDartコードをWebAssembly(バイナリコード)に変換してビルドします。JSを介さないため計算処理やメモリ管理処理が高速でパフォーマンスが高いのが特徴です。ですが古いブラウザではサポートされていない可能性とバイナリコード(0と1)に変換されるためファイルサイズが肥大化しやすいのと難読化することがデメリットといえます。--wasmを付与した以下のコマンドで実行するとこのモードでビルドできます。

$ flutter build web --wasm

描画エンジン(レンダラー)を明示的に指定する

公式リファレンス：Web Renderers

Flutter Webでは、描画エンジン(レンダラー)を明示的に指定することも可能です。レンダラーは「CanvasKit」・「Skwasm」の2種類が用意されており、デフォルトでは「CanvasKit」が使用されます。過去には「HTML」もありましたがFlutter 3.29で廃止されました。

CanvasKit

「CanvasKit」は全ての最新のブラウザと互換性があるレンダラーです。WebAssemblyにコンパイルされたSkiaというグラフィックエンジンを動かし、ブラウザ上のキャンバスに直接描画します。これによりモバイルアプリと全く同じ見た目(ピクセルパーフェクト)を再現できるようになっています。しかしダウンロードサイズが約1.5MB増加すると公式リファレンスにも明記されています。

Skwasm

「Skwasm」もWebAssemblyにコンパイルされたSkiaのよりコンパクトなバージョンです。こちらはビルドモードがWebAssemblyのみサポートされています。マルチスレッド機能を活用することで「CanvasKit」よりも高速な描画が可能になっています。こちらもダウンロードサイズが約1.1MB増加すると明記されています。

それぞれのレンダラーの選択

レンダラーはエンジニアが明示的に指定するというよりビルドモードに応じて自動的に選択されます。「default」モードでビルドした場合は「CanvasKit」固定で使用されますが、「WebAssembly」モードでビルドした場合は状況に応じて「Skwasm」を使うか、安定した「CanvasKit」にフォールバック(後退)するかを自動で判断します。

どうしても特定のレンダラーを指定したい場合はflutter_bootstrap.jsの_flutter.loader.loadに渡すConfigを書き換えることで指定することが可能です。

flutter_bootstrap.js
// 設定オブジェクトを作る
const myConfig = {
  renderer: "skwasm", // ここを "canvaskit" に変えれば、WasmビルドでもCanvasKitで動く
};

// ローダーに渡して実行
_flutter.loader.load({
  config: myConfig,
});

MAMPにデプロイする

ローカルで動作確認するためにMAMPにデプロイする方法も紹介します。MAMPはMacOSでPHPやMySQLなどのサーバー環境を簡単に構築できるツールです。

MAMPにデプロイする際も基本的に同様の手順で進めればOKです。生成したファイルをMAMPのhtdocsディレクトリに配置するだけになります。ただhtdocsの中に複数のプロジェクトを配置している場合は--base-hrefオプションでパスを指定する必要があります。

$ flutter build web --base-href "/my-app/"

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。