２４時間でさようなら

チームVRChatです。"VRChat"ではなく"Cat"🐱 インフラ一生触ってる人とAI触ってる人です。

タイトル：２４時間でさようなら

- 24時間に一度、日付が変わると同時に訪れる永遠かもしれないお別れ  
- あなたは毎日この世界中のどこの誰かわからない相手と出会うことができる。しかし、与えられたコミュニケーションの手段は一つだけ  
- 人と人が直接会話することはできず、AIによる検閲が入ることで匿名化される
- その日あった出来事やふとしたことを書いておけばめちゃめちゃ話広げてくれてかつ個人に関わる内容は隠しつつ相手に送ってくれる

- 24時間の範囲内でしかできない交換日記みたいな感じ？    

---

ちょっとレトロなターミナル風UI。かわ...いい？

---

技術スタック

フロントエンド

• Vue.js 3 (TypeScript)
• Vite (ビルドツール)
• PWA (Progressive Web App)
• Firebase Authentication (匿名認証)

バックエンド

• FastAPI (Python)
• WebSocket (リアルタイム通信)
• uvicorn (ASGIサーバー)

データベース

• Google Cloud Firestore (NoSQL)

AI：

• Google Cloud Vertex AI Gemini 2.5 Flash (メッセージ処理・匿名化)

インフラ：

• Google Cloud GKE Autopilot (Kubernetesコンテナオーケストレーション)
  • Cloud Logging
  • Cloud Monitoring
• Google Cloud Secret Manager (API Key管理)
• Google Cloud Build (CI/CD)
• Google Cloud Artifact Registry (コンテナイメージレジストリ)
• Cloudflare Tunnel (外部公開)
• Docker (コンテナ化)
• Kubernetes (Pod管理、自動スケーリング、ロードバランシング)
• GitHub (ソースコード管理)

開発環境：

• Amazon Q Developer (Claude sonnet 4)
  • コード・インフラの設計部分は自分で行い、実装をエージェントに任せました。
• VSCode Copilot (GPT-4.1)

構成図

Google Cloudの無料クレジットが余っているので"GCP染め"の構成になっています。インフラは楽しい。デプロイ失敗すると.......まあ.....

今回のハックツハッカソン期間中に使ったGCPの使用量はこちら

詳細

Firebase

• フロントエンド・バックエンドのToken生成はFirebase Authenticationを使用
  • 「IDとパスワード入力して...」って手順を無くしたかったので、匿名認証を使用し、Token発行と同時にUIDも発行することでユーザーIDとして使用しています。

Google Cloud || Firestore

• User, Room, Turnのデータ格納をしています。
• 7月に参加したAWSハッカソンでDynamoDBを使用したのですが、NoSQLが便利だったので今回も使用しました。

Google Cloud || Kubernates Engine (Autopilot Mode)

• Frontend, Backend, Proxy, cloudflaredのpodを動かしています。コア部分？
• Autopilotモードでクラスタを作成し、自動スケーリングやその他機能を使ってみてます
  • 自動スケーリングのテストするために負荷テストしようとしたけど認証が強固すぎてテストが通りませんでした()
• UIは結構見やすい？自宅鯖でもk8s構築再挑戦してみたいと思いました。

Google Cloud || Secret Manager

• 後述のVertexAIのAPIKEY管理！以上！！

Google Cloud || Cloud Build

• CI/CDパイプライン構築
  • 開発の初期段階から構築していたのですぐにデプロイできて便利でした。
  • さすが有料サービスって感じでWebUI上で設定ができて便利。

Google Cloud || VertexAI (Gemini 2.5 Flash)

• みんな大好きGemini
• 普通のAPI叩いても良かったのですがせっかくなのでVertexAIのAPIを（多分変わらない）
• AIによる情報統制（匿名化）の部分に使用しました。
• システムプロンプトは結構苦労しました。
• 途中で画像生成機能も入れようと思い色々進め、メンターの方々にもアドバイスをいただいたのですが最後の最後で「無料クレジット枠ではAPIは使えない」ことが判明。最初から調べとけや！！！！！！！！！！！！って言ってください()
• 本来はトークルーム要約＆プロンプト生成（Gemini 2.5 Flash）→ 画像生成（Gemini 2.5 Flash Image Preview (Nano Banana)）の予定でした
• 画像生成その他結構コストがかかることがわかりました。また、Google AI Proがいかにコスパに優れているかも実感しました。学生のみなさん登録してないのであれば学割１年間のやつしましょう。

Cloudflare Tunnel

• みんな大好きCloudflare Tunnel
• GKE内部にcloudflaredのpodを配置し、そこからCloudflare CDN経由で外部に公開しています。
• 簡単に使えるのにセキュアなの大好き♡
• ドメインはCloudflareで管理するのオススメです。メールのルーティングとかも簡単。

あとがき

• フロントエンドがターミナル風で刺さる
• Google Cloudめっちゃ使いやすい。普通に個人用途で使っても良さそう（自宅鯖くんは泣く模様）
• VertexAIにコーディング特化モデルっぽいのを後から見つけました。Claude sonnet 4とかも動かせるみたい。
• サーバーレス◎
• システムプロンプトは奥が深い by Cat
  • 匿名化されたメッセージがもしかしたらわかっちゃうカモ
• 画像生成機能を追加することができなかったので「画像生成用のプロンプトを生成するプロンプト」をここで供養します。