EMQ Dashboard前端頁面使用SPA設計(single-page application), 后端使用 MochiWeb 服務器處理來自REST API的數據并分發EMQ Broker的信息以及頁面所需的靜態文件, 這個架構在部署上也可以實現良好的前后端分離。

基本結構

# REST API地址
http(s)://host:8080/api/v2/

# Dashboard API地址
http(s)://host:18083/api/v2/

# 前端文件結構
www
    ├── favicon.ico
    ├── index.html
    └── static
        ├── css
        │   ├── *
        ├── fonts
        │   ├── *
        └── js
            ├── *

如果你需要使用Nginx來處理靜態資源文件或代理API接口，以獲得期望的性能和更高的安全性，這里提供一個官方的實踐指導。

1. 一個基本的nginx服務器配置, 將轉發Dashboard所有的數據

server {
        listen  80;
        server_name  localhost;
        # access_log  logs/host.access.log  main;
        # error_page  404 /index.html
        location / {
            proxy_pass   http://127.0.0.1:18083;
        }
}

這個配置僅僅是將瀏覽器發起的請求無差別反向代理到Dashboard，Dashboard仍然處理了繁重的靜態資源分發任務。

2. 使用nginx處理靜態資源，并代理轉發API的數據

server {
        listen  80;
        server_name  localhost;
        # access_log  logs/host.access.log  main;
        # error_page  404 /index.html
        
        # 靜態資源
        location / {
            # 復制一份靜態資源到此目錄下
            root   /www;
            # 如果你想使用已安裝在本機的EMQ里面的靜態資源,
            # /emqttd/lib/emq_dashboard-2.3.0/priv/www/
            index  index.html;
        }
        
        # API數據
        location /api/v2/ {
            proxy_pass   http://127.0.0.1/api/v2;
        }
}

前端靜態資源文件在emq-dashboard 的 priv/www 目錄下, 參見https://github.com/emqtt/emq-dashboard/tree/master/priv/www