Flutterの記事を整理し本にしました
- 本稿の記事を含む様々な記事を体系的に整理し本にまとめました
- 今後はこちらを最新化するため、最新情報はこちらをご確認ください
- 10万文字を超える超大作になっています(笑)
注意
本記事の内容は古くなりましたので、下記の新しい内容をご参照下さい
はじめに
- 最近やたらとFlutterにハマっていていよいよリリースできる状態になってきたので、具体的なリリース方法を整理したいと思います。
- 何かと注目のFlutterですが、同じソースで、Androidアプリ、iOSアプリ、Webアプリと3刀流で同じものをベースにというのも地味に感動
- ↓がFlutterで始めるアプリ開発というサイトからの引用なのですがよくできていると思います。
- firebaseもホスティングやその他の機能を持っていて、良い感じに連携してくれます。
- さすがGoogle!!
記事の概要/前提
- Webアプリ編では、作ったアプリをFirebaseでデプロイに登録するまでを行います。
- アプリの作り方そのものではありません。
- 何らかのアプリが出来上がり、それをリリースするまでを紹介しています。
- 写真が少なくてすみません。。。
関連記事
- Flutterで作ったアプリをAndroidとiOSとWebに同時にリリースする(Android編)
- Flutterで作ったアプリをAndroidとiOSとWebに同時にリリースする(Webアプリ編)
- Flutterで作ったアプリをAndroidとiOSとWebに同時にリリースする(iOS編)
参考文献
- https://flutter.dev/docs/deployment/web
- https://www.flutter-study.dev/host-web-app/hosting (←すごく分かりやすい)
Webアプリリリースへの道
1. Firebaseのアカウントを作る
-
https://console.firebase.google.com/
- 上記URLにアクセスしてプロジェクトを作ります
- 数クリックでできます
- プロジェクトができたら、サイドナビの「開発 → Hosting」を選択「始める」を選択します
npm install -g firebase-tools // ツールのインストール
firebase login // ログインとアカウントの紐付け
firebase init
「Hosting」を選択しEnter
「Use an existing project」を選択しEnter
使用するプロジェクトを選択しEnter
「? What do you want to use as your public directory?」に 「build/web」 を入力
「? Configure as a single-page app (rewrite all urls to /index.html)?」に 「N」 を入力
- npmとnodeが古すぎてエラーが出ていたようなので、最新化しました。
- build/webがデプロイされる実体のフォルダになるので注意すること
$ flutter channel beta
$ flutter upgrade
$ flutter config --enable-web
$ flutter create --org package_name .
$ flutter build web
- channelをbataにするとあったのですが、がちゃがちゃやっていたらmasterでも動いたっぽいです
- ドメインが"com.example"だとandroidアプリがNGだったので変えた影響かflutter create .ではエラーが解消できず、"--org packaage_name"にしたところ動きました
3.デプロイ
firebase deployでデプロイできます。
- 反映まで30秒程度？かかります
- URLはコマンド実行時の
Hosting URL:XXXXXもしくは、Webサイトのダッシュボード行けます
イメージ
- 縦長のスマホと横長のブラウザなので、レイアウトはずれますね。。。みんなどうしているんだろう？？？
4.デバッグ
flutter run -d chromeでgoogle chromeが起動し、動作を確認できます。
エラーが起きたときも、デバッグコンソールに表示されるので、シミュレータ相当で、デバッグに役立ちます