Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

logica
March 12, 2022

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

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

logica

March 12, 2022
Tweet

More Decks by logica

Other Decks in Technology

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 ありがとうございました