インフラ

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

webpagetest-private-instance

こんばんは!光です。

大手グローバル企業でWebエンジニアをやっています。

Webエンジニアを目指してプログラミングを勉強している初心者の方向けに情報を発信しています。

経歴や実績はこちら

システム開発のお仕事の依頼もお待ちしております。

お問い合わせページTwitterのDMからお気軽にお問い合わせください!

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

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

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

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

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

環境
  • AWS
    • EC2
    • AMI
    • IAM

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ページから作成します。

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接続なしで設定したいと思います。

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

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

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

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

ec2_key=<アクセスキー>
ec2_secret=<シークレットキー>

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

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

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

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

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

このときパブリックIPとパブリックDNSが変わるので注意!

実行してみる

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

ここから先は私が試した限りでは不安定だったのでうまく動作しない可能性があります。

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

  • URL:https://google.com
  • Test Location:Asia Pasific(Tokyo)
  • Browser:Chrome

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

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

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

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

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

Dockerを使って立ててみる!

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

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

インスタンスの準備

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

同様の手順で構築することでMacでも実行はできたのですが、結果がうまく表示できなかったのでLinuxを利用することをおすすめします。

まずは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
と表示されてしまい、結果が表示されなかったです。

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

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

  • URL:https://google.com
  • Test Location:Test Location
  • Browser:Chrome

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

あとがき

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

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

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

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

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