cpselvis

落花无言,人淡如菊,心素如简

嗨,我是程柳锋 (@cpselvis),一名来自中国的 web 开发者。现居深圳,就职于 腾讯。目前负责研发规范和工程化建设,曾在OSC源创会上做过分享。


基于docker搭建webpagetest服务

安装Docker

安装 WPT Agent 和 WPT Server

Docker基本环境配置好后,接下来需要安装 WPT 的包了。WPT 的软件包分为 Agent 和 Server 两个部分,对应:

$ docker pull webpagetest/server
$ docker pull webpagetest/agent

启动服务

运行 WPT Server

$ docker run -d -p 4000:80 --rm webpagetest/server

运行 WPT Agent

$ docker run -d -p 4001:80 \
--network="host" \
-e "SERVER_URL=http://localhost:4000/work/" \
-e "LOCATION=Test" \
webpagetest/agent

运行上述步骤后,直接访问 http://localhost:4000 即可看到

依赖检查

WPT 已经安装好了,WPT的对应配置检查可以通过:http://localhost:4000/install 来看它的依赖是否都安装。

Mac 下 Traffic Shaping问题

OSX 下会遇到Error configuring traffic-shaping报错,这是因为OSX下还没有实现 traffic-shaping

可以去掉traffic shaping特性通过在settings/locations.ini设置一个假的connectivity值,并且在agent运行的时候增加--shaper参数。

更好的办法是基于原有的WPT agent/server镜像制作新的Docker镜像,方便后续搭建Docker集群。

制作镜像

Server

创建一个server文件夹,包含Dockerfile和locations.ini文件。

Dockerfile:

FROM webpagetest/server
ADD locations.ini /var/www/html/settings/

locations.ini:

[locations]
1=Test_loc
[Test_loc]
1=Test
label=Test Location
group=Desktop
[Test]
browser=Chrome,Firefox
label="Test Location"
connectivity=LAN

本地build镜像

$ docker build -t local-wptserver .

Agent

创建一个agent文件夹,包含Dockerfile和script.sh文件。

Dockerfile

FROM webpagetest/agent
ADD script.sh /
ENTRYPOINT /script.sh

script.sh

#!/bin/bash
set -e
if [ -z "$SERVER_URL" ]; then
echo >&2 'SERVER_URL not set'
exit 1
fi
if [ -z "$LOCATION" ]; then
echo >&2 'LOCATION not set'
exit 1
fi
EXTRA_ARGS=""
if [ -n "$NAME" ]; then
EXTRA_ARGS="$EXTRA_ARGS --name $NAME"
fi
python /wptagent/wptagent.py --server $SERVER_URL --location $LOCATION $EXTRA_ARGS --xvfb --dockerized -vvvvv --shaper none

script.sh 可执行

chmod u+x script.sh

制作Agent镜像

$ docker build -t local-wptagent .

开始运行一个Webpagetest Docker实例

$ docker run -d -p 4000:80 local-wptserver
$ docker run -d -p 4001:80 \
--network="host" \
-e "SERVER_URL=http://localhost:4000/work/" \
-e "LOCATION=Test" \
local-wptagent

最后访问 http://127.0.0.1:4000 即可查看到效果。

最近的文章

Feflow 架构篇

Feflow是一个前端集成开发环境,最新版本是v0.14.1,托管在Github上:feflow。目前已经在NOW直播、花样直播、花样交友、手Q附近、群视频、群送礼、回音等业务广泛使用。有60+ WEB/IOS/Andriod 稳定用户,累计投入生产项目达到200+。本文将会详细介绍Feflow的技术架构和实现原理。1. 起源Feflow于2017年3月份投入开发,最初只是为了解决项目创建不智能的问题。后面逐步解决了团队的构建、规范、CI和自动化问题,最终随着功能的不断完善而成为团队基础的...…

继续阅读
更早的文章

模块化:css模块化的演进

CSS 做为 Web 技术的基石,从一开始就展示出了巨大的潜力。它的入门非常简单,你只需为元素定义好样式属性和值。然而 CSS 特性随着规范的升级越来越丰富,前端业务复杂性的增加也使得工程愈加庞大。在大型 Web 应用里面,CSS 的组织是一件复杂和凌乱的事情,你更改页面上任意一个元素的一行CSS样式都有可能影响到其他页面上的元素。由于 CSS 本身并不编程特性,因此在演变过程中出现了很多优秀的编程思想,本文会带领大家探讨 CSS 模块化的演变历程。CSS 预处理器CSS 预处理器是什...…

继续阅读