FlutterアプリをWebで公開する方法

はじめに

こんにちは、Rerurate_514と申します。

今回は暇だったので、ちょっと自分が作っていたアプリをwebで公開してみたものになります。

前提

前提として使用しているパッケージがwebに対応している必要があります。
pubdevにこんなことが書いてあるならいけます。

逆にこれがついていないものはwebアプリとしてビルドできないので、そのところ注意する必要があります。
あと結構、使えないものも多かったりします。
例えば、dart:ioとか、Image.fileとか。このあたりを使うときは大体を考える必要があります。ちなみにImage.fileの代替はImage.memoryです。

やり方

まず、Firebaseの導入をします。
この辺りはいろんなところで解説されているので、省きたいところですが、ちょっとだけ触ります。

ログイン - Google アカウント

console.firebase.google.com

firebaseコンソールから新しいプロジェクトを作成したら、ローカルでもセットアップします。
以前書いた記事の引用でもしときます。

インストールとログイン

まず、npmパッケージからfirebase-toolsをインストールする。

npm install -g firebase-tools

そして、Firebaseへログインする。

firebase login

元記事へのリンク

ここからfirebase initを打って設定を行う。
その設定の中でhostingを有効化する。

Use an existing projectを選択して、先ほど作成したfirebaseプロジェクトを選択。
あとは全部yでもいいかと思います。

firebase.jsonの中身の"public": "public"を"public": "build/web"にします。

あとはflutter build webをしてから、firebase deployをするだけですかね。

その他

webでデータベースを使用するときは、realmを使うことはできません。
Shared_preferencesかdriftかisarを使うようにしましょう。
正直realmを今まで使っていましたが、build_runnerのアップデートはしないし、web対応もないので、driftに乗り変えました。

driftを使う場合でも、drift_wokers.jsとsqlite3.wasmが必要ですけどね。

• https://github.com/simolus3/drift/releases/download/drift-2.32.0/drift_worker.js
• https://github.com/simolus3/sqlite3.dart/releases/download/sqlite3-3.1.6/sqlite3.wasm

あとはcloudflareのドメインを持っているなら、DNSレコードを設定することでドメインを変えることができます。

firebaseは説明がしっかりしているので、それに従うだけでいいので楽でいいですよね。