dart_frog, serverpodでサーバー構築

内容

dart_frog、serverpodの2つを使用して、dartでサーバーを構築してみる。
とりあえずは、サーバーが起動するところまでを本記事の内容とする。

開発環境

PC:macOS Monterey
エディター：Visual Studio Code
Flutterのバージョン管理：fvm

dart_frogの環境

Flutter：3.0.0（dart：2.17.0）
dart：2.18.5
dart_frog_cli：0.19
dart_frog_cli：0.3.1

pubspec.yaml
・dart_frog: ^0.3.0
・dart_frog_web_socket: ^0.1.0-dev.2

serverpodの環境

Flutter：3.0.0（dart：2.17.0）
Flutter：3.3.9（dart：2.18.5）
※Flutter3.0.0だとローカルサーバーに接続するFlutterアプリが依存関係でエラーになり起動できないので、fvm経由で3.3.9を使用できるようにしておく

docker：20.10.17
serverpod：0.9.20

事前準備

こちら からdartをインストールしておく

もしくはFlutterのdartを使用する
詳しくはこちら

dart_frog

dart_frogのインストール

dart_frogのインストールのコマンドを実施

dart pub global activate dart_frog_cli

インストールされているか確認

% dart_frog --version
0.1.9

もしくは

% dart pub global list
dart_frog_cli 0.1.9

プロジェクトの作成

dart_frog create [my_project]

※[my_project]は任意のプロジェクト名
※Flutterでいう create projectと一緒

サーバーの起動

作成したプロジェクトに移動して、サーバーを起動

cd [my_project]

dart_frog dev

※Flutterでいう runと一緒

起動していると、以下のように表示される

url: http://localhost:8080

dart pub getするのを忘れているかもしれないエラー

✓ Running on http://localhost:8080 (6.5s)
The Dart VM service is listening on http://127.0.0.1:8181/eHU3zsjrj3E=/
The Dart DevTools debugger and profiler is available at: http://127.0.0.1:8181/eHU3zsjrj3E=/devtools/#/?uri=ws%3A%2F%2F127.0.0.1%3A8181%2FeHU3zsjrj3E%3D%2Fws
Error: Couldn't resolve the package 'dart_frog' in 'package:dart_frog/dart_frog.dart'.
.dart_frog/server.dart:6:8: Error: Not found: 'package:dart_frog/dart_frog.dart'
import 'package:dart_frog/dart_frog.dart';
       ^
routes/index.dart:1:8: Error: Not found: 'package:dart_frog/dart_frog.dart'
import 'package:dart_frog/dart_frog.dart';
       ^
