ウェブブラウザで動くアプリケーションを、Flutterで作れるようになって、結構時間が経ち、今更感がありますが、今回はアプリケーションの作成からサーバーへのデプロイまでについて、手順をたどってみたいと思います。
まず、前提条件として最新のFlutterの安定版とChromeブラウザが作業環境にインストールされていることを確認してください。この記事執筆時のFlutterのバージョンは2.5.0です。
flutter --version
任意のフォルダにて、アプリケーションを作成し、プロジェクトフォルダに移動します。
flutter create my_web_app
cd my_web_app
下記のコマンドで、Chromeが認識されるか確認します。
flutter devices
私の環境では以下が出力されました。
1 connected device:
Chrome (web) • chrome • web-javascript • Google Chrome 94.0.4606.71
他にデバイスが接続されていない場合は、次に下記のコマンドを実行して、デフォルトのウェブアプリをデバッグモードで起動します。
flutter run
他にデバイスが接続されている場合は、以下のように指定します。
flutter run -d chrome
あっという間にアプリができました。libやassetフォルダにコードやファイルを追加していくことでアプリを開発していくことになります。1つのコードベースでiOSとAndroidなどのアプリケーションが作れるということなのですが、何を作るのかがいちばんの問題ですね。
Flutterアプリ開発といえば、ホットリロードですが、ウェブ版はホットリロードには対応しておらず、小文字のrも大文字のRと同じくホットリスタートとなります。ただし、動作的には通常のブラウザのリロードと同じようなものなので、そこまで気にはならないと思います。
サーバーへのデプロイ
次にサーバー上に、Flutterで作成したアプリケーションをデプロイする手順を確認します。公式サイトにはFirebase Hosting、GitHub Pages、Google Cloud ウェブホスティングにデプロイする方法についてリンクがありますが、今回はXSERVERなどのレンタルサーバーにデプロイできるか確認してみました。
まず、デプロイ用のファイルを下記のコマンドで作成します。
flutter build web
buildフォルダ内にwebフォルダが作成され、デプロイに必要なファイルが格納されました。
これらのファイルをFTPやgitなどを使って、サーバー上の適切なフォルダにアップロードすれば、ページが表示されます。右下のプラスボタンをクリックすることで、画面中央の数値もインクリメントされるので、機能的にも問題なくデプロイできたようです。
ドメイン直下ではなくサブフォルダ内にファイルを置く場合は、index.htmlファイルのベースパスを下記のように修正する必要がありますが、XSERVERなどのサーバーでも問題なくホスティングできました。
<base href="/">
↓
<base href="/subfolder-name/">