プロダクト概要

1つのスクリーンにみんなでお絵描きできる！

こんな画面

推しポイント

色も太さも自由自在！ 簡単な初期設定で遠くからも近くからもお絵描きできる！ みんなで塗りあってナワバリバトルもできる！

使用技術

フロントエンド

・React ・Tailwind ・Window: deviceorientation イベント ・Storybook ・Visual Regression Test ・Tanstack Router ・Biome ・Lighthouse

バックエンド

・Go ・labstack/echo ・gorilla/websocket ・uptrace/bun ・google/wire ・otelecho ・otelsql

インフラ

・Google Cloud ・Google Kubernetes Engine ・Artifact Registry ・Cloud SQL for MySQL ・Cloud SQL Auth Proxy ・Cloud Storage Service ・Cloud CDN ・Identity Platform ・Cloud Functions

DevOps

・ArgoCD ・Atlantis ・OpenTelemetry ・GitHub Actions

こだわりポイント

デプロイ

Terraform

/infra/terraform/ に変更があるPRを検知すると自動で terraform plan が走る． 同一PRで atlantis apply とコメントすると terraform apply が走る． 結果はSlackに通知される． また、ロックをとる仕組みがあり、同時にplan/applyしてしまう事故も防げる．

API

GitHub Actionsでビルドした生成物をArtifact RegistryにPushし、そのイメージURLを埋め込んだk8sマニフェストファイルを作成する． マニフェストファイルはArgoCDで監視しているのでそれをトリガーにデプロイが走る．

スキーマ駆動開発

protobuf でスキーマを記述し、フロント・バックともにそれをもとに開発を行った． フロントのfetchやバックのルーティングはコード生成を行っている． コード生成のためのplugin(protogen)はおおよそ自前で用意した.

ArgoCD

アーキテクチャ図

OpenTelemetry

テスト

CIで実行&カバレッジ計測を行っている. (バックエンドカバレッジ21.4%)