最近個人開発が熱い ~モニタリング強化編v0.1.0~

最近個人開発が熱い ~モニタリング強化編v0.1.0~ 2024/11/7 akihabara.any #2 @sugar235711

2 sugar cat(@sugar235711) 社会人3年生 SREもどき VTuberが好き前編登壇者情報 @sugar235711 @sugar-cat7

3 Agenda 1. 個人開発しているサイトについて 2. 多言語対応で起きた問題 3. モニタリング強化 4. まとめ

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

5 Webサイト：DAU 1000弱(2000~3000PV)　 DiscordBot: 295サーバー稼働公開から約1年半個人開発しているサイト

6 4ヶ月前にWebサイトの多言語対応を行う過程で一部ページをISRからSSRへ移行した。多言語対応で起きた問題

7 4ヶ月前にWebサイトの多言語対応を行う過程で一部ページをISRからSSRへ移行した。 →API呼び出しの回数の増加、レイテンシが気になるようになってきた。多言語対応で起きた問題

8 4ヶ月前にWebサイトの多言語対応を行う過程で一部ページをISRからSSRへ移行した。 →API呼び出しの回数の増加、レイテンシが気になるようになってきた。多言語対応で起きた問題当時はメトリクスを収集しておらず、計測ができていない状態だった

9 4ヶ月前にWebサイトの多言語対応を行う過程で一部ページをISRからSSRへ移行した。 →API呼び出しの回数の増加、レイテンシが気になるようになってきた。多言語対応で起きた問題

10 Datadog Integrationを利用し、Vercelのメトリクスを収集するようにしたモニタリングを強化

11 Datadog Integrationを利用し、Vercelのメトリクスを収集モニタリングを強化システムの状況: ダッシュボード外形監視：複数リージョンからのトップページアクセスブラウザテスト:言語・TZ切り替え機能のE2Eテスト

12 APIのリクエスト数やメモリ使用量、外形監視の状況などを1つのダッシュボードにまとめるダッシュボード作成モニタリングを強化

13 APIのリクエスト数やメモリ使用量、外形監視の状況などを1つのダッシュボードにまとめるダッシュボード作成モニタリングを強化時系列でメトリクスを表示できるので施策に対しての効果が分かりやすい (この時はキャッシュの改善)

14 Webサイトのトップページのレイテンシやエラー率などをモニタリング閾値を超えたらDiscordにアラート通知外形監視モニタリングを強化

15 Webサイトのトップページのレイテンシやエラー率などをモニタリング閾値を超えたらDiscordにアラート通知外形監視モニタリングを強化複数のリージョンからリクエストを送れるので、日本国外からのリクエストの検証がしやすくなった

16 一連のシナリオを作成し、DatadogでE2Eテストを行えるブラウザテストモニタリングを強化

17 一連のシナリオを作成し、DatadogでE2Eテストを行えるブラウザテストモニタリングを強化動作環境を複数の組み合わせで選択可能(端末やブラウザ)ので、デグレ検知などに役立つ

18 Datadog Integrationで個人開発サイトのモニタリングを改善したまとめ

sugar-cat