最近個人開発が熱い ~多言語対応編~

最近個人開発が熱い ~多言語対応編 󰑔~ 2024/8/24 湘.なんか #1 @sugar235711

2 Sugar(@sugar235711) SWE || SRE GoとVTuberが好き登壇者紹介

3 Agenda 1. 個人開発しているサイト 2. 多言語対応について 3. まとめ

4 すぽじゅーる：https://www.vspo-schedule.com ぶいすぽっ！ (VTuberグループ)の配信予定を確認できるサイト &Bot 個人開発しているサイト

5 Webサイト：2000PV~3000PV/日　DiscordBotは270サーバー稼働公開から約 1年個人開発しているサイト

6 基本的には Vercelの機能をフル活用 (Hosting/Serverless Function/Logging/Analytics….) 現在旧APIから新APIへのリプレイスを行っている最中数ヶ月前までの超ざっくり構成個人開発しているサイト

7 2.1. 迫り来る多言語対応多言語対応問題発生

8 海外メンバーのデビュー多言語対応公式から海外 (EN)メンバーのデビューが発表された (2024/6/24)

9 海外メンバーのデビュー多言語対応デビューの盛り上がりに合わせて英語対応版をリリースしたい初配信は6/30 10:00AM(JST) 公式から海外 (EN)メンバーのデビューが発表された (2024/6/24)

10 海外メンバーのデビュー多言語対応デビューの盛り上がりに合わせて英語対応版をリリースしたい初配信は6/30 10:00AM(JST) 約5日間のスピーディーな実装が必要 🫠 ポケットマネーなのであんまりお金もかけすぎたくない
公式から海外 (EN)メンバーのデビューが発表された (2024/6/24)

11 多言語対応で最低限やる必要があったこと多言語対応 • タイムゾーン対応日/時間帯ごとに配信をまとめており、タイムゾーンの対応が必須 • コンテンツの翻訳配信タイトルなどのコンテンツを言語
設定によって翻訳したい

12 対応方針v1 多言語対応 • タイムゾーン対応リクエストに TimeZoneを含めてOffset分ずらして配信情報を取得 • コンテンツの翻訳
リクエストを Proxyして翻訳サーバーを通すように修正可能な限り既存実装は生かして手をつけない方針で進めた (リプレイスが控えている)

13 対応方針v1 多言語対応 • タイムゾーン対応リクエストに TimeZoneを含めてOffset分ずらして配信情報を取得 • コンテンツの翻訳
リクエストを Proxyして翻訳サーバーを通すように修正可能な限り既存実装は生かして手をつけない方針で進めた (リプレイスが控えている)

14 コンテンツの翻訳 v1 多言語対応 • 静的コンテンツ next-i18nextを使用固定文言はテキストを事前準備 /{locale}/hogeのパスを自動生成してくれる •
動的コンテンツ Google Cloudの Translation APIを使用最初の50万文字:無料以降100万文字ごと:$20

15 v1リリース🫠 多言語対応 • localeに対してdefaultのTimeZoneを指定した(ja: JST, en: PDT) •
(何故か)昔からISRで動的にページを更新していた名残りで、ビルド時に表示に必要な動画情報が全て翻訳されるようになっていた(!?)

16 コスト大爆発多言語対応 Vercel Data Cache Translation API ISRで数千の動画が一気に翻訳 &Vercelのキャッシュが異常に増えた
諸々合わせて7万円くらいが消し飛んだ🫠

17 コスト大爆発の問題点多言語対応 • 翻訳対応前の雑な見積もり動画の情報にノイズが多い &Translationが文字数での課金だった ex) .｡:+* ﾟ
゜ﾟ *+:｡.｡:+* ﾟ゜ﾟ *+:｡.｡.｡:+* ﾟ゜ﾟ *+ • ISRの使い方がおかしい頻繁に更新されるページはキャッシュ +SSRの方が良い • Firestore無駄なクエリを投げまくっていた適切なFilter+Limitをする

