【Flutter】WebアプリをGoogleAppEngineにデプロイしてみた
カウンターアプリをweb上にデプロイしてみます。
はじめに
FlutterWebアプリをデプロイする場合、大抵はFirebase Hosting活用すると思いますが、今回はGoogleAppEngineを使ってみます。日本語の記事はほぼ無かったので参考になれば幸いです。
ホスティングサービス比較
Firebase hosting
王道のホスティング先です。ググればいっぱい記事が出てきます。
Google Cloud Storage
従量課金でのコストメリットが大きく、スケールするサービスはおすすめ。また別途取り組む予定です。
Google App Engine
いわゆるPaaS（Platform as a Service）らしいです。GAE を利用していると、システムの負荷に応じて GAE が自動でスケールアウト・スケールインしてくれるみたいです。
詳しく違いを知りたい方はホスティング比較をまとめてくれているサイトがあるので参考にしてみてください。
やっていくこと
GoogleAppEngineを使ってFlutterWebアプリをweb上に公開する
開発環境
マシン: Intel MacBook pro
エディタ: Android Studio
Flutter: 2.2.3
Python: 2.7.16 <- 意外と重要
作業の全体像
- FlutterWebアプリのプロジェクト作成
- FlutterWebアプリにapp.yamlを新規作成
- FlutterWebアプリのbuild
- Google Cloud Platformのプロジェクト作成（この記事では省略）
- Google Cloud SDKのインストール
- デプロイ
FlutterWebアプリのプロジェクト作成
AndroidStudioを起動し、Create New Flutter ProjectからFlutterアプリを新規作成。
おなじみのカウンターアプリが立ち上がると思います。
FlutterWebアプリにapp.yamlを新規作成
プロジェクト傘下にapp.yamlを新規作成します。pubspec.ymalをコピペして名前をappに変更して作成します。
app.yamlの中身は以下の通りです。runtimeはpythonでなくてもJava , PHP , Go , Node.jsなどでも可能です。今回はpythonを使います。
runtime: python27 #PCのpythonのバージョンに合わせる。2.7.16なのでpython27
api_version: 1
threadsafe: true
handlers:
- url: /
static_files: build/web/index.html #deployしたあとの読み込みに行く場所なのでbuild/web/index.htmlとする
upload: build/web/index.html
- url: /(.*)
static_files: build/web/\1
upload: build/web/(.*)
FlutterWebアプリのbuild
ターミナルで以下を実行。
$ flutter web build
もし、Missing index.html.が出てきたら以下を実行。
$ flutter create .
$ flutter build web
プロジェクト直下にbuildファイルが作成されていることを確認する。
Google Cloud Platformのプロジェクト作成（この記事では省略）
以下公式サイトを参考にプロジェクト作成してください。
Google Cloud SDKのインストール
もし、Google Cloud SDKのインストールがまだでしたら以下記事を参考にインストールしましょう。
デプロイ
Flutterプロジェクトのディレクトリで以下を実行
% gcloud app deploy
zsh: command not found: gcloudと怒られたら、この記事を参考にパスを指定してやりましょう。
% source '/Users/ユーザー名/google-cloud-sdk/path.zsh.inc'
もう一度デプロイコマンド実行
% gcloud app deploy
Services to deploy:
descriptor: [/Users/ユーザー名/AndroidStudioProjects/flutter_counter_app/app.yaml]
source: [/Users/ユーザー名/AndroidStudioProjects/flutter_counter_app]
target project: [GCPで作成したプロジェクト]
target service: [default]
target version: [数字が入る]
target url: [公開されるwebのurl]
target service account: [App Engine default service account]
Do you want to continue (Y/n)? Y
Beginning deployment of service [default]...
╔════════════════════════════════════════════════════════════╗
╠═ Uploading 1 file to Google Cloud Storage ═╣
╚════════════════════════════════════════════════════════════╝
File upload done.
Updating service [default]...done.
Setting traffic split for service [default]...done.
Deployed service [default] to [公開されるwebのurl]
You can stream logs from the command line by running:
$ gcloud app logs tail -s default
To view your application in the web browser run:
$ gcloud app browse
これでデプロイ完了です！
以下コマンド実行すればデプロイしたwebアプリが立ち上がります。
$ gcloud app browse
ちゃんと動きました！
おしまい
本当はFlutterWebアプリをGCSにデプロイしたくてやってたんですが全然出来ずに困っていたところ、息抜きでGAEへのデプロイを試してみました。初期設定はめんどくさいですが、意外と簡単にデプロイできました。
参考記事
Discussion