動作内容

AWSアカウントを参照してリソース(EC2、RDS、ALB)を取得し、各インスタンスごとに3Dキャラクターを表示します。 3Dキャラクターとはチャットをすることができ、個性豊かなキャラクターとの対話を通じてAWSと仲良くなることができます。

3Dキャラクターはリソースの負荷状態やコストに応じて見た目や言動が変化します。例えば、CPU使用率が高い場合はキャラクターが疲れた表情をし、逆にリソースに余裕がある場合はリラックスした表情になります。

技術構成

構成図

フロントエンド

github : https://github.com/IOATofu/aws-friends-frontend

使用Asset

レッサーモクリ VRMレッサーモクリ：色改変に使用 3D Cartoon Village Female Runner Animset Anime Girl Idle Animations Free Unity-Chan!(モーションデータのみ)

機能概要

インスタンスの状況がわかる！

稼働状況に合わせてフレンズたちの動きが変わる！使用料金に合わせて体の大きさが変わる！一部アニメーションは自作！

AWSの各種インスタンスと話せる！

AWS Bedrock (Sonnet Clude 3.5) 搭載！自分のサービスについてなんでもわかる！

バックエンド

GitHub : IOATofu/aws-friends-backend

Fast API
AWS Bedrock (Sonnet Clude 3.5)
Boto3

バックエンド/インフラの注目ポイント

AWSをフル活用したサーバーレス構成
- Code Build & Code Pipelineを活用したCI/CD デプロイが成功/失敗するとDiscordに通知してくれるよ
- ECS & Fargateを用いたコンテナベースのホスト
- AWS Bedrockを活用したLLM活用
高負荷にも耐えられるAPI構成
- Cloudfrontでのキャッシュによる高速化
- Fargateによるオートスケーリング
リアルタイムコスト推定
- インスタンスの起動時間と料金を用いてリアルタイム料金推定 Pricing APIを利用して最新の価格を自動取得！
AWS CDKを活用したIaC
- TypeScriptによるAWSリソースの管理
- 再現性のある環境構築を実現

苦しかったこと

AWS Code PipelineでSourceをGitHubにしたときに、トリガーのブランチ以外のプロパティをCDKで編集できなかった...（ゴリ押しで解決）

  const pushFilterJson = {
      Branches: {
        Includes: ['main'],
      },
      FilePaths: {
        Includes: ['api/*', 'docker/api/*'],
      },
    };
    const cfnPipeline = buildPipeline.node.defaultChild as codepipeline.CfnPipeline;
    // Triggers プロパティを上書き
    cfnPipeline.addPropertyOverride('Triggers', [
      {
        GitConfiguration: {
          Push: [pushFilterJson],
          SourceActionName: sourceAction.actionProperties.actionName,
        },
        ProviderType: 'CodeStarSourceConnection',
      },
    ]);

元気なアニメーションはいくらでも素材があったが，疲れたアニメーションはなかったので自作した

AWS Friends

AWSのリソース状態を女の子の姿でかわいく可視化

推しアイデア

作った背景

推し技術

プロジェクト詳細