部署安装WebPageTest 2.4私有实例

WebPageTest 原本是由AOL开发内部使用的工具，后来在Google Code上开源， 是一款非常优秀的网页前端性能测试工具。 在线版本http://www.webpagetest.org

Google Code: http://code.google.com/p/webpagetest/

目前的最新版是2.4版本， 支持IE6~9    Chrome 和 FireFox浏览器。 本文介绍如何部署WebPageTest 私有实例， 以2.4版本为例。

本文的部署环境为：

WebPageTest 服务器端：Linux Red Hat 4 , 内核2.6.9-89 ， Apache 2.2, PHP 5.3.8

WebPageTest Agent: Windows XP  32位虚拟机

第一步， 下载WebPageTest

  首先到Google Code上下载2.4版本程序： wget 'http://webpagetest.googlecode.com/files/webpagetest_2.4.zip'
解压下载下来的文件： unzip webpagetest_2.4    注意没有后面的.zip ;  解压后有两个目录： www, agent 其中www为服务器端程序，需要部署在apache上； agent为代理点程序需要安装在windows上。 复制www到apache/htdocs/目录下， 更名为webpagetest.
部署的英文文档在： https://sites.google.com/a/webpagetest.org/docs/private-instances  如果无法访问请用国外代理http://www.cjdaili.com/

第二步， 安装配置Apache和PHP

下载Apache 源代码：  wget 'http://labs.renren.com/apache-mirror//httpd/httpd-2.2.21.tar.gz'
下载PHP源代码： wget 'http://cn2.php.net/get/php-5.3.8.tar.gz/from/this/mirror'

解压Apache后按照文档 http://httpd.apache.org/docs/2.2/install.html  安装
本例子中的Apache 安装目录为/home/jianzhi/apache

 ./configure --prefix=/home/jianzhi/apache --enable-so --enable-mods-shared=most --with-mpm=worker
make
make install

解压PHP 按照文档http://www.php.net/manual/zh/install.unix.apache2.php 进行安装
./configure --prefix=/home/jianzhi/apache/php --with-apxs2=/home/jianzhi/apache/bin/apxs --with-curl=/usr/lib --with-curlwrappers --enable-mbstring  --with-zlib-dir=/usr/include  --with-jpeg-dir  --with-png-dir --with-gd --enable-gd-native-ttf --enable-ftp  
make
make install
从php的安装目录复制php.ini样本
cp php.ini-production /home/jianzhi/apache/php/lib/php.ini

第三步 配置Apache 部署WebPageTest服务器端

在httpd.conf的LoadModule 模块下面添加

<IfModule mpm_worker_module>
      ServerLimit        5
      ThreadLimit        100
      StartServers       2
      MaxClients         100
      MinSpareThreads    10
      MaxSpareThreads    100
      ThreadsPerChild    20
      MaxRequestsPerChild  1000
</IfModule>

<FilesMatch \.php$>
    SetHandler application/x-httpd-php
</FilesMatch>
<FilesMatch "\.ph(p[2-6]?|tml)$">
    SetHandler application/x-httpd-php
</FilesMatch>

修改 DocumentRoot 指向webpagetest 目录 DocumentRoot "/home/jianzhi/apache/htdocs/webpagetest"
修改 dir_module配置为
<IfModule dir_module>
    DirectoryIndex index.php index.php3 index.html index.htm
</IfModule>

修改WebPageTest的几个目录读写权限
chmod 777 tmp
chmod 777 results
chmod 777 work/jobs
chmod 777 work/video
chmod 777 logs

如果你的用户没有绑定80端口的权利， 请进入apache/bin目录执行
sudo chown root:root httpd
sudo chmod +s httpd
这两条命令可以授权在普通用户下已root权限启动，并且

进入到apache/htdocs/webpagetest/setting 目录 复制一遍所有的*.sample文件， 去掉.sample的后缀名。

启动apache： sudo apache\bin\apachectl -k start
这个时候在浏览器中输入服务器的IP地址 即可打开久违的WebPageTest 界面了。 事情告一段落，还有WebPageTest Agent需要配置。

第四步 Agent的配置

我们将会把IE 6, Chrome, Firefox 的Agent部署在同一台Windows XP 32的机器上。
先配置好服务器端， 编辑文件webpagetest/setting/locations.ini

配置如下：
[locations]
1=Test_loc
default=Test_loc

[Test_loc]
1=etao_IE
2=etao_Chrome_Firefox
default=etao_IE
label="etao.com Test Location"

[etao_IE]
browser=IE 6
;browserExe=pagetest.exe
latency=0
label="Internet Explorer 6"
;key=TestKey123

[etao_Chrome_Firefox]
browser=Chrome,Firefox
latency=0
label="Google Chrome; Firefox"
;key=TestKey123

配置Agent客户端

部署的英文文档在： https://sites.google.com/a/webpagetest.org/docs/private-instances  如果无法访问请用国外代理http://www.cjdaili.com/
Agent客户端部署步骤一, 安装ipfw+dummynet网络服务
解压webpagetest_2.4.zip  把agent目录放在C:\ 重命名为 C:\WebPageTestAgent
选择 网络链接->属性->安装->服务->添加->从磁盘安装  输入dummynet服务程序所在目录， 点击确定即可完成 ipfw+dummynet网络服务 的安装。
   

