flutterをngrok経由で動作させる
Top / flutterをngrok経由で動作させる目次 †
動機 †
google認証でidToken取得したい
google認証させるためにはoauthでドメインを設定しないといけない設定項目があるが、 localhostや127.0.0.1でははじかれてしまうようになっていた。バグだとおもうが、どうしようもないので、ドメイン経由での接続のため、ngrokで立ち上げないといけない。
動作確認できた手順 †
ngrokを起動させておく(順番は前後しても大丈夫だった) †
ngrok http --domain=ここにngrokで提供されたドメインを入れる 8080
flutterを起動させる †
自分は以下の一連をスクリプトにしている
cd プロジェクトのあるディレクトリ遷移 flutter clean flutter pub get flutter gen-l10n flutter run -d web-server --dart-define-from-file=.env --web-port=8080
できなかった手順 †
flutter build web
として、単純にデプロイしただけ
Flutter Version Management †
複数のFlutter SDKバージョンをインストールできる。
→複数のFlutter SDKをインストールしておくことができるので、切り替えが容易になります。
fvm_config.json を使用することで、Flutter SDKバージョンを明示してチームで統一できる。
複数のFlutterアプリ開発に携わるならFlutter SDKのバージョン管理は必須とも言えます
公式サイト †
windowsでインストール †
管理者権限でpower shellとかひらく
choco upgrade chocolatey choco install python --version=3.12.4 choco install fvm
紹介記事 †
FVMでFlutter SDKのバージョンをプロジェクト毎に管理する
https://zenn.dev/altiveinc/articles/flutter-version-management
参考サイト †
FlutterWeb?をモバイル端末で動作させる †
https://qiita.com/suga_slj/items/9788e163e16a456d7930
Flutterの開発でngrokを利用する方法 †
DBなどをngrok経由でflutterからアクセスしたい場合のサンプル
https://qiita.com/hiwazero/items/8bf677e580af6d091279
ngrokを無料プランでURL固定してみる †
https://qiita.com/miso_develop/items/bdcf15489b069ba1fa61
【事前準備：補足】ngrokを使ったローカル開発環境の構築 †
https://zenn.dev/tokku5552/books/flutter-web-liff-scheduler/viewer/6_prepare_ngrok