18 コスト大爆発の問題点多言語対応 • 翻訳対応前の雑な見積もり動画の情報にノイズが多い &Translation APIが文字数での課金だった ex)意味を持たない記号列 (
.｡:+* ﾟ゜ﾟ *+:｡.｡:+* ﾟ゜ﾟ *+:｡.｡.｡:+* ﾟ゜ﾟ *+ )やURLなど • ISRの使い方がおかしい頻繁に更新されるページはキャッシュ +SSRの方が良い • Firestore無駄なクエリを投げまくっていた適切なFilter+Limitがつけられていない

19 解消方針多言語対応 Cloudflare WorkersとKVでのキャッシュ +Next.js(Page Router)での SSR化によるData Cache削減翻訳方法の代替
(Cloudflare AI GatewayとGPT-4o-miniの活用)

21 Data Cache削減多言語対応 [Frontend] ・getStaticProps -> getServerSideProps ・画面表示に必要な加工処理は ClientSideへ移す
・独立複数の APIをPromise.allで並行に実行して高速化

22 Data Cache削減多言語対応 [Backend] ・KVにリクエストとレスポンスをキャッシュ・Contextを使用しバックグラウンドで翻訳 ->KVへ保存

23 ExecutionContext 多言語対応 Cloudflare Workers等のServerless環境で、レスポンスを返すのをブロックせずにバックグラウンドで処理を続行できる仕組みを提供 (ctx.waitUntil)

24 Data Cache削減多言語対応 Data Cache Read/Writeがほぼ0になった🎊 (月$50 -> $0)

25 SSR対応の裏側多言語対応 SSR対応後next/linkによるページ遷移でエラーが起きたミドルウェアが存在する場合、 Linkをクリックしても getServerSidePropsが呼ばれないというもの (何故かProductionでしか再現しない )
vercel/next.js#38408

26 SSR対応の裏側多言語対応 Issueにはx-middleware-cacheを無効にすれば解決するというコメントがあったが解決しなかった →next/Linkの使用をやめ、 MUIにあるLink Componentを使用するように変更

28 GPT-4o miniの登場多言語対応正直各LLMのAPIは個人で使うには高すぎたが GPT-4o miniの登場で個人でも手が届くようになった (1M Tokenあたりin:$0.15/out:$0.60)
Translation API

29 雑計算多言語対応 Translation APIで48000円 $1=160円(6/28時点) ↓ $300分の追加料金 100万文字あたり $20課金発生
↓ 1500万文字くらいを翻訳した？ ↓ 1文字1tokenとして in/outも同じToken数とすると OpenAIを使用した場合は 3000万Token程度？(1M Tokenあたりin:$0.15/out:$0.60) in: 15×$0.15 out: 15×$0.60 … $11.25

30 2.1. 迫り来る多言語対応多言語対応もしかしてめっちゃ安い ?

31 部分的に置き換えてみた (配信情報のタイトルのみ ) 多言語対応翻訳対象を減らしたのもあるが、翻訳自体のコストは大幅に削減できた

32 翻訳時の工夫多言語対応 Cloudflare AI Gatewayを通した・LoadBalancing/RateLimiting/Caching諸々対応している(なんと無料) ・各LLMのSDKがそのまま使える

33 コスト大爆発多言語対応 Vercel Data Cache Translation API ISRで数千の動画が一気に翻訳 &Vercelのキャッシュが異常に増えた
諸々合わせて7万円くらいが消し飛んだ🫠 解決

34 現在~ 多言語対応 UI/UXの強化、DiscordBotの多言語展開、中国圏への展開 ...etc [UI/UX] • 言語やタイムゾーンの選択が可能な UIの実装 •
言語やTZを選択済みのユーザーはリダイレクトさせる仕組み [Backend] • マルチクライアント対応とスキーマレスな開発体験の改善のため GraphQLの導入、 RDBへの移行

35 • 自らの金を溶かし、コスト意識を持つ大切さを改めて感じた • でも個人開発は楽しいまとめ

最近個人開発が熱い ~多言語対応編~

最近個人開発が熱い ~多言語対応編~

More Decks by sugar-cat

Featured

Transcript