.dart_frog/server.dart:21:1: Error: Type 'Handler' not found.
Handler buildRootHandler() {
^^^^^^^
.dart_frog/server.dart:28:1: Error: Type 'Handler' not found.
Handler buildHandler() {
^^^^^^^
routes/index.dart:3:1: Error: Type 'Response' not found.
Response onRequest(RequestContext context) {
^^^^^^^^
routes/index.dart:3:20: Error: Type 'RequestContext' not found.
Response onRequest(RequestContext context) {
                   ^^^^^^^^^^^^^^
.dart_frog/server.dart:12:16: Error: Method not found: 'hotReload'.
void main() => hotReload(createServer);
               ^^^^^^^^^
.dart_frog/server.dart:17:19: Error: Method not found: 'Cascade'.
  final handler = Cascade().add(buildRootHandler()).handler;
                  ^^^^^^^
.dart_frog/server.dart:18:10: Error: Method not found: 'serve'.
  return serve(handler, ip, port);

解決策

dart pub get

言語バージョンの違いかもしれないエラー

✓ Running on http://localhost:8080 (0.3s)
The Dart VM service is listening on http://127.0.0.1:8181/uMumnDZiTno=/
The Dart DevTools debugger and profiler is available at: http://127.0.0.1:8181/uMumnDZiTno=/devtools/#/?uri=ws%3A%2F%2F127.0.0.1%3A8181%2FuMumnDZiTno%3D%2Fws
.dart_frog/server.dart:1:1: Error: The specified language version is too high. The highest supported language version is 2.17.
// GENERATED CODE - DO NOT MODIFY BY HAND
^
routes/index.dart:1:1: Error: The specified language version is too high. The highest supported language version is 2.17.
import 'package:dart_frog/dart_frog.dart';
^
../../../../.pub-cache/hosted/pub.dartlang.org/stack_trace-1.11.0/lib/stack_trace.dart:1:1: Error: The specified language version is too high. The highest supported language version is 2.17.
// Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file
^
../../../../.pub-cache/hosted/pub.dartlang.org/async-2.10.0/lib/async.dart:1:1: Error: The specified language version is too high. The highest supported language version is 2.17.
// Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file
^
../../../../.pub-cache/hosted/pub.dartlang.org/stack_trace-1.11.0/lib/src/chain.dart:1:1: Error: The specified language version is too high. The highest supported language version is 2.17.
// Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file
^
../../../../.pub-cache/hosted/pub.dartlang.org/stack_trace-1.11.0/lib/src/frame.dart:1:1: Error: The specified language version is too high. The highest supported language version is 2.17.
// Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file
^
../../../../.pub-cache/hosted/pub.dartlang.org/stack_trace-1.11.0/lib/src/trace.dart:1:1: Error: The specified language version is too high. The highest supported language version is 2.17.
// Copyright (c) 2013, the Dart project authors.  Please see the AUTHORS file
^
../../../../.pub-cache/hosted/pub.dartlang.org/stack_trace-1.11.0/lib/src/unparsed_frame.dart:1:1: Error: The specified language version is too high. The highest supported language version is 2.17.
// Copyright (c) 2015, the Dart project authors.  Please see the AUTHORS file
^
../../../../.pub-cache/hosted/pub.dartlang.org/convert-3.1.1/lib/convert.dart:1:1: Error: The specified language version is too high. The highest supported language version is 2.17.
// Copyright (c) 2015, the Dart project authors.  Please see the AUTHORS file
^
../../../../.pub-cache/hosted/pub.dartlang.org/async-2.10.0/lib/src/async_cache.dart:1:1: Error: The specified language version is too high. The highest supported language version is 2.17.
// Copyright (c) 2017, the Dart project authors.  Please see the AUTHORS file

解決策

こちらに記載しています

その他

dart_flogのバージョンアップ

dart_flogのバージョンを確認すると、バージョンアップができるとのことだったので、バージョンアップします。

% dart_frog --version
0.1.9

Update available! 0.1.9 → 0.3.1
Changelog: https://github.com/verygoodopensource/dart_frog/releases/tag/dart_frog_cli-v0.3.1
Run dart_frog update to update

コマンド

dart_frog update

※※※　2022/12/10 追記
私の開発環境では、dart_frogのvarが0.3.1にアップデートできないので、原因を確認中

※※※　2023/01/15 追記
dartのバージョンを2.17→2.18.5に変更したら0.3.1にアップデート成功

dart_frogのチェンジログにも0.2.0のログにDart ">=2.18.0 <3.0.0"と記載あり

Flutter(フロント)とwebsocketの接続確認

websocketの接続はweb_socket_channelパッケージを使用する

コードはこちらを参考にして実装した

コード

serverpod

インストール

dart pub global activate serverpod_cli

インストールされているかの確認

% serverpod
Downloading templates for version 0.9.20
Download complete.

Usage: serverpod <command> [arguments]
・
・
・

プロジェクト作成

serverpod create [my_project]

成功すると、下記3ディレクトリが作成される

[my_project]_client
[my_project]_flutter
[my_project]_server

サーバーの起動

cd [my_project]/[my_project]_server
docker-compose up --build --detach
dart bin/main.dart

起動すると、以下のように表示される

url:http://localhost:8080/

dockerが起動していないかもしれないエラー

% serverpod create [my_project]

There are some issues with your setup that will prevent your Serverpod project from running out of the box and without further configuration. You can
still create this project by passing -f to "serverpod create" and manually configure your Serverpod.

You do not have Docker installed or it is not running. Serverpod uses Docker to run Postgres and Redis. It's recommended that you install Docker Desktop
from https://www.docker.com/get-started but you can also install and configure Postgres and Redis manually and run this command with the -f flag added.

Flutterアプリとの接続

$ cd [my_project]_flutter

$ flutter run

・送信前

・送信後

参考記事

dartfrog公式doc

pub.dev

Serverpod公式doc

コード

今回試したコードはこちら