概要
パラグラフを自由に作成し、タグをゲームブックを作成できるシステム 「カルタグラフ」 を作った。
作成したパラグラフの関係は、グラフ図で確認できる。1日1回更新。
グラフ確認画面
使用している使用技術・サービスをまとめる。
2022.11.11 追記 HerokuをNeonに変更。
システム構成
基本的にすべて無料枠を利用している。
利用料がかかっているのは以下。日本円で およそ 100円 / 月 。
DNSを無料のものにしていればもっと安く済むだろうが、CDKで管理したかったので。
| 用途 | サービス | 利用料 |
|---|---|---|
| DNS | Route 53 | 0.5ドル / 月 |
| ストレージ | S3 | 0.01ドル / 月 |
フロントエンド
SPAとして作成。
フレームワーク
フレームワークにはReactを使用。
最近、18にアップデートされたり、Redux Toolkitで状態管理がやりやすくなったと聞いて。
ライブラリ
デプロイ先
S3 + CloudFrontの構成。
CDKでデプロイが手軽にできるため。
また、API Gatewayを後ろにつけることにより、CORS設定を考えなくてよい。
利用者も少ないので、利用料も0。
もし課金が大きくなるなら、cloudflareを試そうと考えている。
バックエンド
フロントエンドからのリクエストを処理するAPI。
RESTで作成している。
デプロイ先
API Gateway + Lambda (Typescript)。
データプラットフォーム
ストレージ
HTML、グラフ用JSONの配置。ログの保存。
ログはAPIGateayからS3に直接データを流している。
グラフ図用のJSONは、1日1回EventBridge起動のLambdaが、DBから情報を取得して更新している。
データベース
グラフ図用にパラグラフのリンクデータを管理。
LambdaからGraphQLを使ってHasura経由で Heroku Neon のPostgresを操作している。
NoSQL
パラグラフの情報を管理。
フロントエンドから、FirebaseのFirestoreを操作している。
認証は匿名認証で、自分の作成したパラグラフのみ編集できるようにした。
まとめ
ゲームブックシステム 「カルタグラフ」 で利用している技術をまとめた。
マイクロサービスのレイヤードアーキテクチャ風になっていると思う。
CI/CDがまだ出来ていないので作っていきたい。
テスト駆動で作ってみたいと思いつつ、つい、テストより動くものを作りたくなってしまう。。