Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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