Deep Dive to Unimory!
2K Views
March 15, 24
スライド概要
個人開発集会でお話しした、Unimoryの詳細な技術情報についての発表スライドです。
にゃーん
関連スライド
各ページのテキスト
Deep dive to Unimory $echo “失敗と成功の Unimory の技術” 撮影OK, 公開OK このスライドは後日サーバーにて公開される予定です。 つきみ
$whoami Deep Dive Unimory つきみ AGE = 16 (2008/01/30) SCHOOL = S High School START_PROGRAMMING_AT = 2019 I_USE = [TypeScript] SKILL = [DESIGN, CODING] BEGINNER = true わ...私高校生...初心者です...
$help Unimoryって何？ Deep Dive Unimory モダンなイベントカレンダー Unimory は2023年12月下旬からの開発で何回も方針を変えており、 方針の変更と Unimory の歴史について紹介します！ つきみ
$point Deep Dive Unimory 私が作ったイベントカレンダーのポイント 繰り返しに対応 モダンでシンプル Google OAuthを使った楽々ログイン 安価な費用で動かせる つまり、ただの自己満 つきみ
$concept Deep Dive Unimory メンテナンスしやすい お財布に優しい やったことのない世界に飛び込む つきみ
$concept Deep Dive Unimory メンテナンスしやすい できる限り多くの作業を委託させ、 プログラミングだけに集中できる環境を作る。 マネージドデータベースを採用することで、データベースの管理にかかる人的資源を節約し、 できるだけ維持管理ではなく、開発そのものに注力できる環境を作り上げる。 Cloudflareを主軸とした管理によって、低コスト、高パフォーマンスを実現するとともに、 多種多様な管理画面を行き渡らなくて済むように開発段階では設定 つきみ
$concept Deep Dive Unimory お財布に優しい 東京都の最低賃金に近い金額で働くアルバイターの 私でも、無理なく払える金額で動かす。 Cloudflareを採用することで、意図しない高額な金額の請求リスクを減らせるほか、 自宅サーバーではできないような低レイテンシ（データベースの応答時間を除く）、高可用性を実現した。 データベースもできるだけ低コストであったり、無料枠のものを選定した。 つきみ
$concept Deep Dive Unimory やったことのない世界に飛び込む はじめてのOAuth 2.0に挑戦したり、 データベースとかいうやつを触ったり、Remixを使ったり... 書籍などを読み漁ったり、AI、Google検索で多くの情報を得ながら、自分のやったことのない分野について 多く学習しました。Zennのスクラップに情報を垂れ流しながら、自分の調べたこと、 知ったことについて多くの情報を得た。将来にわたっても絶対に使うことがあるであろう技術だと思う。 つきみ
$tech --history Deep Dive Unimory Dec, 2023 - Jan, 2024 Hono Neon Cloudflare この時点でフロントエンドは ありませんでした Jan, 2024 - Feb, 2024 Remix Neon Upstash Cloudflare Feb, 2024 - Mar, 2024 Remix PlanetScale Cloudflare Azure 今後登場予定！ Remix Deno Hono Cloudflare GCR
$tech --December Deep Dive Unimory とりあえずプログラムを作る！ 私はフロントエンドだけやってあとはやり残すことがよくあったので、そうであってはならない！と珍しく バックエンドから作り始めたのが12月。PostgreSQLとCloudflareがなんか好きだったのでとりあえず、その二つをチョイス。 当時知っていた技術をいろいろぶち込んだ 闇鍋的ソースコードでした。 ORMはDrizzle ORMが採用され、type-safeな データベースの管理が可能です。 （使いこなせるとは言ってない） Hono Neon Cloudflare この時点でフロントエンドは ありませんでした
$tech --Jan あけおめ！ことよろ！認証！ 新年くらい休めやと過去の自分に言いたいですが、認証を作ってました。 lucia-authでGoogle OAuth 2.0の認証に成功しはしゃいでました。 Remix Neon Upstash Cloudflare Deep Dive Unimory
$oauth book --share ここでちょっと休憩！ OAuthが分からない？ それならAuth屋さんめっちゃいいよ！ OAuthのコードとかスコープとかが全く分からなかった自分が、 「こういうことだったんだ！」と分かった気になれた良書です！ お値段も電子本と物理本で1,600円といい感じのお値段！ ぜひお手元に取ってみては？ https://authya.booth.pm/items/1296585 Deep Dive Unimory
$tech --Feb 今年の1/6終わったよ！！！マジかよ！！！ とか言いながら作ってました。 lucia-authをやめ、remix-authへ、 またブランチ機能がある PlanetScaleに切り替えてみた結 果、これが大ハマりしました！ これは便利だぞ！ Remix PlanetScale Cloudflare Deep Dive Unimory
$tech --Feb --KV RemixのSessionが結構便利 このサービスはCloudflareにベンダーロックインされに 行っています。それはさておき、RemixではSessionを管理 するにあたって、Cloudflare KVでセッションを管理するとい う手段を提供しています。 これ、結構よくない？と思いました。 自らでRedisを使いうんたらコードを書かなくても、 Cloudflareの環境でさえあれば、ささっとSessionを書ける！ これが地味に便利だと思いました Deep Dive Unimory
$tech --Feb --planetscale データベースのブランチは いくらあってもうれしいですからね。 PlanetScaleはスキーマの変更をDevブランチに適用させ、 その適用をメインブランチにGitのようにマージさせること ができます！ 最悪スキーマ変更をミスっても30分以内ならいつでも元デー タにロールバック！ ダウンタイムもないため、これがSQL初心者の自分に 「これすげー！」って感動をもたらしてくれた https://planetscale.com/features/branching Deep Dive Unimory
$tech --Mar Deep Dive Unimory 生活リズムが狂いながら大量のコードをまき散らして走り抜けたハッカソン 容量のためにもwebpに変換する ようにHonoで簡易的な変換 システムを投入させ、画像の保管 にAmazon S3 互換の Cloudflare R2 を採用。変換システムはオートデ プロイも実装。 Remix Hono PlanetScale Cloudflare Azure
Next: データベースの選択と失敗 ハッカソン完走！ そこにやってきた衝撃のお知らせ！？
PlanetScale forever ！ ！ 止 廃 枠 無 料 ！
PlanetScale forever ！ ！ 止 廃 枠 無 料 ！
ROUND 1 OR
選ばれたのは、 でした。
$database select You は何しに Deep Dive Unimory へ？ 無料！ PostgreSQLだから！ postgre-jsはCloudflare Workersでも動くから！
$database select Deep Dive Unimory にして失ったもの 速度（1900msほどかかるように） （追加料金無しの）ブランチ
$database select なぜ Deep Dive Unimory じゃないの？ ORMがMySQL 5.7（TiDB 7.1）に非対応 drizzle-team/drizzle-orm#1056 Issueを参照
$database select Deep Dive Unimory を諦めたわけではない TiDB v7.5 (Latest Stable)では、MySQL 8.0をサポート TiDB Serverlessにv7.5が登場したら移動させる予定 ただ、TiDB以外にもCockroachは気になっているが、それはまた別の話
それで、本当にいいのか？ 何か大切なものを忘れてないかい？
ほんとにSupabaseでいいのかい？ 何かプロダクションで大切なものを忘れとるな
プロダクションで大切なもの 安定性 将来を見据える 万が一、を考える SLA 段階的な金額設定 バックアップ
安定性（SLA） エンタープライズのみ
将来を見据える（段階的金額設定） 必要なのはデータベースだけ。それに払える金額ではない...
万が一、を考える（バックアップ） USD $25~
私は（自称）プログラミング初心者。 もしミスったらたとえ初心者であろうが、構わず 世間の目は必ず冷たくなる... データの損失だけは絶対にしたくない！！！
それならサーバーを移動させて契約しないと！ とりあえず銀行口座を...
Supabaseは無理でした
SELECT managed_database FROM me; Deep Dive Unimory これが全部ほしい。 SLA 段階的な金額設定 バックアップ さらに、個人で趣味でたしなむプロジェクトのため、 できる限り信頼性が高く、低価格なものを チョイスする必要がある。
$use nosql (y/n) Deep Dive Unimory 確かに信頼性は高いし、低価格。 おまけに使いやすいものもある。 今回の場合はすでにRDB向けのORMで動作することを前提に プログラムを書いていたため、NoSQLを採用するには、 プログラムの書き直しが必要なことも考えた。 だけど...
$use nosql (y/n) トランザクション問題めんどい Deep Dive Unimory
$use rdb (y/n) Deep Dive Unimory どーちーらーにしよーうかなー
$use rdb (y/n) Deep Dive Unimory 実際に比較した結果を載せたかったが... メンタルの問題で開発が滞っているので、さっくりとした違いだけ... $15 $15 SLA 近隣リージョン 容量 99.99% 日本 25GB SLA 近隣リージョン 容量 No シンガポール 10GiB Vultrは一部機能が$15プランでは使用できないため、 今後この2つで実際に契約し、比較させます。
$tech --experimental true Unimoryの将来のお話 暫定的にフロントエンドとバックエン ドを同時にRemixで作ったが、コー ディングにおいて混乱が発生している ため、分離計画を進めている。 Remix Deno Hono PostgreSQL Cloudflare Google Cloud Run Upstash Deep Dive Unimory
$tech --experimental true --deno Denoの採用理由 構築やテスト、各種開発環境のセットアップをあ まり考えなくていいため、Denoを採用しました。 このサービスの方針として、メンテナンス性、 やったことない世界に飛び込むという方針があり ます。 その方針に則りDenoを採用しました。 ただ、Denoでは使えないnpmパッケージのCLIツー ルがあったりしたので、そこは苦戦した部分でし た。 それ以上に信頼性、利便性は高いものだと評価で きると思います。 Deep Dive Unimory
$tech --experimental true --auth 認証システムの変更予定 これまで認証システムとしてremix-authを採用し ていたが、バックエンドが分離することを受け て、@auth/coreの採用を予定しています。 現時点で開発中のため、すぐの実装は考えていま せんが、どの環境になっても使い続けることがで きるのは、メンテナンス性がいいのに加えて、 データベース選択の際に課題に挙がった、将来を 見据えた運用というのに該当すると思います。 Deep Dive Unimory
$uni ls issues Deep Dive Unimory ロギング 現時点でロギングをきちんとは行っていないため、ユーザーに不正利用されようが、なすすべがない かなり危うい状態であるため、リリースさせるまでにロギングをきちんと整備し、 データを適切に安全に保管する方針を導き出さないといけない。 コミュニティの形成 基本的にVRChatterは、X（旧Twitter）、Discord、Misskeyなどでコミュニティを形成させやすいため、 コミュニティの形成に失敗すると間違えなく衰退する可能性がある。そこで、コミュニティの形成について 具体的な方針であったり、アクションを考えないといけない ガイドラインの整備 「えっちなのはダメ！死刑！！！」みたいな曖昧な表現から変える必要がある
$uni ls issues Deep Dive Unimory 共通時刻とタイムゾーン Unimoryではすべての時間を管理するにあたって、UTCでのデータ格納を原則にしています。 どこがUTCで、どこがタイムゾーンの影響を受けているのかを精査し、きちんと検証すべきである。 VRChat限定にすることによる、小規模さ VRChatで形成される市場の大半は3Dキャラクター、衣装、VR機器に限られており、 それ以外のコンテンツでのマネタイズ、コミュニティ形成ははっきりと言って難易度が高いものだと思われ るため、将来的にはVRChat以外の幅広い場所に合わせた拡大が必要である認識。 問題の早期発見と深刻化しないような設計 万が一何かしらデータに問題が発生した場合、すべてのリクエストに影響が出る形から、 そのデータだけ何かしらのフォールバックを表示させる処置が必要。 Sentryでの情報トラッキング、Denoの採用によるTestコーディングの簡素化などを期待している。
以上、Deep Dive to Unimoryでした！ 皆様の技術選定の悩みを解決するような話題がありましたら幸いです！ この後、質問時間がある場合はご質問いただければ、可能な範囲内でお答えします！ 長い発表にはなりましたが、みなさんご清聴ありがとうございました。 Have a happy hacking! つきみん