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

概要
チュートリアル
1. Flutter プロジェクト作成
2. Web サーバとして起動
エラー
1. Failed to connect to Chrome instance.
エラー対応
参考

概要

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

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

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

Choose your first type of app

Configure your system to develop Flutter 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) にアクセスすると起動できたことを確認。