康复监测系统 – Windows 本地部署指南（nginx + EMQX）

目标

新人仅凭本文档，在 Windows 电脑上完成 nginx + EMQX 部署，打开前端页面，接收传感器真实数据。
前提：已有 ESP32 传感器设备，已接入与本机同一局域网的 WiFi。

📐 系统架构

ESP32 传感器 → EMQX(1883) → nginx(8083 WebSocket) → 浏览器前端

📦 第一步：安装必要软件

1.1 Docker Desktop（EMQX 运行环境）

推荐版本：Docker Desktop 4.x（内置 docker-compose）

访问 Docker Desktop 下载，下载 Windows 安装包
运行安装程序，安装时勾选 “Add Docker to PATH”
安装完成后重启电脑
启动 Docker Desktop，等待右下角图标变为绿色

验证：打开 PowerShell，运行：

docker --version
docker-compose --version

💡 如果启动时报 “WSL2 not installed”，先运行 wsl --update 或下载 wsl_update_x64.msi

1.2 nginx for Windows（反向代理 + 前端静态文件服务）

访问 nginx.org 下载页，下载 nginx-1.x.x 稳定版（zip 包）
解压到 C:\nginx（路径不要有空格和中文）

目录结构：

C:\nginx\
├── conf\
│   └── nginx.conf      ← 配置文件（后面会替换）
├── logs\
├── html\
└── nginx.exe

验证：双击 nginx.exe，浏览器访问 http://localhost，看到 “Welcome to nginx!” 即成功。

🗄️ 第二步：部署 EMQX Broker

2.1 创建 docker-compose.yml

在 C:\emqx-rehab 目录下新建文件 docker-compose.yml：

version: '3.8'

services:
  emqx:
    image: emqx/emqx:6.2.0
    container_name: emqx-rehab
    restart: unless-stopped
    environment:
      EMQX_DEFAULT_USERNAME: admin
      EMQX_DEFAULT_PASSWORD: rehab2026
      EMQX_NAME: emqx-rehab
      EMQX_HOST: 127.0.0.1
      EMQX_LISTENERS__DEFAULT__ANONYMOUS: "true"
    ports:
      - "1883:1883"     # MQTT TCP（传感器用这个）
      - "8083:8083"     # MQTT WebSocket（前端用这个）
      - "8084:8084"     # MQTT WebSocket TLS
      - "18083:18083"   # 管理界面
    volumes:
      - ./data:/opt/emqx/data
      - ./log:/opt/emqx/log

2.2 启动 EMQX

# 创建并进入目录
mkdir C:\emqx-rehab
cd C:\emqx-rehab

# 启动 EMQX（首次运行会拉取镜像，需等待2-5分钟）
docker-compose up -d

# 查看状态
docker ps | findstr emqx

2.3 验证 EMQX 启动成功

打开浏览器访问：http://localhost:18083

账号：admin
密码：rehab2026

看到 EMQX 管理界面即为成功。命令行验证：

curl http://localhost:18083/api/v5/status

🌐 第三步：配置 nginx

3.1 复制前端构建文件

项目已构建好的前端在 dist/ 目录，复制到 nginx 可访问的位置：

xcopy /E /I /Y D:\workspace\rehab-demo\dist\* C:\nginx\html\demo\rehab\

确认目录结构：

C:\nginx\html\
└── demo\
    └── rehab\
        ├── index.html
        └── assets\
            ├── index-C1V2uSgx.css
            └── index-_k3i3I8A.js

3.2 替换 nginx.conf

备份并替换 C:\nginx\conf\nginx.conf（完整内容如下）：

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

        # 前端静态文件（base: /demo/rehab/）
        location /demo/rehab/ {
            alias   C:/nginx/html/demo/rehab/;
            index   index.html;
            try_files $uri $uri/ /demo/rehab/index.html;
        }

        # MQTT WebSocket 反向代理
        location /mqtt-ws/ {
            proxy_pass http://127.0.0.1:8083/mqtt/;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header Host $host;
            proxy_read_timeout  86400;
            proxy_send_timeout  86400;
        }

        # 根路径重定向
        location / {
            return 301 http://localhost/demo/rehab/;
        }
    }
}

3.3 启动 / 重启 nginx

# 如果 nginx 已在运行，先停止
taskkill /F /IM nginx.exe

# 启动 nginx
cd C:\nginx
nginx.exe

🖥️ 第四步：打开前端页面

4.1 访问地址

http://localhost/demo/rehab/

4.2 连接到 EMQX

点击顶部 配置管理
选择 EMQX连接 标签
确认配置（应已预填）：
- Broker URL：/mqtt-ws/mqtt
- 用户名：admin
- 密码：rehab2026
点击 测试连接 → 显示”连接成功”

4.3 进入监测台

返回 监测台 页面
选择或新建患者
点击 连接EMQX
设备列表中对应设备应显示 📡在线

📡 第五步：传感器接入验证

5.1 确认传感器配置

ESP32 传感器固件配置需与 devices.json 一致：

传感器	Topic	deviceId
EMG 01	`rehab/emg/emg-01`	emg-01
EMG 02	`rehab/emg/emg-02`	emg-02
Gyro 01	`rehab/gyro/gyro-01`	gyro-01

5.2 查询本机 IP

ipconfig

找到 IPv4 地址，例如 192.168.1.100。

⚠️ 注意：ESP32 需要连接与本机同一局域网的 WiFi，然后固件中 EMQX_HOST 填写本机 IP（如 192.168.1.100），不是 localhost。

5.3 EMQX 管理界面查看数据

打开 http://localhost:18083 → 工具 → WebSocket
连接地址：ws://localhost:8083/mqtt
订阅 Topic：rehab/emg/#
观察是否有数据流入

✅ 部署检查清单

步骤	验证方法	预期结果
Docker 安装	`docker --version`	显示版本号
EMQX 启动	http://localhost:18083	EMQX 管理界面可登录
nginx 启动	http://localhost	显示 nginx 欢迎页
前端页面	http://localhost/demo/rehab/	康复监测系统界面
EMQX 连接	页面内测试连接	显示”连接成功”
传感器接入	EMQX管理界面 WebSocket 工具	看到 rehab/emg/… 数据
设备在线	监测台 → 设备列表	对应设备显示 📡在线

📂 相关文件位置

文件	路径
EMQX docker-compose	`C:\emqx-rehab\docker-compose.yml`
nginx 配置	`C:\nginx\conf\nginx.conf`
前端构建文件	`C:\nginx\html\demo\rehab\`
传感器固件参考	`docs\test-emg.c`
设备配置	`src\config\devices.json`
EMQX 客户端代码	`src\utils\emqxClient.js`
Vite 配置（含MQTT代理）	`vite.config.js`

目标