🌎

【Flutter】WebアプリをGoogleAppEngineにデプロイしてみた

2021/10/09に公開

カウンターアプリをweb上にデプロイしてみます。
完成形

はじめに

FlutterWebアプリをデプロイする場合、大抵はFirebase Hosting活用すると思いますが、今回はGoogleAppEngineを使ってみます。日本語の記事はほぼ無かったので参考になれば幸いです。

ホスティングサービス比較

Firebase hosting
王道のホスティング先です。ググればいっぱい記事が出てきます。

Google Cloud Storage
従量課金でのコストメリットが大きく、スケールするサービスはおすすめ。また別途取り組む予定です。

Google App Engine
いわゆるPaaS(Platform as a Service)らしいです。GAE を利用していると、システムの負荷に応じて GAE が自動でスケールアウト・スケールインしてくれるみたいです。

詳しく違いを知りたい方はホスティング比較をまとめてくれているサイトがあるので参考にしてみてください。
https://medium.com/google-cloud-jp/静的サイトホスティングの為のgcs-gae-firebase-hosting比較-e7d406609f2e

やっていくこと

GoogleAppEngineを使ってFlutterWebアプリをweb上に公開する

開発環境

マシン: Intel MacBook pro
エディタ: Android Studio
Flutter: 2.2.3
Python: 2.7.16   <- 意外と重要

作業の全体像

  1. FlutterWebアプリのプロジェクト作成
  2. FlutterWebアプリにapp.yamlを新規作成
  3. FlutterWebアプリのbuild
  4. Google Cloud Platformのプロジェクト作成(この記事では省略)
  5. Google Cloud SDKのインストール
  6. デプロイ

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を使います。

app.yaml
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

ターミナルで以下を実行。

command
$ flutter web build

もし、Missing index.html.が出てきたら以下を実行。

command
$ flutter create .
$ flutter build web

プロジェクト直下にbuildファイルが作成されていることを確認する。

Google Cloud Platformのプロジェクト作成(この記事では省略)

以下公式サイトを参考にプロジェクト作成してください。
https://cloud.google.com/resource-manager/docs/creating-managing-projects?hl=ja

Google Cloud SDKのインストール

もし、Google Cloud SDKのインストールがまだでしたら以下記事を参考にインストールしましょう。
https://qiita.com/G-awa/items/e6904b040caa0096fba0

デプロイ

Flutterプロジェクトのディレクトリで以下を実行

command
% gcloud app deploy

zsh: command not found: gcloudと怒られたら、この記事を参考にパスを指定してやりましょう。

command
% source '/Users/ユーザー名/google-cloud-sdk/path.zsh.inc'

もう一度デプロイコマンド実行

command
% 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アプリが立ち上がります。

command
$ gcloud app browse

ちゃんと動きました!

おしまい

本当はFlutterWebアプリをGCSにデプロイしたくてやってたんですが全然出来ずに困っていたところ、息抜きでGAEへのデプロイを試してみました。初期設定はめんどくさいですが、意外と簡単にデプロイできました。

参考記事

https://cloud.google.com/appengine/docs/standard/python/getting-started/hosting-a-static-website
https://spltech.co.uk/how-to-deploy-flutter-webapp-using-google-appengine/
https://spltech.co.uk/how-to-deploy-flutter-webapp-using-google-appengine/

Discussion