わたすけです。
Flutterという、Android, iOS, Web, Desktop, 様々な環境で動作するアプリを開発できるフレームワークが存在します。
最初はLinux上で動くデスクトップアプリから開発しようと思っていたのですが、途中で気になってWebでテストビルドをした時、ふと思いました。
ん？FlutterのWeb開発もしかして最強？
鯖立てて、メインPCからVScodeでSSH接続して、メインPCのChromeから接続— わたすけ (@Watasuke102) July 28, 2020
ざっくり言うと、サーバーでFlutterアプリを動かし、そのサーバーにローカルから接続することによって、面倒な環境構築を最小限に抑え、全ての環境で開発を可能に出来る、ということです。すごいですね（こなみ）
ということで、今回はFlutter環境をサーバーに構築し、リモート開発の環境を整えてたので、やり方をまとめておきます。
環境
Azure VM上のUbuntu Server 18.04 LTS
Azure for Students は素晴らしいですね。今回はUbuntu Serverですが、Ubuntu系ならほぼ同じような手順で可能だと思います。
Flutterをインストール
まずはFlutterをサーバーに入れましょう。
必要なものを入れる
$ sudo apt install clang curl lib32stdc++6
ついでにここでAndriod Studioのインストールもしてやります。
$ sudo snap refresh $ sudo snap install android-studio
ダウンロード
GitHubから引っ張ってきます。
$ git clone https://github.com/flutter/flutter
移動・パスの設定
パスを通します。ちなみにこの設定だとターミナル閉じたりログアウトしたりしたらもう一度exportしないといけないので、bashrc/zshrcなどに書いておくのが良いと思います。
$ sudo mv flutter /usr/local $ export PATH=$PATH:/usr/local/flutter/bin
Web開発を有効化
$ flutter config --enable-web
確認
$ flutter doctor
で、必要な物などのチェックが入ります。
[ ! ]とかなっても実行できればいいのでとりあえず次に進みましょう。Flutterプロジェクトの作成・実行
ということで、ひとまずサンプルプロジェクトをビルドしてみます。
任意のフォルダに移動して以下のコマンドを実行すると、sampleフォルダにFlutterのサンプルが生成されます。sampleの部分は多少変えても大丈夫なはずです。
$ flutter create sample
そして、とりあえず実行してみましょう。
$ flutter run -d web
すると以下のようなメッセージが出てきます。（一部）
Syncing files to device Web Server... lib/main.dart is being served at http://localhost:9999 The web-server device requires the Dart Debug Chrome extension for debugging. Consider using the Chrome or Edge devices for an improved development workflow.
ここでは例として9999になっていますが、この数字は実行するたびに変わります。
もしGUIがあれば、Chrome等でURLを入力し、実行を確認してみてください。
ngrokのインストール
一部の人は「これlocalhostにさえ接続できれば最強なのでは？？」と思ったことでしょう。その通りです。
localhostを公開してくれるサービス、ngrokを入れます。
（もしかしたらzipファイルのURL変わってるかも知れません）
$ wget https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zip $ unzip ngrok-stable-linux-amd64.zip $ sudo mv ngrok /usr/bin/ $ rm ngrok-stable-linux-amd64.zip
localhost公開して最強になる
それでは、いよいよサーバー上のFlutterに接続してみたいと思います。ターミナルが2つ必要になるので、SSH接続なら任意のターミナルウィンドウを2つ開いてそれぞれログインしておいてください。
まずは先程作ったFlutterのプロジェクトフォルダに移動します。
そして、以下のようにコマンドを打ち、起動しておきます。
$ flutter run -d web --web-port 任意の数字
任意の数字は0〜65535で好きなもので大丈夫です。数字を覚えておいてください。
次に、もう一つのターミナルで以下のコマンドを実行します。
$ ngrok http 任意の数字
ここの任意の数字は、一つ前の数字と一致させてください。
以下のような表示になるはずです。
ngrok by @inconshreveable (Ctrl+C to quit) Session Status online Session Expires 7 hours, 59 minutes Version 2.3.35 Region United States (us) Web Interface http://127.0.0.1:4041 Forwarding http://（ランダムな文字列）.ngrok.io -> http://localhost:任意の数字 Forwarding https://（ランダムな文字列） -> http://localhost:任意の数字
ローカルで「http://ランダムな文字列.ngrok.io」にアクセスし、しばらくロードを待って、表示されたら完了です！
ざっくりやってみた感想
ngrokのロードがめちゃめちゃ遅い。ホットリロード（笑）になっている
毎回ターミナルでR入力するたびにブラウザをリロードしないといけないので、ここまでロードが遅いとわりとストレスかもしれないです。
ただ、それ以外はいい感じです。VScodeでSSH接続して、ファイルをいじるだけでアプリを作ることが出来ます。
おわりに
最初は web-port部分で指定したポートを開放すればどうにかなるでしょ！ｗ と思ってましたがうまくいかず、最終的にngrokを使うことで出来たのでよかったです（こなみ）
以上、Flutter環境をサーバー上に構築し、外出先など全ての状況で開発を可能にする方法でした。こんなことしても外出中にプログラミングしないかもしれませんが。
コメント