Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

軽く自己紹介 • logica • Otaku Project 所属(?) • 東京工業大学デジタル創作同好会traP 所属 • 普段やってること • Goを使ったWebアプリケーションのAPIサーバーを書いてる • Webアプリケーションのクライアントも書ける • この春はインターンを2つ入れました • 最近触ってる / 興味ある技術スタック • Go・RDB・gRPC(-web)・Kubernetes・イベント駆動アーキテクチャ • TypeScript・React・Recoil・Emotion

Slide 3

Slide 3 text

ISUCON is 何 • ISUCON (Iikanjini Speed Up Contest) • Webアプリケーション パフォーマンスチューニングコンテスト • LINE株式会社が運営 • Webアプリケーションのサーバーを高速化する • クライアントの静的ファイル配信 + APIサーバー • 最近はアプリ + RDB + リバースプロキシが1台に入っている • 「ベンチマーカー」と呼ばれる、仮想ユーザーのシミュレーターが実 際にHTTPリクエストを飛ばし、成功したリクエストの数によってス コアを付ける • 詳しくは「ISUCON」で検索! (https://isucon.net/)

Slide 4

Slide 4 text

ISUCON is 何 僕は NTT様が主催したISUCONライクなイベントで、 最終結果1位が14,000点超だった中 -80,000点で競技を終えたくらいには ISUCONが好きです

Slide 5

Slide 5 text

練習がしたい! • ここ最近の競技環境 • 高速化するWebアプリが載ったサーバー3台 & ベンチマーカーを動か すサーバー1台 • 全てがプライベートネットワークで繋がってる • Linuxが動く & HTTP・SSHアクセスが通ればOK • 去年はAWSのEC2上で本番環境が用意された • AWS使ったり、VM使えば競技環境の再現ができる • 有志が再現するための諸々を作ってくれている

Slide 6

Slide 6 text

去年(ISUCON11 予選)の競技環境

Slide 7

Slide 7 text

ISUCONポータルという存在 • ISUCONの運営(問題作成陣)が、「ISUCONポータル」をWeb アプリケーションで提供してくれる • 選手はそれぞれアカウントを持つ • 自分の競技環境の中にあるベンチマーカーサーバーにリクエストを送 り、ブラウザ上でベンチマークを実行できる • ログを保存して、各ベンチマークの結果をいつでも見れる • その他集計機能なども • ISUCONの競技になくてはならない存在

Slide 8

Slide 8 text

ISUCONポータルという存在 • 練習では? • ポータルはない • ベンチマーカーサーバーに自分でSSHして、ベンチマーカーのバイナ リをCLIで叩かないといけない • めんどくさい! • そこで、ベンチマーカーWeb UIの出番! • サーバーのプライベートアドレスを保存 • ブラウザ上から自動でベンチマーカーを起動! • ベンチマーカーのログを保存していつでも見られるように!

Slide 9

Slide 9 text

Remote-BMI • Remote - Bench Marker Interface • https://github.com/logica0419/remote-bmi • ぜひ使ってみて

Slide 10

Slide 10 text

使い方 (軽く) • ユーザーを作成 • もしくはログイン

Slide 11

Slide 11 text

使い方 (軽く) • 競技用サーバーを登録 • 最大3つまで登録できる!

Slide 12

Slide 12 text

使い方 (軽く) • サーバーを選んでベンチマーク!

Slide 13

Slide 13 text

使い方 (軽く) • ログが見える • いつ、どのサーバーで回したかわかる • それぞれのログをいつでも見れる(DBに保存) • 手元の競技環境ぶっ壊れててログが吐けなかった

Slide 14

Slide 14 text

技術スタックの話 • サーバー • 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

Slide 15

Slide 15 text

まとめ • ISUCON楽しいよ!!! • 毎年8・9月 • まずは練習問題をVagrantとかで手元に用意 して解説見ながらいじくりまわしてみよう • Remote-BMI、使ってみてね • https://github.com/logica0419/remote-bmi ありがとうございました