### フロントエンド
フロントエンドの技術概要は以下の通りです。

- Nuxt.js
- SSR
- TypeScript
- TailwindCSS
- fortawesome
- CompositionAPI
- Express
- axios
- moment

フロントエンドフレームワークとしてNuxt.js(TypeScript環境)を利用しました。これは担当のニッシー☆がフロントエンドへの理解を深めたいという理由で使っています。
スタイリングのためにTailwindCSSを用いています。
本番環境でSSRを実現させるためにWebサーバーとしてExpressを使用し、その中でNuxtアプリを読み込んで実行させています。
そのためのNodeランタイムを用意するために先述のAzureAppServiceにデプロイしています。
カメラの利用をブラウザ上で許可させるために本番環境はSSL化を意識して構築しています。

### バックエンド
バックエンドの技術概要は以下の通りです。

- Gin
- Go
- Redis
- HTTP通信
- WebSocket通信

Go言語製バックエンドフレームワークのGinを使用してアプリ用のAPIを開発しました。
HTTP通信とWebSocket通信の２つの通信技術を利用しています。HTTP通信は画像のアップロードとダウンロード、WebSocket通信は背景画像の投票機能にて用いています。
こちらもインフラはAzureAppServiceのコンテナ基盤を用いています。

### インフラ
インフラ環境の構成図は以下の通りです。NodeランタイムやDocker基盤を搭載したAzureAppServiceをそれぞれ立てました。
CI/CDパイプラインをGitHubActionsで構成しており、mainブランチにpushするだけでデプロイが完了します。
投票機能で用いた値等はAzureCacheForRedisで永続化させています。