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

Transcript

1. 最近個人開発が熱い ~多言語対応編 󰑔~ 2024/8/24 湘.なんか #1 @sugar235711
2. 2 Sugar(@sugar235711) SWE || SRE GoとVTuberが好き 登壇者紹介
3. 3 Agenda 1. 個人開発しているサイト 2. 多言語対応について 3. まとめ
4. 4 すぽじゅーる：https://www.vspo-schedule.com ぶいすぽっ！ (VTuberグループ)の配信予定を確認できるサイト &Bot 個人開発しているサイト
5. 5 Webサイト：2000PV~3000PV/日　DiscordBotは270サーバー稼働 公開から約 1年 個人開発しているサイト
6. 6 基本的には Vercelの機能をフル活用 (Hosting/Serverless Function/Logging/Analytics….) 現在旧APIから新APIへのリプレイスを行っている最中 数ヶ月前までの超ざっくり構成 個人開発しているサイト
7. 7 2.1. 迫り来る多言語対応 多言語対応 問題発生
8. 8 海外メンバーのデビュー 多言語対応 公式から海外 (EN)メンバーのデビューが発表された (2024/6/24)
9. 9 海外メンバーのデビュー 多言語対応 デビューの盛り上がりに合わせて英語対応版をリリー スしたい 初配信は6/30 10:00AM(JST) 公式から海外 (EN)メンバーのデビューが発表された (2024/6/24)
10. 10 海外メンバーのデビュー 多言語対応 デビューの盛り上がりに合わせて英語対応版をリリー スしたい 初配信は6/30 10:00AM(JST) 約5日間のスピーディーな実装が必要 🫠 ポケットマネーなのであんまりお金もかけすぎたくない 公式から海外 (EN)メンバーのデビューが発表された (2024/6/24)
11. 11 多言語対応で最低限やる必要があったこと 多言語対応 • タイムゾーン対応 日/時間帯ごとに配信をまとめており、タイ ムゾーンの対応が必須 • コンテンツの翻訳 配信タイトルなどのコンテンツを言語 設定によって翻訳したい
12. 12 対応方針v1 多言語対応 • タイムゾーン対応 リクエストに TimeZoneを含めてOffset分 ずらして配信情報を取得 • コンテンツの翻訳 リクエストを Proxyして翻訳サーバーを 通すように修正 可能な限り既存実装は生かして手をつけない方針で進めた (リプレイスが控えている)
13. 13 対応方針v1 多言語対応 • タイムゾーン対応 リクエストに TimeZoneを含めてOffset分 ずらして配信情報を取得 • コンテンツの翻訳 リクエストを Proxyして翻訳サーバーを 通すように修正 可能な限り既存実装は生かして手をつけない方針で進めた (リプレイスが控えている)
14. 14 コンテンツの翻訳 v1 多言語対応 • 静的コンテンツ next-i18nextを使用 固定文言はテキストを事前準備 /{locale}/hogeのパスを自動生成してくれる • 動的コンテンツ Google Cloudの Translation APIを使用 最初の50万文字:無料 以降100万文字ごと:$20
15. 15 v1リリース🫠 多言語対応 • localeに対してdefaultのTimeZoneを指 定した(ja: JST, en: PDT) • (何故か)昔からISRで動的にページを更新 していた名残りで、ビルド時に表示に必要 な動画情報が全て翻訳されるようになって いた(!?)
16. 16 コスト大爆発 多言語対応 Vercel Data Cache Translation API ISRで数千の動画が一気に翻訳 &Vercelのキャッシュが異常に増えた 諸々合わせて7万円くらいが消し飛んだ🫠
17. 17 コスト大爆発の問題点 多言語対応 • 翻訳対応前の雑な見積もり 動画の情報にノイズが多い &Translationが文字数での課金だった ex) .｡:+* ﾟ ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *+:｡.｡.｡:+* ﾟ ゜ﾟ *+ • ISRの使い方がおかしい 頻繁に更新されるページはキャッシュ +SSRの方が良い • Firestore無駄なクエリを投げまくっていた 適切なFilter+Limitをする
18. 18 コスト大爆発の問題点 多言語対応 • 翻訳対応前の雑な見積もり 動画の情報にノイズが多い &Translation APIが文字数での課金だった ex)意味を持たない記号列 ( .｡:+* ﾟ ゜ﾟ *+:｡.｡:+* ﾟ ゜ﾟ *+:｡.｡.｡:+* ﾟ ゜ﾟ *+ )やURLなど • ISRの使い方がおかしい 頻繁に更新されるページはキャッシュ +SSRの方が良い • Firestore無駄なクエリを投げまくっていた 適切なFilter+Limitがつけられていない
19. 19 解消方針 多言語対応 Cloudflare WorkersとKVでのキャッシュ +Next.js(Page Router)での SSR化によるData Cache削減 翻訳方法の代替 (Cloudflare AI GatewayとGPT-4o-miniの活用)
20. 20 解消方針 多言語対応 Cloudflare WorkersとKVでのキャッシュ +Next.js(Page Router)での SSR化によるData Cache削減 翻訳方法の代替 (Cloudflare AI GatewayとGPT-4o-miniの活用)
21. 21 Data Cache削減 多言語対応 [Frontend] ・getStaticProps -> getServerSideProps ・画面表示に必要な加工処理は ClientSideへ移す ・独立複数の APIをPromise.allで並行に実行して高速化
22. 22 Data Cache削減 多言語対応 [Backend] ・KVにリクエストとレスポンスをキャッシュ ・Contextを使用しバックグラウンドで翻訳 ->KVへ保存
23. 23 ExecutionContext 多言語対応 Cloudflare Workers等のServerless環境で、レスポンスを返すのをブロックせずに バックグラウンドで処理を続行できる仕組みを提供 (ctx.waitUntil)
24. 24 Data Cache削減 多言語対応 Data Cache Read/Writeがほぼ0になった🎊 (月$50 -> $0)
25. 25 SSR対応の裏側 多言語対応 SSR対応後next/linkによるページ遷移でエラーが起きた ミドルウェアが存在する場合、 Linkをクリックしても getServerSidePropsが呼ばれない というもの (何故かProductionでしか再現しない ) vercel/next.js#38408
26. 26 SSR対応の裏側 多言語対応 Issueにはx-middleware-cacheを無効にすれば解決するというコメントが あったが解決しなかった →next/Linkの使用をやめ、 MUIにあるLink Componentを使用するように 変更
27. 27 解消方針 多言語対応 Cloudflare WorkersとKVでのキャッシュ +Next.js(Page Router)での SSR化によるData Cache削減 翻訳方法の代替 (Cloudflare AI GatewayとGPT-4o-miniの活用)
28. 28 GPT-4o miniの登場 多言語対応 正直各LLMのAPIは個人で使うには高すぎたが GPT-4o miniの登場で個 人でも手が届くようになった (1M Tokenあたりin:$0.15/out:$0.60) Translation API
29. 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. 30 2.1. 迫り来る多言語対応 多言語対応 もしかしてめっちゃ安い ?
31. 31 部分的に置き換えてみた (配信情報のタイトルのみ ) 多言語対応 翻訳対象を減らしたのもあるが、翻訳自体のコストは大幅に削減できた
32. 32 翻訳時の工夫 多言語対応 Cloudflare AI Gatewayを通した ・LoadBalancing/RateLimiting/Caching諸々対応している(なんと無料) ・各LLMのSDKがそのまま使える
33. 33 コスト大爆発 多言語対応 Vercel Data Cache Translation API ISRで数千の動画が一気に翻訳 &Vercelのキャッシュが異常に増えた 諸々合わせて7万円くらいが消し飛んだ🫠 解決
34. 34 現在~ 多言語対応 UI/UXの強化、DiscordBotの多言語展開、中国圏への展開 ...etc [UI/UX] • 言語やタイムゾーンの選択が可能な UIの実装 • 言語やTZを選択済みのユーザーはリダイレク トさせる仕組み [Backend] • マルチクライアント対応とスキーマレスな開発 体験の改善のため GraphQLの導入、 RDBへ の移行
35. 35 • 自らの金を溶かし、コスト意識を持つ大切さを改めて感じた • でも個人開発は楽しい まとめ