ISUCON練習に使えるベンチマーカーWeb UIを作った話

3/12 NSEEMにて発表した際のスライドです。
ISUCONの競技環境を再現して練習する際、ベンチマークを実行するのが少々めんどくさいことがあります。このスライドでは、この問題を解決するために1週間ほどで開発したベンチマーカーWeb UIを紹介します。

Transcript

1. ISUCON練習に使える ベンチマーカー Web UIを作った話 logica from
2. 軽く自己紹介 • logica • Otaku Project 所属(?) • 東京工業大学デジタル創作同好会traP 所属 • 普段やってること • Goを使ったWebアプリケーションのAPIサーバーを書いてる • Webアプリケーションのクライアントも書ける • この春はインターンを2つ入れました • 最近触ってる / 興味ある技術スタック • Go・RDB・gRPC(-web)・Kubernetes・イベント駆動アーキテクチャ • TypeScript・React・Recoil・Emotion
3. ISUCON is 何 • ISUCON (Iikanjini Speed Up Contest) • Webアプリケーション パフォーマンスチューニングコンテスト • LINE株式会社が運営 • Webアプリケーションのサーバーを高速化する • クライアントの静的ファイル配信 + APIサーバー • 最近はアプリ + RDB + リバースプロキシが1台に入っている • 「ベンチマーカー」と呼ばれる、仮想ユーザーのシミュレーターが実 際にHTTPリクエストを飛ばし、成功したリクエストの数によってス コアを付ける • 詳しくは「ISUCON」で検索！ (https://isucon.net/)
4. ISUCON is 何 僕は NTT様が主催したISUCONライクなイベントで、 最終結果1位が14,000点超だった中 -80,000点で競技を終えたくらいには ISUCONが好きです
5. 練習がしたい！ • ここ最近の競技環境 • 高速化するWebアプリが載ったサーバー3台 & ベンチマーカーを動か すサーバー1台 • 全てがプライベートネットワークで繋がってる • Linuxが動く & HTTP・SSHアクセスが通ればOK • 去年はAWSのEC2上で本番環境が用意された • AWS使ったり、VM使えば競技環境の再現ができる • 有志が再現するための諸々を作ってくれている
6. 去年(ISUCON11 予選)の競技環境
7. ISUCONポータルという存在 • ISUCONの運営(問題作成陣)が、「ISUCONポータル」をWeb アプリケーションで提供してくれる • 選手はそれぞれアカウントを持つ • 自分の競技環境の中にあるベンチマーカーサーバーにリクエストを送 り、ブラウザ上でベンチマークを実行できる • ログを保存して、各ベンチマークの結果をいつでも見れる • その他集計機能なども • ISUCONの競技になくてはならない存在
8. ISUCONポータルという存在 • 練習では？ • ポータルはない • ベンチマーカーサーバーに自分でSSHして、ベンチマーカーのバイナ リをCLIで叩かないといけない • めんどくさい！ • そこで、ベンチマーカーWeb UIの出番！ • サーバーのプライベートアドレスを保存 • ブラウザ上から自動でベンチマーカーを起動！ • ベンチマーカーのログを保存していつでも見られるように！
9. Remote-BMI • Remote - Bench Marker Interface • https://github.com/logica0419/remote-bmi • ぜひ使ってみて
10. 使い方 (軽く) • ユーザーを作成 • もしくはログイン
11. 使い方 (軽く) • 競技用サーバーを登録 • 最大3つまで登録できる！
12. 使い方 (軽く) • サーバーを選んでベンチマーク！
13. 使い方 (軽く) • ログが見える • いつ、どのサーバーで回したかわかる • それぞれのログをいつでも見れる(DBに保存) • 手元の競技環境ぶっ壊れててログが吐けなかった
14. 技術スタックの話 • サーバー • Go • 一番得意というかこれしか書けん • RDB (MySQL) + Gorm • 競技環境 + ベンチマーカーの テンプレが配布されているので、 それの上での使用を想定 • レイヤードアーキテクチャ • 速い開発のため、DIは捨てた • EchoによるJSON REST API • スキーマ定義が適当でいいので 速い開発が見込める • クライアント • React + TypeScript + Vite • 慣れている & 開発がスムーズ • Vueに比べVSCodeの拡張機能が 少し高速 • React-Router・Redux-Toolkit • Emotion • CSS-in-JS • 書き方が生CSSに近い • Vueのようなコンポーネントを Reactで実現したかった • axios
15. まとめ • ISUCON楽しいよ!!! • 毎年8・9月 • まずは練習問題をVagrantとかで手元に用意 して解説見ながらいじくりまわしてみよう • Remote-BMI、使ってみてね • https://github.com/logica0419/remote-bmi ありがとうございました