3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

kubernetes(AWS EKS)+go gin+React+Three.js+websocketでVR YouTube ウォッチパーティー作ってみた

Last updated at Posted at 2021-11-28

website: Ygg

VR watch partyの様子 ## 機能面

現状の機能

  • 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初投稿&めちゃめちゃ初学者なので、間違っている部分多々あると思います。ご指摘待ってます。

参考

Golang フレームワーク比較

React vs Vue.js、2021年に勢力図を広げるのはどちらでしょうか?

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?