WebPageTestのプライベートインスタンスを構築しよう！

今回はこのような質問をいただきました。

WebPageTestのプライベートインスタンスを構築したい！

WebPageTestのプライベートインスタンスを構築しようと思ったのですが、情報が少なくてかなり苦労しました。

今回はAMIを使う方法とDockerを使う方法を試してみました。

個人的にはDockerを使う方法がおすすめです！

WebPageTestについて

https://www.webpagetest.org/

WebPageTestはServer（操作する側）とAgent（テストする側）によって構成されています。

上記のURLへアクセスすることで表示されるのがServerのページです。

このServerで「Test Location」と「Browser」を指定することで実行されるのがAgentです。

Agentでテスト実行後、テスト結果がServerに送られてきて結果を表示してくれます。

ウェブサイトの解析に使えそうですね！

AMIを使って立ててみる！

まずはAWSのAMIを使って立ててみました。

ただ、こちらは私が試した限りでは問題がいろいろあったのでDockerを使うほうが良さそうです。

準備

準備としてIAMを1つ作っておきましょう。

ServerからAgentのインスタンス（EC2）を立ち上げるためのIAMを作ります。

AWSコンソールのIAMページから作成します。

とりあえずAmazonEC2FullAccessで権限を振ったけどもうちょっと絞っても大丈夫かも。

お試しの場合はAmazonEC2FullAccessで良いと思います。

作成時に発行されるアクセスキーとシークレットキーは大切に保管しておいてください。

#Agentを立ち上げるための設定で使用します。

AMIからServerのインスタンスを立ち上げる

リージョンによってAMIが違うみたいです。

以下のURLで確認できます。

https://github.com/WPO-Foundation/webpagetest/blob/master/docs/EC2/Server%20AMI.md

私は今回、アジアパシフィック東京（ap-northeast-1）のものを利用しました。

立ち上げるときの設定はほとんどデフォルトのままです。

「3.インスタンスの設定」→「自動割り当てパブリック IP」だけ有効にしました。

インスタンス立ち上げについての詳細は省略します。

立ち上がったらそのインスタンスにアクセスしてみるとWebPageTestが表示されるはずです。

ただ、そのままではAgentが実行されないのでこれから設定する必要があります。

Agentを立ち上げるための設定

今回はSSH接続なしで設定したいと思います。

まずは先ほど立ち上げたインスタンスを停止してください。

アクション→インスタンスの状態→停止

停止したらユーザーデータを設定します。

アクション→インスタンスの設定→ユーザーデータの表示 / 変更

ここで#準備で作成したIAMのアクセスキーとシークレットキーを設定してください。

ラジオボタンは「プレーンテキスト」を選択します。

その後、インスタンスを起動します。

初回起動時のみ、このユーザーデータの設定が反映されます。

もうこのユーザーデータは不要なので再度停止して削除してしまっても大丈夫です。

実行してみる

新しくなったパブリックDNSにアクセスして実行してみましょう！

以下の設定で実行してみます。

実行後にAWSコンソールのEC2ページを見てみると「WebPagetest Agent」というインスタンスが立ち上がっていると思います。

しばらく待つと結果が表示されると思います。（15分〜60分程度）

結果表示までの時間には結構波があるので気長に待ってみると良いと思います。

ただ、いくら待っても終わらないこともあったのでその辺がよくわからないんですよね…

そのため、次のDockerを使う方法をおすすめします。

Dockerを使って立ててみる！

AMIを使うと微妙な感じだったので今度をDockerを使って立ててみました。

結果としてはこちらのほうが安定してますね。

インスタンスの準備

今回はEC2（Amazon Linux 2）にDockerをインストールして利用することにしました。

まずはEC2にSSH接続してDockerを使えるようにしましょう！

以下のコマンドを順番に実行していけば使えるようになると思います。

# dockerインストール
$ sudo yum install -y docker
$ sudo service docker start
$ sudo usermod -a -G docker ec2-user
# 自動起動を有効
$ sudo systemctl enable docker
# root権限なしでも使えるようにする
$ sudo gpasswd -a $(whoami) docker
$ sudo chgrp docker /var/run/docker.sock
$ sudo service docker restart

すべて実行したら一度SSH接続を切断して、もう一度接続してください。
これでDockerが使えるようになったと思います。

# 確認
$ docker ps

こちらのコマンドが実行できればOKです。

コンテナの起動

まずはイメージをプルしておきましょう。

# イメージをpull
$ docker pull webpagetest/server
$ docker pull webpagetest/agent

結構時間かかります。（5分〜10分くらい）

イメージのプルが終わったら、そのイメージを利用してコンテナを起動しましょう！

# Serverのコンテナ起動
$ docker run -d -p 4000:80 --rm --name wpt-server webpagetest/server
# Agentのコンテナ起動
$ sudo modprobe ifb numifbs=1
$ sudo docker run -d --name wpt-agent -vvvv -p 4001:80 --network="host" -e "SERVER_URL=http://localhost:4000/work/" -e "LOCATION=Test" --cap-add=NET_ADMIN webpagetest/agent

Agentを起動する前に
$ sudo modprobe ifb numifbs=1
を実行しておかないと
First View: Test Error: Error configuring traffic-shaping
と表示されてしまい、結果が表示されなかったです。

上記の手順で実行したらこのような結果にはならないはず…

実行してみる

では実際にServerにアクセスして実行してみましょう！

今回は4000番ポートで実行しているので4000番ポートをセキュリティグループで開放しておきましょう。

以下のような感じで4000番ポートへアクセスするとWebPageTestにアクセスできるはずです。

http://ec2-X-XXX-X-XXX.ap-northeast-1.compute.amazonaws.com:4000

以下の設定で実行してみます。

1〜2分程度で結果が表示されるはずです！

あとがき

WebPageTestは情報が少なくて調査が大変でした。

公式ドキュメントも簡素だし、出てくる情報は英語で古いものばかりだし…

慣れない英語の情報を漁る日々が続きました。

プライベートインスタンスを立ち上げるだけでもかなり時間がかかってしまいました。

プライベートインスタンスを立てたいと思っている方の参考になればと思います。