website: Ygg
機能面
現状の機能
- Syncボタンで再生同期
- アバター(という名の緑色の箱)をwasdキーで移動
- 簡易チャットでコメント共有
- 動画IDで再生する動画を選択
- 動画のミュート アンミュート
これから実装したい機能
- 再生したい動画によって部屋分け
- アバターエモート
- スマートフォンのブラウザからも動かせるようにする
モチベーションとアーキテクチャ選定
モチベーション
kubernetesを少しだけ触る機会があり、これは継続して使用しないと何も身につかないと思い何かを作ってみようと決心
...YoutubeのVRウォッチパーティーにするか！
アーキテクチャ選定
インフラ: kubernetes on AWS EKS
Dockerコンテナベースでアプリケーションのスケーリングができるということで学習意欲が湧くバックエンド: golang gin
バックエンドを静的型付け言語で書いてみたい & 流行に合わせてgoで書いてみたい → go framework間で比較 → 人気と実装の簡便さからginを選択フロントエンド: React
React か Vueかで迷う → React vs Vue.js、2021年に勢力図を広げるのはどちらでしょうか？ + いつかReact Nativeも学んでみたいVR 表現: Three.js
クライアントGPUでレンダリング処理できるWebGLを簡単に扱えるJavaScriptライブラリ UnityをWebGLビルドするという選択肢も考えられたが、Unity未経験のため断念フロントエンド - バックエンド 通信: Websocket
TCPとUDPで迷ったが、TCP(Websocket)のほうが実装&プロトコル管理の観点で簡単に思えたということと、高リアルタイム性が求められているわけではないので一旦Websocketを選択
折角なので未経験だが興味のある分野もりもりで試してみることに
システム構成図
- k8s クラスターはeksctl create clusterで作成。
- Ingress ControllerとしてAWS ALBを設定することで必要に応じてALBがプロトコルをhttps→wssにアップデートしてくれるらしく、Websocket通信を行う上では便利
- Route53でドメインを取得し、ACMで取得した証明書をあてる
詳しくは はじめてのdraw.ioでAWS EKSシステム構成図作成
開発Tips
以降このページを目次として開発時の記事を追加していく予定です！超初歩的なことからわからなかったので超初歩的なことから書く予定です。
↓執筆済み
- はじめてのdraw.ioでAWS EKSシステム構成図作成
↓ 雑に執筆予定
- Docker環境での開発(マルチステージビルドで軽量コンテナのススメ)
- AWS 基本事項(EKSはどのようなAWSリソースで成り立っているのか？)
- kubernetes 基本リソース(Node Pod Deployment Service Ingress)
- Nodejs(create react appとは webpack,babelとは)
- Go開発(Go playground, go.mod)
- Three.js(Three.jsでDOMエレメントをレンダリングする方法)
おわりに
qiita初投稿&めちゃめちゃ初学者なので、間違っている部分多々あると思います。ご指摘待ってます。