# Topa'z下書き

## インフラ担当
インフラ担当のニッシー☆です。インフラ構成について説明します。

### インフラ構成図
まずはこちらをご覧ください！（のちに1つずつ解説します）


### 前提と背景
今回は新規に3つのアプリがあります。

- 歴代作品を展示する展示場アプリ
- 新作アプリである「まさかり」アプリ
- 「まさかり」アプリに必要なレガシーアプリ

展示場アプリとまさかりアプリはフロントはSPA、バックはコンテナアプリになっています。
レガシーアプリはEC2の上のdockerで動かすことになっていました。

### ここがポイント

- AWSのほとんどのリソースをIaCツールであるTerraformで用意しています
- ElastiCacheやSecretsManagerはハッカソン中に初めて書きました
- Terraformを用いている理由はハッカソンという短時間でもインフラ要件に対して高速で確実に応えるためです。CDKよりも早いことが多い所感です。

- 全てSSL化
- 以下はハッカソンで開発したフロントやバックエンドのホスト一覧です。SSL化はそれぞれのAWSリソース（CloudFront、Amplify、ALB、EC2）によってやり方が変わりますが、設定しました。
- Lambdaの関数URLには自動で付いています。
- 展示場
- Rust製wasmフロント
- http://exhibition.yukinissie.com
- Go製バックエンド。REST API、websocket添、redisクラスタ付き
- https://location-provider.yukinissie.com
- まさかり投げアプリ（新アプリ）
- React SPA
- https://masakari.yukinissie.com
- Go製バックエンド。REST API、websocket添、redisクラスタ付き
- https://masakari-backend.yukinissie.com
- まさかり喰らいサイト
- https://legacy-stack.yukinissie.com/
- メトリクス取得API（AWS Lambda 関数URL）
- https://jqyf37xokyuyzxqharfzdelepq0lbrjw.lambda-url.ap-northeast-1.on.aws/
- 全ての環境にCI/CDが整えられています。
- GitHub Actionsに実装しています。
- 自動デプロイはインフラ屋の作業負荷を減らせて最高です。
- 実はElastiCache（Redis、Memcached）が冗長化のために複数台立っている
- 趣味です
- レガシースタック
- CentOS 7！

### 詳細

#### 展示場スタック

下記図の黄色の部分が中心です。


