使用 SpeedTest 开源项目搭建基于 HTML5 的搬瓦工 VPS 速度测试页面

今天给大家介绍一下如何在自己的搬瓦工 VPS 上搭建基于 HTML5 的自建的 SpeedTest 测速页面。主要是基于 GitHub 上的开源项目，演示效果就是本站提供的搬瓦工各个机房的 SpeedTest 速度测试页面。因为一直有朋友来询问这个页面是怎么搭建的，想在自己的搬瓦工 VPS 上搭建，也有朋友是觉得本站提供的测速页面不准，也想自己搭建。那么今天就介绍一下怎么使用 SpeedTest 这个开源项目，搭建自己的搬瓦工 VPS 测速页面。

最终演示效果可以参考本站的演示站点，比如 DC6 的：https://dc6.bwg.net/speedtest/。更多演示站点参考《搬瓦工演示站点汇总（SpeedTest 速度测试 + LookingGlass 路由测试）》。

一、准备工作

首先我们需要部署一个网站环境，比如使用 LNMP 一键包、LAMP 一键包、宝塔面板、或者 WDCP 面板、CyberPanel 面板等，总之随便选择一个面板就行。各种面板的搭建教程如下：

• LNMP 一键包：搬瓦工建站教程：一键部署 LNMP 建站环境
• LAMP 一键包：搬瓦工VPS/Bandwagonhost 搭建Apache + PHP + MySQL建站教程
• 宝塔面板：搬瓦工VPS 安装BT宝塔Web面板教程
• WDCP 面板：搬瓦工建站教程：一键安装 WDCP 面板并安装 PHP、MySQL 建站环境
• CyberPanel 面板：搬瓦工建站教程：一键安装 CyberPanel 面板教程（LiteSpeed 建站环境）

本站使用的是 LNMP 一键包，下面就以 LNMP 一键包为例，讲解一下如何进行部署 SpeedTest 页面。

二、部署 SpeedTest 速度测试页面

SpeedTest 项目主页：https://github.com/adolfintel/speedtest

我们所需要做的就是把这些文件放到服务器上，就完成了。具体来说，有下面几个步骤。

1、确定网站目录

首先需要明确我们需要把文件放哪边。如果我们需要使用域名并放置到对应的域名目录下，那么就按照《搬瓦工建站教程：使用 LNMP 一键包添加网站以及设置伪静态》这个教程，添加域名，并且按照《搬瓦工建站教程：域名解析教程》这个教程解析域名。比如我们的域名是 example.com，那么我们默认的网站目录就是 /home/wwwroot/example.com。

如果我们不需要使用域名，想直接通过 IP 进行访问，那么直接把文件放到 /home/wwwroot/default 这里就可以。注意先把这里的 index.html 删了。

2、上传 SpeedTest 文件

接下来就可以上传 SpeedTest 文件到对应的目录了。最简单的方法就是先把文件下载到本地，下载地址：https://github.com/adolfintel/speedtest/archive/master.zip

然后通过 SFTP 上传，教程：《搬瓦工 FTP 教程：使用 FileZilla 通过 SFTP 向搬瓦工 VPS 上传文件的方法》。

上传的时候，我们只需要上传下面几个文件就行：

• empty.php
• garbage.php
• getIP.php
• speedtest_worker.min.js
• example-progressBar.html

前四个是必须的，最后一个的话，项目里有多个 example 文件，我们随便选一个上传就行，本站使用的是 example-progressBar.html，这里就以这个为例，大家也可以选择其他喜欢的。

上传之后，把 example-progressBar.html 重命名为 index.html，然后打开对应的域名或者 IP，就可以看到 SpeedTest 测速页面了。

三、美化页面以及更多个性化设置

如果想要美化页面，或者修改页面，可以参考官方的 wiki 页面：https://github.com/adolfintel/speedtest/wiki/Customizing-the-front-end

本地编辑可以使用 Sublime Text 或者 Visual Studio Code 之类的编辑器，这里就不多推荐了。

这个项目还支持更多扩展，比如如果想同时测试多个服务器的速度，可以参考：https://github.com/adolfintel/speedtest/wiki/Introduction-(MPOT)

如果你每天的测试量很大，会大于 500 次/天（当然一般情况下我们用不到这么多），那么你还需要去 ipinfo.io 注册一个账户，并获取 API Key，具体参考：https://github.com/adolfintel/speedtest/wiki/Installation

更多安装方法也可以参考：https://github.com/adolfintel/speedtest/wiki/Installation

常见问题解答：https://github.com/adolfintel/speedtest/wiki/Troubleshooting,-common-problems,-known-limitations

由于本站本教程的目的就是帮助大家搭建一个能用的 SpeedTest 测速页面，所以上面这些更为具体的教程不在本教程的考虑范围内，所以如果有需求，大家自行前往查看即可。

四、搬瓦工便宜方案推荐

实时库存可以查看：stock.bwg.net。

优惠码：BWHCGLUKKB

购买教程：2019 年最新搬瓦工购买教程和支付宝支付教程

1、目前最便宜的方案

如果就想买个最便宜的，可以参考《搬瓦工 $49.99/年的 CN2、KVM、CN2 GIA-E 限量方案有什么区别哪个好》。鉴于 KVM 方案相比于 CN2 方案没什么优势，推荐大家直接购买 CN2 方案，（参考《搬瓦工 KVM 方案和 CN2 方案有什么不同又该怎么选择？》）。

2、其他方案推荐

• 更多性价比方案可以参考本站的方案推荐：《搬瓦工高性价比 VPS 推荐：目前哪款方案最值得买？》。
• 最新的可以购买的搬瓦工便宜方案，可以随时参考《搬瓦工目前可购买便宜方案整理》，或者查看实时库存：stock.bwg.net 。
• 各个机房的演示站点：《搬瓦工演示站点汇总（SpeedTest 速度测试 + LookingGlass 路由测试）》，测试 IP：《搬瓦工所有数据中心测试 IP》。

目前推荐优先考虑 CN2 GIA-E 方案，目前综合来看性价比最高，建站也是首选。当然，如果预算充足，也可以直接购买香港方案。

A. CN2 方案

更多 CN2 方案以及详情：搬瓦工 CN2 所有方案整理汇总。

B. CN2 GIA-E 方案（推荐，目前性价比最高）

更多 CN2 GIA-E 方案，参考：《搬瓦工 DC6 CN2 GIA ECOMMERCE 方案整理》。

DC6 CN2 GIA-E 和 DC9 CN2 GIA 两个机房的区别，参考：《搬瓦工 DC6 CN2 GIA-E 和 DC9 CN2 GIA 机房区别比较以及如何选择》。

C. CN2 GIA 方案

更多 CN2 GIA 方案以及详情：搬瓦工 CN2 GIA 所有方案整理。

D. 香港方案

所有搬瓦工香港方案以及详情：搬瓦工香港方案整理汇总。

未经允许不得转载：Bandwagonhost中文网 » 使用 SpeedTest 开源项目搭建基于 HTML5 的搬瓦工 VPS 速度测试页面