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

# 事前準備
[こちら](https://dart.dev/get-dart) からdartをインストールしておく

もしくはFlutterのdartを使用する
詳しくは[こちら](https://qiita.com/mkurom/items/9a2d3b11e548ff38b9ec)

# 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 `

![スクリーンショット 2022-12-10 21.10.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631339/6b530508-0f4c-a64d-bd5d-4db2fd4bbc29.png)


<details>
<summary>dart pub getするのを忘れているかもしれないエラー</summary>

```
✓ 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
```

</details>

<details>
<summary>言語バージョンの違いかもしれないエラー</summary>

```
✓ 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
```

### 解決策

[こちら](https://github.com/mkurom/flutter_server/tree/main/frog_server#memo)に記載しています

</details>

## その他

### 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の[チェンジログ](https://pub.dev/packages/dart_frog/changelog)にも0.2.0のログに`Dart ">=2.18.0 <3.0.0"`と記載あり

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

websocketの接続は[web_socket_channel](https://pub.dev/packages/web_socket_channel)パッケージを使用する

コードは[こちら](https://verygood.ventures/blog/dart-frog-full-stack-tutorial)を参考にして実装した

[コード](https://github.com/mkurom/flutter_server)


# 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/`

![スクリーンショット 2022-12-10 22.43.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631339/d46a384b-15d3-fb23-00a4-a6e49adbd214.png)


<details>
<summary>dockerが起動していないかもしれないエラー</summary>

```
% 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.
```

</details>

### Flutterアプリとの接続

```
$ cd [my_project]_flutter

$ flutter run
```

・送信前
<img width=400 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631339/32899cdf-8c27-cbf0-b1d2-30daaa303d95.png
">

・送信後
<img width=400 src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631339/051d603f-2a46-bc7e-57af-76dcf8b6cd3a.png">



# 参考記事

[dartfrog公式doc](https://dartfrog.vgv.dev/)

[pub.dev](https://pub.dev/packages/dart_frog)

[Serverpod公式doc](https://docs.serverpod.dev/)

# コード

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

https://github.com/mkurom/flutter_server