こんにちは、株式会社Pentagonでインフラ・バックエンド開発をしている石渡倭です。
今回はFlutter Webを検証するにあたってサーバ上で利用する方法を解説します。
サーバはLinuxを利用する前提です。
【この記事を読むメリット】
- LinuxサーバにFlutter Webを導入する方法がわかります。
【こんな方に参考にしていただきたい】
- FlutterアプリをWebからプレビューしたい方
- Linux上でFlutter Webを使いたい方
【調査の動機】
Dockerを用いたcode-server構築の情報が多く、Linux上でFlutter Webの利用方法がわからなかった
【調査結果】
- CUI環境のLinuxでもFlutter Webは使える
- FlutterアプリをそのままFlutter Webとして出力できる
【結論】
今回は、Flutter Webとして出力する際に発生する問題点と対策をまとめました。
目次
配信構成について
-
Flutter Webをそのままサーバとして機能させない
Flutter Webのデバッグ方法として使用できるflutter run -d web-serverですが、サーバで利用すると問題にぶつかります。
例えば、複数のプロジェクトをプレビューしたいときにポートを複数管理する必要が生じるほか、プロセスを管理しなければなりません。そのため、flutter run -d web-serverは使用しないこととしました。 -
配信構成について
今回の調査では、Firebase HostingやS3などを使用しませんでしたが、Flutter Webはホスティング環境に配備して公開することも可能です。
調査で行った配信構成を紹介します。Flutter Webをビルドして静的ファイルに出力をしNGINXから配信を行いました。ポートやプロセスを管理する手間を省くことができ、簡単に配備できます。流れは以下の画像を参照ください。
Flutterのインストール
- システムワイドにインストールする
Flutterのインストールは以下のコマンドを実行するだけです。
# Flutterのインストール先を作成（今回はec2-userの所有としました）
sudo install -o ec2-user -m 775 -d /opt/flutter
cd /opt
# 最新のFlutterをクローンする
git clone https://github.com/flutter/flutter.git -b dev --depth 1 /opt/flutter
FlutterPATH='PATH="/opt/flutter/bin:\$PATH"'
# 環境変数をシステムワイドに反映する
sudo bash -c "echo $FlutterPATH > /etc/profile.d/flutter.sh"
sudo chmod +x /etc/profile.d/flutter.sh
PATH="/opt/flutter/bin:${PATH}"
flutter doctor
flutter config --enable-webこのままだとPATHが反映されていない状態なので、テストを兼ねて一度ログアウトしてから再ログインをし、/etc/profile.d/flutter.shが読み込まれるかを確認する。
例えばwhich flutterを実行すると以下のようになります。
$ which flutter # PATHのテスト
/opt/flutter/bin/flutter
flutterコマンドが利用できる環境になっていることがわかります。
もしFlutterのインストール中にエラーが発生した場合は、後述のメモリ不足かdevブランチによるものです。ブランチを変更するか動作するコミットまでさかのぼってインストールすると良いでしょう。
発生する問題点と対策について
-
メモリ不足でFlutterをインストールできない
テスト段階でAWSのt2.microなどメモリが1GB程度の環境の場合は、Flutterのインストール時にエラーが発生します。スペックを上げるかswapを追加してからインストールしましょう。今回の環境では他のプロセスも考え2GBのスワップを追加しました。 -
既存アプリからFlutter Webへの出力ができない
これはflutter config --enable-webを実行する前に、flutter create appnameを実行すると発生します。既存アプリから出力する際はflutter create .を実行してWebサポートしたプロジェクトにします。 -
サブディレクトリで公開するとmain.dart.js等アセットファイルにアクセスできない
問題はindex.html内にある
今回のケースのようにサブディレクトリでの運用をする場合は、flutter build web --base-href ＜公開するディレクトリ名＞を実行してbaseタグを変更する必要があります。
調べた中では、ソースコードを直接変更する・置換コマンドを利用する・タグを消す等の情報が多く見受けられましたが、オプションを利用しましょう。
まとめ
以上、Linux環境下でのFlutterの導入方法、注意点・対策でした。
さまざまな環境下で利用されるものですので、一つの情報に踊らされず対応していきましょう。
少しでも参考になれば幸いです。