展示場フロントエンドスタックとバックエンドスタックに別れています。
フロントエンドスタックはアプリがRust製WASMであるため、AmplifyのCI上ではビルドできないのでGitHub Actions上でビルドし、コンテンツの配信基盤はCloudFrontとS3で作りました。
CloudFront＊S3の組み合わせの場合はCloudFrontのキャッシュパージをデプロイごとに行う必要がありますが、AWS SDKとLambda、それからS3のイベント通知の機能を組み合わせることで自動化させています。
バックエンドスタックはTerraformでFargateを組んでおりElastiCacheと通信できるようにしています。
WebSocketを実装したアプリが動くため、SSL化の要件に応えています。
ECSタスクのデプロイに[ecspresso](https://github.com/kayac/ecspresso)を用いています。詳細は省きますが、デプロイの自動化をする上でとても便利です。

#### まさかりアプリスタック
下記図の赤色の部分です。


バックエンドスタックには展示場アプリと同様にTerraformでFargateを構築しています。違いとしてはタスク定義内にバックエンドのサイドカーとしてWorkerアプリが追加されていることと、ElastiCache for Memcachedが追加されていることです。
他にはSecrets ManagerからOpenAI APIのトークンを取得することもしました。
EC2メトリクスを取得するスタックにはRustとLambdaを用いています。 `cargo lambda deploy` するだけでRustアプリがLambdaにデプロイされるので感動します。
フロントスタックはAmplifyにデプロイしているだけなので省略します。

#### レガシースタック

下記図の青色の部分です。

レガシーとは何か考えた時に、少なくとも可用性や冗長性のないものだと考え、EC2一台構成で組むことにしました。現代ならLightsailで簡単に構築できますが、そのようなものは無いと仮定しています。
EC2そのものはコンソールから手動で起動させましたが、EC2内部はAnsibleでプロビジョニングしています。地味に初めての経験でした。
まさか、ハッカソン中にSSHしてOSのアップデートや手動SSL証明書発行等をするとは思っていませんでしたが、原点回帰です。最初のハッカソンではEC2一台構成でした。
CentOS 7を選んだことがこだわりです。
SSHしたり、`git pull`で同期したり、`docker compose up -d`で環境起動させたり、SELinuxを無効化させていたり、あえてツッコミどころたくさんな環境にしています。レガシーとは（哲学）
他にもやったことがある気がしますが深夜帯で頭が回っていませんのでこの辺で失礼します。ニッシー☆でした。

PS. レガシースタックのメトリクスはCloudWatch経由で最初は取得していましたが、自作メソッドでリアルタイムに取れるようにしました。https://legacy-stack.yukinissie.com/metrics/

## 展示場LP担当

展示場LP担当(とEC2メトリクスAPI)のTanakaです。
今回のテーマがふきょうということで自分はRustを布教するためにRust(yew)でフロントエンド開発を行いました。

### [yew](https://yew.rs/ja/)
yewはRustのフロントエンドフレームワークでReactライクに開発することができます。(関数コンポーネントやhooksが使えます)
Rustでフロントエンド開発を行うなら現状これが最善かなと個人的には思います。(最新のversion=0.20でSSRにも対応しました...!)
スタイリングは周辺フレームワークが壊滅(数ヶ月更新されていない)状態なので無難にTailwind.cssを選択しました。

### Rust Onlyでフロントエンドを書くメリット

Rustで書けること。以上。
何を言っているのかわからないと思いますが現在それ以外ないというのが私の感想です。
Rustなので高パフォーマンス！というのはWASMにおいてはそうだったりそうでなかったりします。WASMからDOMを操作するコストが結構高いのでベンチマークもそんなにスコアがでなかったり・・・。
とはいえ今後改善されるようなので皆さんもRustでフロントエンドを書きましょう。

### e2eテスト
このアプリのe2eテストもRust([headless_chrome](https://crates.io/crates/headless_chrome))で書きました！
PuppeteerのRust版みたいなものです。

今回は展示場ということで某すぺしゃるなちゃっと風で展示物を見て回ることができるようにしました。
チャットもできるのでわいわいしてください！

### メトリクス取得API
`AWS SDK for Rust(CloudWatch)`を用いてCloudWatchに流れてきたEC2の`CPUUtilization`等を取得してJSONで返しています。
exampleコードが全然なくてどうやって取得するかわからなかったのですが、他言語と設計自体は一緒なので`AWS SDK for python`を参考にしてなんとかしました。

-----
今回のネストが深いコードです。これ以上にネストが深いコードを書いた方はこっそり教えて下さい。
(Rust言語特有の所有権の関係でブロックを作ってcloneしまくらないといけないで仕方のないことなんです。（言い訳

### キャラクター操作方法
- マウスでキャラをドラッグ
- WASD or 矢印キー
- 展示物をクリックでTopa'zのプロジェクトページが見れます
- 展示物の場所に行き、Enterボタンを押すとその展示物のサイトにジャンプします

# つくるものメモ

## 概要

- とりあえず今までの全部のサービスを動かす
- 新作どうしよう？
- ハックツハッカソンを布教しようぜ！！！
- 圧倒的な技術力とテストコードとnewrelicを差し込んで

ついでにマイクロサービス化！

- 奇声
- オリジナルリポジトリ：https://github.com/hackz-hackathon-giganoto/team-a
- フォーク先ディレクトリ：https://github.com/Carriage-Horse-Technologies/giganoto-kisei
- デプロイ先：https://kisei.yukinissie.com
- デスマTV
- red
- https://games.jyogi.net/
- 新作
- 各々のポートフォリオサイト（？）
- その他展示したい物
- JR四国のHP

## （Rust製）フロント

展示用のLPをWASMのSSRでやってみるの世界

- ハッカソンの過去作品のところに行くとジャンプする（/<service_name>）
- LPとかその他展示したい物は近づくとオーバーレイで表示
- で、新作よ

イメージ図は明らかに3Dだけど、別に2Dもよくね？
↑Gatherみたいな感じのやつでキャラを動かして、展示場にする（布教は満たす）
ステージの中心に新作を配置
マルチキャラクターに対応したい

**自分以外のユーザーの座標位置を更新するイベント**

{
    "action":"UPDATE_CHARACTER_POS"
    "characters": [
            {
                "pos_x":114.514,
                "pos_y":114.514,
                "url":"https://example.cloudfront.net/image/character_1.png"
                "user_id":"example-user-id"
            },..
        ]
}

**自分の位置をサーバーに通知するイベント**

{
    "action":"UPDATE_MY_POS",
    "pos_x":114.514,
    "pos_y":114.514,
    "user_id":"example-user-id"
}

チャットのスキーマ

{
    "action":"CHAT_MESSAGE",
    "user_id":"examper-user-id",
    "message":"hogehoge"
}


## 新作

新作アイデア募集！！！
我々にしか作れないもの...？
何だろう？

## 新作を考えなきゃ

とりあえず脳裏に浮かんだもの

- エンディングロールを作りたい
- ハッカソン的な文脈でのエンディング

## 新作

- まさかりを投げてサーバーに負荷を掛ける
- お前の技術力はその程度か？（双方に対する煽り）
- まさかりの強さ
- 鋭い指摘をするほど投げる物が強くなる
- サーバーから煽りが返ってくる
- サーバーが死んだらフロント側で「返事がない、ただのしかばねのようだ」と返す

## まさかりの投げ方

1. チャットを投げる
2. ＧＰＴ君からメッセージが返ってくる
3. みんなが投げたまさかりをブロードキャスト（どこかで聞いたアイデアだな）

## 表示するもの

-　チャットを投げるテキストボックス
-　皆のチャットが流れる（まさかり）
-　まさかりゲージ（東方的なあれ）
-　上側にＧＰＴ君のメッセージ

負荷を掛ける対象は展示会のインフラ群
-> 展示中のアプリを落とす

## 絶対に欲しい物

- [ ] サーバーが生きてるか死んでるかのステータスはほしい
- [ ] ＣＰＵ使用率,メモリ

## 取れたら欲しいもの
- [ ] 分間どのくらいアクセスが来ているか

これを各ＡＰＩ毎に提供（パーセンテージ）

{
    metrics:[
        {
            "name":"デスマTV",
            'cpu':11.4514,
            'memory':11.514,
            'traffic':114514
        },
                {
            "name":"デスマTV",
            'cpu':11.4514,
            'memory':11.514,
            'traffic':114514
        },...
    ]
}