一、准备一台全新的 Ubuntu 服务器
推荐：
Ubuntu Server 24.04 LTS
CPU：1核即可
内存：1GB即可
硬盘：10GB以上如果你的服务器是 AWS、阿里云、腾讯云、Oracle Cloud 等，都可以。
假设服务器 IP 是：
35.74.247.195你的网页目前 MQTT 地址已经写成：
const brokerUrl = 'ws://35.74.247.195:9001';如果以后换服务器，需要修改这里。
二、SSH 登录服务器
Mac 或 Windows 终端执行：
如果你的服务器用户名不是 root，例如：
登录成功后执行：
sudo apt update
sudo apt upgrade -y安装基础工具：
sudo apt install -y curl wget unzip nano ufw三、设置服务器防火墙
开放：
22 SSH
80 HTTP网页
443 HTTPS网页
1883 MQTT
9001 MQTT WebSocket执行：
sudo ufw allow 22/tcp
sudo ufw allow 80/tcp
sudo ufw allow 443/tcp
sudo ufw allow 1883/tcp
sudo ufw allow 9001/tcp启用防火墙：
sudo ufw enable查看：
sudo ufw status应该看到类似：
22/tcp ALLOW
80/tcp ALLOW
443/tcp ALLOW
1883/tcp ALLOW
9001/tcp ALLOW注意：
如果你的云服务器有额外的安全组，例如 AWS Security Group、阿里云安全组，也必须同时开放：
80
443
1883
9001否则 Ubuntu 防火墙放行了，云平台外层仍然可能拦截。
四、安装 Mosquitto MQTT
你的网页使用：
mqtt.connect(brokerUrl)而且连接：
ws://35.74.247.195:9001所以服务器需要安装 Mosquitto，并开启 MQTT WebSocket。
执行：
sudo apt install -y mosquitto mosquitto-clients设置开机启动：
sudo systemctl enable mosquitto暂时停止：
sudo systemctl stop mosquitto五、配置 Mosquitto
创建配置文件：
sudo nano /etc/mosquitto/conf.d/rctimer.conf写入：
listener 1883 0.0.0.0
protocol mqtt
listener 9001 0.0.0.0
protocol websockets
allow_anonymous true
persistence true
persistence_location /var/lib/mosquitto/保存。
如果使用 nano：
Ctrl + O
Enter
Ctrl + X然后启动：
sudo systemctl start mosquitto检查：
sudo systemctl status mosquitto如果看到：
Active: active (running)说明 MQTT 已经启动。
六、测试 MQTT
打开第一个 SSH 窗口：
mosquitto_sub -h 127.0.0.1 -t rctimer/live这个窗口会等待 MQTT 数据。
然后再打开第二个 SSH 窗口：
mosquitto_pub -h 127.0.0.1 -t rctimer/live -m '{"stage":"测试比赛","remainTime":"05:00","cars":[]}'如果第一个窗口出现：
{"stage":"测试比赛","remainTime":"05:00","cars":[]}说明 MQTT 正常。
七、安装 Nginx
Nginx 用来提供网页。
执行：
sudo apt install -y nginx启动：
sudo systemctl enable nginx
sudo systemctl start nginx测试：
浏览器打开：
http://35.74.247.195如果看到：
Welcome to nginx!说明 Nginx 正常。
八、创建网页目录
我们建立：
/var/www/rclap执行：
sudo mkdir -p /var/www/rclap然后：
sudo chown -R $USER:$USER /var/www/rclap进入：
cd /var/www/rclap九、上传你的 HTML 文件
你上传的文件：
rclap web(2).html建议最终改名为：
index.html目录结构最终应该是：
/var/www/rclap/
├── index.html
├── lap.wav
└── avatars/
├── 1.jpg
├── 2.jpg
├── 3.jpg
├── 4.jpg
└── ...你的网页代码中：
const lapSound = new Audio('lap.wav');所以：
lap.wav必须位于：
/var/www/rclap/lap.wav你的代码中头像：
<img src="avatars/${car.id}.jpg">所以：
avatars/10223.jpg对应的就是：
车号 10223头像应该放在：
/var/www/rclap/avatars/10223.jpg例如：
avatars/
├── 10223.jpg
├── 35319.jpg
├── 5103.jpg
└── 10001.jpg十、配置 Nginx
创建站点配置：
sudo nano /etc/nginx/sites-available/rclap写入：
server {
listen 80;
listen [::]:80;
server_name _;
root /var/www/rclap;
index index.html;
location / {
try_files $uri $uri/ =404;
}
location /avatars/ {
try_files $uri =404;
}
}保存。
删除默认网站：
sudo rm -f /etc/nginx/sites-enabled/default建立软链接：
sudo ln -s /etc/nginx/sites-available/rclap /etc/nginx/sites-enabled/rclap检查配置：
sudo nginx -t如果出现：
syntax is ok
test is successful重启：
sudo systemctl restart nginx现在浏览器访问：
http://35.74.247.195应该就能看到你的：
🏁 RcTimerX Live Online ❄️网页。
十一、修改你的 HTML
你现在代码里：
const brokerUrl = 'ws://35.74.247.195:9001';如果网页和 MQTT 都部署在同一台服务器，可以继续这样写。
不过我更推荐改成：
const brokerUrl = `ws://${window.location.hostname}:9001`;这样以后更换服务器 IP，不需要修改 HTML。
例如：
const brokerUrl = `ws://${window.location.hostname}:9001`;
const client = mqtt.connect(brokerUrl);以后：
http://35.74.247.195自动连接：
ws://35.74.247.195:9001如果以后域名：
http://rclap.example.com自动连接：
ws://rclap.example.com:9001更方便。
十二、测试网页是否能收到 MQTT 数据
现在浏览器打开：
http://35.74.247.195然后 SSH 执行：
mosquitto_pub \
-h 35.74.247.195 \
-p 1883 \
-t rctimer/live \
-m '{"stage":"决赛","remainTime":"04:32","cars":[]}'网页应该显示：
当前阶段
决赛
比赛时间
04:32说明：
网页
↓
MQTT WebSocket
↓
Mosquitto已经打通。
十三、测试车辆数据
你的网页需要的数据格式是：
{
"stage": "决赛",
"remainTime": "04:32",
"cars": [
{
"id": "10223",
"name": "车手1",
"laps": 5,
"lastLapTime": "00:12.345",
"bestLap": "00:11.888",
"gap": "-",
"totalTime": "01:02.345"
}
]
}可以直接测试：
mosquitto_pub \
-h 35.74.247.195 \
-p 1883 \
-t rctimer/live \
-m '{"stage":"决赛","remainTime":"04:32","cars":[{"id":"10223","name":"车手1","laps":5,"lastLapTime":"00:12.345","bestLap":"00:11.888","gap":"-","totalTime":"01:02.345"}]}'网页应该显示：
P1
车手1
ID:10223
圈数
5
单圈圈速
00:12.345
最快圈速
⚡ 00:11.888
总耗时
01:02.345如果上传：
/var/www/rclap/avatars/10223.jpg那么车手1头像就会显示。
Comments | NOTHING