WebPagetestを自前ホスティング

WebPagetest

どうやら周囲のフロントエンダは、WebPagetestくらい自前でホスティングして、ゴリゴリ解析しながら日々の改善に役立てているらしいので僕もマネしてみました。jsPerfを自分専用の環境にクローンしてみると同系統の続編です。

WebPagetestはいわゆるウェブサイトのパフォーマンス計測ツールです。こんな感じで細かく計測してくれて、ボトルネックの調査などに役立ちます。WebPagetest Documentationを見ると、色々と興味深いAPIや開発中のAgentも控えているようですが、まずは環境を用意するところまで。

ただのインストールログです。

要件

Private Instances - WebPagetest Documentationを参考にセットアップを進めていきます。必要なのはPHPとApacheが走るWebサーバーと、テストAgentとして走るWindowsマシンです。

Apacheについては、リポジトリにnginx.confもあったのでnginxでも大丈夫そう

  • Apache 2.x+ with the following modules enabled:
    • mod_expires
    • mod_headers
    • mod_rewrite -PHP 5.3.0 or later with the following modules:
    • gd
    • zip
    • zlib
    • curl (if you want to use remote-storage like S3 and Google storage)
  • ffmpeg
  • jpegtran (optional)
  • exiftool (optional)

Webサーバー側は、こんな感じ。php-ffmpegだけ、ちょっと手間があったので自分ときの手順を後述します。

Windows (XP or later) (if you use 64-bit you will need WebPagetest 2.9 or later to support traffic shaping)

AgentはふつうにWindowsマシンです。今回は物理的にWindowsマシンを用意するのは面倒なので、パブリックAMIを利用してEC2のインスタンスを立ち上げます。これも後述。

Webサーバー

WebフロントエンドなアプリケーションになるWebサーバー側はApacheとPHPをセットアップする簡単なお仕事が主です。今回はCentOS 5.8を利用しています。

Apache

いまは最新リリースが2.12のようなので、それを解凍して中身のwwwをApacheのDocumentRootになるよう設定します。

WebPagetest 2.12 · WPO-Foundation/webpagetest

  • tmp, results, work/jobs, work/video, logsをchown apache:apacheなりパーミション緩くするなり
  • settingsの中にある .sample 類をリネーム

AgentにEC2を使うので、locations.ini はEC2のほうを残しておきます。

PHP

設定としては、upload_max_filesizepost_max_filesize をそれぞれ10MB以上に設定しておくことが推奨されています。これはAgentが画像含む測定結果をWebサーバーに結果通知としてPOSTリクエストしてくるからです。

phpからffmpegを使うためには、tony2001/ffmpeg-phpを利用します。これのセットアップはhiyokoのサーバー管理記録: ffmpeg-phpのインストールを参考にしました。

SourceForgeからGitHubに移ったのでしょう、きっと。

ffmpeg本体の導入には、RPMForge(Install and Enable RPMForge Repository in RHEL/CentOS 6, 5, 4)を入れておけばパッケージインストール一発で済むのでラクです。

ffmpeg-phpをインストールする際に、makeがエラーでコケたと思ったら、ffmpeg_movie.loがなぜか.loTで作成されていて.loにリネームすると直ったり。よくわからん。

Agent

前述の通り、EC2を利用します。ぶっちゃけAWS系を初めて使ったのですが、適当にググりながら触ったらスムーズに使えたので、良い感じですね。

AWS Management Console Home

WebPagetestが提供しているTokyoリージョンのAMIを利用します。Private Instances - WebPagetest Documentationを参照のこと。

Community AMIsからAMI ID ami-b465dbb5を探して、これでsmallインスタンスを立ち上げます。EC2の操作諸々は、ググれば親切な情報が沢山あるので割愛。

User Data (as text)は、wpt_server=<設置場所のドメイン> wpt_location=Tokyo wpt_key=<任意の文字列>としておきます。wpt_serverめがけて、Agentが計測結果を投げてくるイメージ。

WebサーバーとAgentの疎通

次に、WebサーバーとAgentを疎通させるため、Webサーバー側のsettings/ec2.iniを下記のように編集します。

[AP_NE]
; Minimum number of instances
min=0
; Maximum number of instances
max=50
; Number of tests per instance before spinning up new ones
ratio=100
; AWS API Keys
key=<AWSのAPI Key>
secret=<AWS API Secret>
; Maximum price for spot instances
price=0.13
; AMI ID to use
ami=ami-b465dbb5
; Instance size
size=m1.small
; Region
region=ap-northeast
; User data to pass to instance
user_data=wpt_server=<設置場所のドメイン> wpt_location=Tokyo wpt_key=<任意の文字列>

最後に、settings/locations.iniの下のほうにあるTokyoな設定のIE9〜Chrome,Firefoxの設定にkeyを加えます。Tokyoな設定を含むAP_NEとlocations以外のセクションは、邪魔なので消してしまってよいです。

[Tokyo]
; AMI: ami-6a5cea6b
; user-data: wpt_server=www.yourserver.com wpt_key=SecretKey wpt_location=Tokyo
browser=IE 9
latency=0
label="Asia (Tokyo) - IE9"
key=<UserDataのwpt_key>

[Tokyo_wptdriver]
; uses same instance as US_East (make sure the SecretKey is the same for both)
browser=Chrome,Firefox
latency=0
label="Asia (Tokyo)"
key=<UserDataのwpt_key>

これくらいの設定を行えば、WebサーバーとAgentが疎通するようになる、はずです。

Webサーバーの /install にブラウザからアクセスすると、Requirementsのチェックが表示されるのでTest LocationsのTokyo : Asia (Tokyo) - IE9とTokyo_wptdriver : Asia (Tokyo)がagents connectedになっていれば大丈夫。

その他の項目についても問題があれば教えてくれるので、必要なものは対応してください。

おしまい

です。

もうちょっとプライベートな環境として回したかったのですが、work/workdone.php がAgentから叩ける場所にないとダメっぽいので、今回紹介したようなAMIでお手軽にAgentを用意する手法だとパブリックになるのは避けられなさそう。

隠蔽した環境に置くには、本格的にWindows内でWebApplicationServerとAgentを両立させるか、Agentがwork/workdone.phpにリクエストする際に、認証情報(Basic Authorizationなりなんなり)をつけてくれるように手を加える必要があるでしょう。

参考