搭建 WebPageTest Private Instance

Posted on Edited on In

WebPageTest

WebPageTest是google的一个开源项目“make the web faster”的子项目，后来在2008年基于BSD开源
详情可见：官方文档

WebPageTest服务端基于PHP，而客户端会有不同的形式，可以部署在window/linux以及手机上，以下主要针对说明window上的agent。
后续将web server部署在debian上，agent部署在window上

Web Server

安装配置webpagetest

  • 下载webpagetest_3.0.zip，解压后，将www目录拷贝到/usr/local/apps/webpagetest/目录下
  • 修改目录权限
1
2
3
cd /usr/local/apps/webpagetest/www/
mkdir temp results
chmod -R  777  work temp results logs dat
  • 修改location.ini
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
[locations]
1=Office
default=Office

; These are the top-level locations that are listed in the location dropdown
; Each one points to one or more browser configurations

[Office]
1=Office_wptdriver
label="Office LAN (Chrome,Firefox,IE)"

; These are the browser-specific configurations that match the configurations
; defined in the top-level locations.  Each one of these MUST match the location
; name configured on the test agent (urlblast.ini or wptdriver.ini)

[Office_wptdriver]
browser=Chrome,Firefox,IE
label="Office LAN"
  • 配置connectivity,settings
    具体可根据settings里面的说明项进行配置
1
2
cp connectivity.ini.sample connectivity.ini
cp settings.ini.sample settings.ini

Nginx

安装nginx，具体可见nginx安装脚本

配置nginx.conf：

1
2
3
4
5
6
7
8
9
server {
    server_name webpagetest.jeffxue.com;
    root    /usr/local/apps/webpagetest/www;
    include /usr/local/apps/webpagetest/www/nginx.conf;
    location ~ \.php$ {
        include        fastcgi.conf;
        fastcgi_pass   127.0.0.1:9000;
    }
}

启动nginx：/usr/local/nginx/sbin/nginx

PHP

安装php，具体可见php安装脚本

配置php.ini（修改以下配置）

1
2
3
4
5
memory_limit = 256M
display_errors = On
error_log = /usr/local/php/php_errors.log
post_max_size = 10M
upload_max_filesize = 10M

启动php-fpm：/usr/local/php/sbin/php-fpm

检查依赖

访问http://webpagetest.jeffxue.com/install/（需先使用ihosts修改本地host，将域名指向对应的服务器）
检查对应的依赖是否为yes即可，若为no，则安装具体的依赖即可

ffmpeg(–enable-libx264)可通过源码进行编译安装：

  • yasm
1
2
3
4
5
6
git clone git://github.com/yasm/yasm.git
cd yasm
./autogen.sh
./configure
make
make install
  • libx264
1
2
3
4
5
6
git clone git://git.videolan.org/x264.git
cd x264
./configure --enable-static --enable-shared
make
make install
ldconfig
  • ffmpeg
1
2
3
4
tar xvzf FFmpeg-n3.3.tar.gz
cd FFmpeg-n3.3
./configure --enable-gpl --enable-libx264
make && make install

Agent

以下操作均在window 7中执行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
[WebPagetest]
url=http://webpagetest.jeffxue.com/
location=Office_wptdriver
browser=Chrome
Time Limit=120
;key=TestKey123
;Automatically install and update support software (Flash, Silverlight, etc)
;software=http://www.webpagetest.org/installers/software.dat

[Chrome]
exe="C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"
options='--load-extension="%WPTDIR%\extension" --user-data-dir="%PROFILE%" --no-proxy-server'
;installer=http://www.webpagetest.org/installers/browsers/chrome.dat

[Firefox]
exe="C:\Program Files (x86)\Mozilla Firefox\firefox.exe"
options='-profile "%PROFILE%" -no-remote'
;installer=http://www.webpagetest.org/installers/browsers/firefox.dat
;template=firefox

[IE]
exe="C:\Program Files\Internet Explorer\iexplore.exe"
  • 若运行测试时结果显示没有找到ipfw，则需要安装agent目录下的dummynet，在高级网络设置中安装对应的ipfw，并将对应的目录下的文件拷贝到dummynet目录下

启动agent：直接运行wptdriver.exe即可，显示waiting for work即正常，再次访问http://webpagetest.jeffxue.com/install/检查agent是否已经连上server

运行测试

访问webpagetest.jeffxue.com

指定URL

输入URL，选择浏览器，即可开始测试

使用script

点开高级设置，选择scirpt，输入对应的脚本，即可进行测试
具体script的语法可见：scripting

1
2
3
4
5
6
7
8
9
10
11
12
logData	0

navigate	https://sso.jeffxue.com

setValue	name=username test
setValue	name=password	123456
clickAndWait	id=loginBtn
clickAndWait	class=ant-modal-close-x

logData	1
setTimeout	10
navigate	https://corp.jeffxue.com/xxx/#/order/indent
坚持原创技术分享，您的支持将鼓励我继续创作！.