[Flutter] Web アプリとして Chrome が起動しなかったので Web サーバとして動かす

概要

カウンターアプリを Web アプリとして Chrome で動かしたかった。できなかった。

代わりに Flutter を Web サーバとして起動し、Chrome からアクセスするようにした。

公式では簡単にできそうに書いてあったのに!

macOS install
How to install on macOS.

環境

  • Dart 2.16.1
  • Flutter 2.10.2
  • Chrome 98.0.4758.102

チュートリアル

Flutter プロジェクト作成

いつものカウンターアプリを作成する。

flutter create counter
cd counter

Web サーバとして起動

Web サーバで起動する。

$ flutter run -d web-server

Launching lib/main.dart on Web Server in debug mode...
Waiting for connection from debug service on Web Server...         22.4s
lib/main.dart is being served at http://localhost:59942

http://localhost:59942 へ Chrome でアクセス。

Chrome から Flutter アプリへアクセスできた!

エラー

Failed to connect to Chrome instance.

カウンターアプリを Web で起動したところ、スクショ取る暇もなくアプリが落ちる。

$ flutter run -d chrome

Multiple devices found:
macOS (desktop) • macos • darwin-x64 • macOS 11.4 20F71 darwin-x64
Chrome (web) • chrome • web-javascript • Google Chrome 98.0.4758.102
Please choose one (To quit, press "q/Q"): 2
Waiting for connection from debug service on Chrome...             18.4s
Failed to connect to Chrome instance.

エラー対応

詳細確認

詳細に実行。

flutter run -d chrome --verbose

以下のエラーが発生していた。何のエラーかわからない。。

[  +10 ms] Failed to connect to Chrome instance.
[   +3 ms]
           #0      throwToolExit (package:flutter_tools/src/base/common.dart:10:3)
           #1      ResidentWebRunner.attach (package:flutter_tools/src/isolated/resident_web_runner.dart:551:9)
           <asynchronous suspension>
           #2      asyncGuard.<anonymous closure> (package:flutter_tools/src/base/async_guard.dart:111:24)
           <asynchronous suspension>

ビルドが別途いる?

ビルドが別途いると思った。結論から言うとそんなことはなかったぜ。

Building a web application with Flutter
Instructions for creating a Flutter app for the web.

build する。

flutter build web

その後に起動しようとしたが、状況変わらず。

$ flutter run -d chrome

Launching lib/main.dart on Chrome in debug mode…
Waiting for connection from debug service on Chrome… 16.1s
Failed to connect to Chrome instance.

Web サーバとして動かせばアクセスできた

Web サーバとして動かすコマンド。こんなのあるのか。。

$ flutter run -d web-server

Launching lib/main.dart on Web Server in debug mode...
Waiting for connection from debug service on Web Server...         22.4s
lib/main.dart is being served at http://localhost:59942
The web-server device requires the Dart Debug Chrome extension for debugging. Consider using the Chrome or Edge devices for an improved
development workflow.

🔥  To hot restart changes while running, press "r" or "R".
For a more detailed help message, press "h". To quit, press "q".

指定された URL (http://localhost:59942) にアクセスすると起動できたことを確認。

暫定対応として、これでいく。

Firefox の場合は

未検証。

How to change Flutter DevTools default browser?
Can I change the default browser that is used for Flutter DevTools? Is it compatible with Firefox or other browser? In my case, I don't like Chrome very much, i...

参考

Building a web application with Flutter
Instructions for creating a Flutter app for the web.
How to change Flutter DevTools default browser?
Can I change the default browser that is used for Flutter DevTools? Is it compatible with Firefox or other browser? In my case, I don't like Chrome very much, i...
ChromeのERR_CONNECTION_REFUSEDエラーの9つの処理方法
インスタント満足に夢中になっているデジタルの世界では、閲覧時に経験したくないことの一つは、ERR_CONNECTION_REFUSEDなどのエラーメッセージでしょう。これは信じられないほどイライラすることで、深刻な異常の証拠でもある場合もあります。

コメント

タイトルとURLをコピーしました