Agent 客户端部署步骤二, 配置Location

参照*.sample 设置IE 客户端配置文件  urlBlast.ini  ；  Chrome和Firefox 客户端配置文件wptdriver.ini； 10.232.41.127 为WebPageTest服务器端的地址。
;urlBlast.ini 内容

[Configuration]
Startup Delay=3
Log File=c:\webpagetestagent\urlBlastLog\
Timeout=300
use current account=1

; Where to get work from
Url Files Url=http://10.232.41.127/work/
Location=etao_IE
;Location Key=TestKey123

;=================================

;wptdriver.ini内容

[WebPagetest]
url=http://10.232.41.127/
location=etao_Chrome_Firefox
browser=chrome,Firefox
;key=TestKey123
;debug=1

[chrome]
exe="C:\Documents and Settings\Administrator\Local Settings\Application Data\Google\Chrome\Application\chrome.exe"
options='--load-extension="%WPTDIR%\extension" --user-data-dir="%PROFILE%" --new-window --no-proxy-server --no-first-run --no-default-browser-check --enable-experimental-extension-apis'
cache=%WPTDIR%\chrome_cache

[Firefox]
exe="C:\Program Files\Mozilla Firefox\firefox.exe"
options='-profile "%PROFILE%" -no-remote'
template=firefox

;==============================================

Agent 客户端部署步骤三, 设置自启动

为urlBlast.exe, wptdriver.exe, dummynet/ipfw.cmd 创建快捷方式， 放入开始菜单的  启动目录。

Agent 客户端部署步骤四, 设置系统自启动
设置系统为自动登录后重启，Agent即可开始工作了。 WebPageTest Agent必须要求屏幕不被锁，才能够正常工作， 才能够抓取到网页打开时的图像。  所以设置Agent系统自启动，这样我们就可以让Agent工作而不用老是开着Agent机器的屏幕了。为了不让屏幕锁掉，还需要关闭电源管理中的各种断电、关闭屏幕保护。  如何设置Windows XP 自动登录，请参见：http://www.webjx.com/htmldata/2007-07-07/1183817965.html

好啦， 到这里WebPageTest就部署完毕了，开始享受工具带来的工作轻松和愉悦吧。

附件： WebPageTest  测试结果样例

 

版权声明：本文为博主原创文章，未经博主允许不得转载。

WebPageTest是一款非常强大的Web页面性能评测工具，最早是在AOL内部使用的，现在已经开源了。

WebPageTest可以提供非常完整的页面响应数据，从整个页面的加载时间，到连接的建立时间以及第一个字节的获取时间等。当然我最喜欢的还是它最后生成的一个瀑布图，其中包含了每一个页面元素的响应数据。

 

执行效果展示

WebPageTest本身是一个CS模式的工具，包含服务器端和客户端。服务器端负责分发任务，客户端接收到任务之后运行浏览器来完成Web页面的探测任务。你可以通过一个中心来控制远在世界各地的客户端来探测你想探测的页面。

 

比如通过其官方网站的WebPageTest，大家可以选择很多其他国家的客户端来帮助你完成页面的探测任务。

官网：http://www.webpagetest.org/

下载：http://www.webpagetest.org/forums/showthread.php?tid=66

下面说一下部署过程,因为WebPageTest是用php写的，所以各个平台上应该都是兼容的，下面就以在Windows上部署服务器端为例：

1.下载最新的最新的WAMP：www.wampserver.com/en/download.php

2.下载最新的WebPageTest：http://www.webpagetest.org/forums/showthread.php?tid=66

3.假如你的WAMP安装在了D:wamp，把WebPageTest解压后的Web Site目录拷贝到D:wampwww下面

4.修改WebPageTest的测试结果上传路径，这一步必须做，否则客户端数据无法上传：

  修改D:wampwwwWeb Sitecontentsettingslocations.ini的

  localDir=D:wampwwwWeb Sitecontentworkjobstest

 5.修改apache配置文件:D:wampbinapacheApache2.2.11confhttpd.conf

    找到下面3行，解除注释：
LoadModule rewrite_module modules/mod_rewrite.so
LoadModule expires_module modules/mod_expires.so
LoadModule headers_module modules/mod_headers.so

找到这行：
#Include conf/extra/httpd-vhosts.conf在它下面再加一行：
Include conf/extra/httpd-webpagetest.conf

在WAMP的安装目录binapacheApache2.2.11confextra下建个httpd-webpagetest.conf,内容：
NameVirtualHost *
<VirtualHost *>
DocumentRoot "D:/wamp/www/Web Site/content"
ServerName webpagetest
ServerAlias webpagetest
<Directory "D:/wamp/www/Web Site/content">
AllowOverride All
Allow from all
</Directory>
</VirtualHost>

注意Allow from all 一定要加上

6.修改host文件：

C:WINDOWSsystem32driversetchosts加上一行
服务器端IP webpagetest

打开浏览器访问http://webpagetest试一下吧

7.客户端很简单，不需要部署，把Web Site下面的内容拷贝到客户端，修改urlblast.ini

把Url Files Url=http://127.0.0.1/work/里面的IP地址改成服务器的就可以了。

然后运行urlblast.exe来启动客户端。

[e-mail] 于2010-10-19原创