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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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